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

わたしのブログでは、「手順」を紹介したりする記事が多いです。

いつもは括弧（ [] や「」）を使って文字を囲んでいました。

▲こんな感じで。

でも、、、

本当は、下記のような感じにしたかったんです。

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

探しても見つかりませんでした。

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

ブログ文章の文字を枠で囲む方法

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

1. 「ワードプレス」にログインします。
2. 外観⇒テーマエディターの順にクリックしてください。
3. 「スタイルシート（style.cc）」に下記のコードを貼り付けます。

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

スタイルを適用させるには、

記事を書く画面で「ビジュアル」ではなく、「テキスト」に変更します。

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

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

▼「文字を囲む」にスタイルを適用した例

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

▼

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

応用編

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

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

font-size:0.85em;

「font-size」は文字の大きさを変更するコードになります。

変更する箇所は「0.85」のところです。

に変更してください。

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

border-radius:2px;

「border-radius」は、枠の角の形を変更することができるコード。

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

変更する箇所は「2」のところです。

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

background-color:#f9f9f9;

「background-color」は、文字を囲む枠の背景の色を変更することができます。

変更する箇所は「f9f9f9」です。
※「＃」「;」はそのままで数字だけを変更します

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

border:1px solid #777; 

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

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

padding:2px 8px;

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

上記のコードの場合、

を表しています。

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

margin:0 5px;

「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」の部分を適用したいスタイルの名前に変更してください。

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

わたしはまだ使ったことないのですが、

というプラグインを使えば簡単にコードを呼び出せるようになるみたいですよ。

▶Googleで「AddQuickTag」の設定方法を調べる

コードの編集に便利なサイト「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

それでは～