ブログの文章中にある特定の文字だけを枠で囲みたい
と悩んでいるあなたのにピッタリな「CSSコード」を紹介します。
こんな感じに囲みたい
わたしのブログでは、「手順」を紹介したりする記事が多いです。
いつもは括弧( [] や「」)を使って文字を囲んでいました。
「あいうえお」⇒「かきくけこ」⇒「さしすせそ」の順に文字を書いてください
▲こんな感じで。
でも、、、
本当は、下記のような感じにしたかったんです。
あいうえお⇒かきくけこ⇒さしすせその順に文字を書いてください
「文中の文字を囲む方法」を検索や本を読んで探してみましたが、検索の仕方が悪いのか…
探しても見つかりませんでした。
結局Googlechromeの「検証」を使って、知りたいコードを発見することができました。
ぽんひろcomさんのコードを参考にちょっぴりカスタマイズしました。
▶WordPressのカスタマイズコードがたくさん紹介されてます♡見てるだけで楽しいサイト(*´˘`*)
もくじ+
ブログ文章の文字を枠で囲む方法
参考にさせてもらったのは「ぽんひろcom」さんのブログ記事中で登場していたコードです。
- 「ワードプレス」にログインします。
- 外観⇒テーマエディターの順にクリックしてください。
- 「スタイルシート(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; /* フォントの大きさ */
}
スタイルを適用させるには、
記事を書く画面で「ビジュアル」ではなく、「テキスト」に変更します。
<span class="kakomu">囲みたい文字を入力する</span>
囲みたい文字を<span class=”kakomu”></span>の間にいれるだけでOKです。
▼「文字を囲む」にスタイルを適用した例
文中の<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 | 囲む枠の「線の色」 |
数値が大きくなるほど線が太くなり、小さくなるほど線が細くなります
solid:1本線で囲む
double:2本線で囲む
dashed破線
dotted点線
groove:線が凹
ridge:線が凸
inset:立体的凹
outset:立体的凸
枠と文字の空間を調節したい
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; /* フォントの大きさ */
}
- 上記のコードにある「.kakomu」の名前をスタイルごとに変更する
- スタイルシートに貼り付ける
スタイルを適用するときは、
<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」でうまく削除できないときは、わたしがやっている方法をお試しください。
- ブラウザ(Googlechrome)を開き、「履歴」に移動し、「閲覧履歴データの削除」をクリックします。
- 「キャッシュされた画像とファイル」にチェックをいれて「データを削除」をクリックします。
- ブログをリロードするか、、再度ブログを開きなおしてください。