文中にある「特定の文字だけを四角で囲む」方法｜ブログのカスタマイズ

この記事ではブログの文章中にある特定の文字をこのように枠で囲む方法を紹介します。

わたしのブログでは、手順を紹介する記事が多く、いつもは文字を括弧（[]や「」）を使って囲んでいました。

しかし、本当にしたかったのは下記のように囲む方法。

「文中の文字を囲む方法」を検索や本を読んで探してみましたが、検索の仕方が悪いのか探しても見つかりませんでした。

結局Googlechromeの「検証」を使って、知りたいコードを発見することができました。

ぽんひろcomさんのコードを参考にちょっぴりカスタマイズしました。

CSSを使わずに、特定の文字を囲む方法について

今までこの記事では、CSSを使った文字を囲む方法を紹介してきました。

しかし、CSSを使わずに、簡単に文字を囲む方法を見つけました。

2022年12月に当ブログのWordPressのテーマを「JIN」から「SWELL」に変更したときに気づきました

WordPressのテーマ「JIN」を使っている場合

「JIN」を使っている人は、キーボードという機能を使えば文字を囲むことができます。

この機能は、クラシックエディター、ブロックエディタ―どちらでも使用可能。

「JIN」以外を使っている場合

「ブロックエディタ―」の、インラインコードという機能を使えば文字を囲むことができます。

クラシックエディターにはインラインコード機能はありません

JINのキーボードや、ブロックエディタ―のインラインコードを使えば簡単に文字を囲むことはできますが、色や形をカスタマイズすることはできません。

色や形などカスタマイズしたいならCSSを使います。

CSSを使って、文字を枠で囲む方法

参考にさせてもらったのは「ぽんひろcom」さんのブログ記事中で登場していたコードです。

1. 「ワードプレス」にログインする
2. 外観⇒テーマエディターの順に選択する
3. 「スタイルシート（style.cc）」に下記のコードを貼り付けます。

/*文中の文字を囲む*/
.kakomu{
	padding:2px 8px; /* 枠と文字の空間 */
	margin:0 5px; /* 枠の外の空間 */
	background-color:#f9f9f9; /* 枠の背景色 */
	border:1px solid #777; /* 枠の線の太さ・種類・色 */
	border-radius:2px; /* 枠の角を丸くする */
	box-shadow: 1px 2px 2px #ddd; /*影をいれる*/
	font-family:inherit; /* フォントの種類を継承する */
	font-size:0.85em;	/* フォントの大きさ */
}

記事を書く画面では、「ビジュアル」ではなく、「テキスト」に下記コードを追加します。（クラシックエディターの場合）

HTML

<span class="kakomu">囲みたい文字を入力する</span>

囲みたい文字を<span class=”kakomu”></span>の間にいれるだけです。

文中の<span class="kakomu">文字を囲む</span>方法がやっとわかったよ

↑このように、文章中の文字が囲まれます。

スタイルシートにコードを追加したら「キャッシュの削除」をします。キャッシュを削除をしないと、ブログにカスタマイズしたものが反映されない場合があります。

応用編

ぽんひろさんの、オリジナルコードを少し改変して、自分好みに変える方法を紹介します。

/*文中の文字を囲む*/
.kakomu{
	padding:2px 8px; /* 枠と文字の空間 */
	margin:0 5px; /* 枠の外の空間 */
	background-color:#f9f9f9; /* 枠の背景色 */
	border:1px solid #777; /* 枠の線の太さ・種類・色 */
	border-radius:2px; /* 枠の角を丸くする */
	box-shadow: 1px 2px 2px #ddd; /*影をいれる*/
	font-family:inherit; /* フォントの種類を継承する */
	font-size:0.85em;	/* フォントの大きさ */
}

文字を大きさを変更したい時

「font-size」は文字の大きさを変更するコード。変更する箇所は数字（0.85）のところです。

• 文字より大きくする場合は0.85より大きい数字
• 文字より小さくする場合は0.85より小さい数字

文字を囲む枠の角を丸くしたい

「border-radius」は、枠の角の形を変更することができるコード。 変更する箇所は数字（2）のところです。

角を丸くしたい時に使うみたいですね。

