現在WordPressのテーマ引越中です。表示が崩れて読みにくい箇所があると思います。

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

  • URLをコピーしました!

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

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

「」で文字を囲む

「あいうえお」⇒「かきくけこ」⇒「さしすせそ」の順に文字を書いてください

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

CSSで文字を囲む

あいうえおかきくけこさしすせその順に文字を書いてください

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

結局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.85em;

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

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

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

変更するコード

border-radius:2px;

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

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

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

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

変更するコード

background-color:#f9f9f9;

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

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

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

おすすめはカラーハント

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

変更するコード

border:1px solid #777;

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

1px囲む枠の「線の太さ
solid囲む枠の「線の種類
#777囲む枠の「線の色

線の太さを変更する

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

線の太さを変更する

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

solid:1本線で囲む

double:2本線で囲む

dashed破線

dotted点線

groove:線が凹

ridge:線が凸

inset:立体的凹

outset:立体的凸

線の色を変更する

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

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

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

変更するコード

padding:2px 8px;

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

上記のコードの場合、

2px「上下」の空白
8px「左右」の空白

を表しています。

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

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

変更するコード

margin:0 5px;

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

上記のコードの場合、

0「上下」の空白
5px「左右」の空白

を表しています。

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

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

/*文中の文字を囲む*/
.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

【キャッシュの削除について】

「Ctrl+F5」でうまく削除できないときは、わたしがやっている方法をお試しください。

  1. ブラウザ(Googlechrome)を開き、「履歴」に移動し、「閲覧履歴データの削除」をクリック
  2. 「キャッシュされた画像とファイル」にチェックをいれて「データを削除」をクリック
  3. ブログをリロードするか、、再度ブログを開きなおしてください。
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次