ブログ運営

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

ブログの文章中にある特定の文字だけを枠で囲みたい

と悩んでいるあなたのにピッタリな「CSSコード」を紹介します。

こんな感じに囲みたい

 

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

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

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

▲こんな感じで。

でも、、、

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

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

 

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

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

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

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

▶WordPressのカスタマイズコードがたくさん紹介されてます♡見てるだけで楽しいサイト(*´˘`*)

 

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

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

 

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

 

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>

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

 

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

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

文中の文字を囲む方法がやっとわかったよ

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

 

スタイルシートにコードを追加したら「キャッシュの削除」を忘れないようにしてください。

キャッシュを削除をしないと、ブログにカスタマイズしたものが反映されません。

キーボードのCtrl+F5を同時に押すとキャッシュを削除できます。

 

 

 




応用編

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

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

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カラーで検索すると、たくさん出てくるのでお好きなカラーを見つけてください。

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

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

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

AddQuickTag

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

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

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

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

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