• 2より数値を大きくすると、丸くなる
• 2より数値を小さくすると、四角に近づく

文字を囲む枠の背景色を変更したい

「background-color」は、文字を囲む枠の背景の色を変更できるコード。変更する箇所は英数字（f9f9f9）のところです。

※「＃」「;」はそのままで数字だけを変更します

「WEBカラー」で検索すると、たくさん出てくるのでお好きなカラーを見つけてください。

おすすめはカラーハント

文字を囲む枠の「線」をアレンジしたい

「border」は、以下の順に指定されています。

線の太さを変更する

線の太さを変更する場合は「1px」をの数字を変更します。数字が大きくなるほど線が太くなり、小さくなるほど線が細くなります。

線の太さを変更する

線の種類を変更する時は「solid」を変更します。

solid：1本線で囲む

double：2本線で囲む

dashed破線

dotted点線

groove：線が凹

ridge：線が凸

inset：立体的凹

outset：立体的凸

線の色を変更する

線の色を変更する時は「#777」を変更します。

「WEBカラー」で検索すると、たくさん出てくるのでお好きなカラーを見つけてください。

枠と文字の空間を調節したい

「padding」は、枠と文字の空間を調節できます。

上記のコードの場合、

を表しています。

数値より小さい数字にすると空間が狭くなり、大きい数字にすると空間が広くなります。

枠の外側の空間を調節したい

「margin」は、枠の外側の空間を調節できます。

上記のコードの場合、

を表しています。

数値より小さい数字にすると空間が狭くなり、大きい数字にすると空間が広くなります

複数の枠を使い分けたいとき

/*文中の文字を囲む*/
.kakomu{
	padding:2px 8px; /* 枠と文字の空間 */
	margin:0 5px; /* 枠の外の空間 */
	background-color:#f9f9f9; /* 枠の背景色 */
	border:1px solid #777; /* 枠の線の太さ・種類・色 */
	border-radius:2px; /* 枠の角を丸くする */
	font-family:inherit; /* フォントの種類を継承する */
	font-size:0.85em;	/* フォントの大きさ */
}

1. 上記のコードにある「.kakomu」の名前をスタイルごとに変更する
2. スタイルシートに貼り付ける

スタイルを適用するときは、

<span class="kakomu">文字を囲む</span>

記事を書くときは「テキスト」にして、「kakomu」の部分を適用したいスタイルの名前に変更してください。

※記事を書くときは、スタイルの名前の前にある「.（ドット）」は入力不要。

コードの編集に便利なサイト「CODEPEN」

コードをアレンジするときに便利なのが「CODEPEN」というサイトです。URL：https://codepen.io/pen/

①「CSS」に以下のコードを貼り付けます

/*文中の文字を囲む*/
.kakomu{
	padding:2px 8px; /* 枠と文字の空間 */
	margin:0 5px; /* 枠の外の空間 */
	background-color:#f9f9f9; /* 枠の背景色 */
	border:1px solid #777; /* 枠の線の太さ・種類・色 */
	border-radius:2px; /* 枠の角を丸くする */
	font-family:inherit; /* フォントの種類を継承する */
	font-size:0.85em;	/* フォントの大きさ */
}

②「HTML」には以下のコードを貼り付けます

<span class="kakomu">文字を囲む</span>

ここまで準備ができたら、あとはCSSをいじっていくだけです

コードの下にカスタマイズしたものが表示されます。リアルタイムで確認できるので便利です。

無料で利用できますので試してみてくださいね。

終わりに

今日は「文章中の特定の文字を囲みたい」と悩んでいる人にCSSコードを紹介しました。

使っているテーマに「子テーマ」がある時は、子テーマのスタイルシートにCSSコードを貼り付けてくださいね。

そしてカスタマイズしたら必ず「キャッシュの削除」を忘れないようにしてくださいね。⇒Ctrl+F5

これだけで基本がしっかり身につく HTML/CSS＆Webデザイン1冊目の本

著:Capybara Design, 著:竹内 直人, 著:竹内 瑠美

Amazonで探す

楽天市場で探す

Yahooショッピングで探す

メルカリで探す

ポチップ