文中にある「特定の文字だけを四角で囲む」方法|ブログのカスタマイズ|ヨンデミテ。2020年1月29日(水)ブログの文章中にある特定の文字だけを枠で囲みたいと悩んでいるあなたのにピッタリな「CSSコード」を紹介します。こんな感じに囲みたいわたしのブログでは、「手順」を紹介したりする記事が多いです。「」)を使って文字を囲んでいました。「あいうえお」⇒「かきくけこ」⇒「さしすせそ」の順に文字を書いてください▲こんな感じで。本当は、下記のような感じにしたかったんです。あいうえお⇒かきくけこ⇒さしすせその順に文字を書いてください「文中の文字を囲む方法」を検索や本を読んで探してみましたが、検索の仕方が悪いのか...探しても見つかりませんでした。結局Googlechromeの「検証」を使って、知りたいコードを発見することができました。ひろcomさんのコードを参考にちょっぴりカスタマイズしました。参考にさせてもらったのは「ぽんひろcom」さんのブログ記事中で登場していたコードです。「ワードプレス」にログインします。外観⇒テーマエディターの順にクリックしてください。「スタイルシート(style.cc)」に下記のコードを貼り付けます。記事を書く画面で「ビジュアル」ではなく、「テキスト」に変更します。class=”kakomu”></span>の間にいれるだけでOKです。文中の文字を囲む方法がやっとわかったよ↑このように、文章中の文字が囲まれます。スタイルシートにコードを追加したら「キャッシュの削除」を忘れないようにしてください。キャッシュを削除をしないと、ブログにカスタマイズしたものが反映されません。キーボードのCtrl+F5を同時に押すとキャッシュを削除できます。応用編ぽんひろさんの、オリジナルコードを少し改変して、自分好みに変える方法を紹介します。文字を大きさを変更したい時font-size:0.85em;「font-size」は文字の大きさを変更するコードになります。変更する箇所は「0.85」のところです。文字を小さくする場合は0.85より小さい数字に変更してください。文字を囲む枠の角を丸くしたいborder-radius:2px;「border-radius」は、枠の角の形を変更することができるコード。角を丸くしたい時に使うみたいですね。変更する箇所は「2」のところです。2より数値を大きくすると、丸くなっていきます2より数値を小さくすると、四角に近づきます文字を囲む枠の背景色を変更したいbackground-color:#f9f9f9;「background-color」は、文字を囲む枠の背景の色を変更することができます。変更する箇所は「f9f9f9」です。※「#」「;」はそのままで数字だけを変更しますWEBカラーで検索すると、たくさん出てくるのでお好きなカラーを見つけてください。わたしが気に入ってるのは⇒カラーハントです。#777;「border」は、以下の順に指定されています。線の色を変える時は「#777」を変更するWEBカラーで検索すると、たくさん出てくるのでお好きなカラーを見つけてください。8px;「padding」は、枠と文字の空間を調節できます。上記のコードの場合、2px「上下」の空白8px「左右」の空白を表しています。5px;「margin」は、枠の外側の空間を調節できます。上記のコードの場合、0「上下」の空白5px「左右」の空白を表しています。class="kakomu">文字を囲む</span>記事を書くときは「テキスト」にして、「kakomu」の部分を適用したいスタイルの名前に変更してください。※記事を書くときは、「名前の前にある「.(ドット)」は入力不要です。わたしはまだ使ったことないのですが、AddQuickTagというプラグインを使えば簡単にコードを呼び出せるようになるみたいですよ。▶Googleで「AddQuickTag」の設定方法を調べるコードの編集に便利なサイト「CODEPEN」コードをアレンジするときに便利なのが「CODEPEN」というサイトです。class="kakomu">文字を囲む</span>ここまで準備ができたら、あとはCSSをいじっていくだけです♪コードの下にカスタマイズしたものが表示されます。リアルタイムで確認できるので便利です。無料で利用できますので試してみてくださいね。終わりに今日は「文章中の特定の文字を囲みたい」と悩んでいる人にCSSコードを紹介しました。使っているテーマに「子テーマ」がある時は、子テーマのスタイルシートにCSSコードを貼り付けてくださいね。カスタマイズしたら必ず「キャッシュの削除」を忘れないようにしてくださいね。「Ctrl+F5」でうまく削除できないときは、わたしがやっている方法をお試しください。ブラウザ(Googlechrome)を開き、「履歴」に移動し、「閲覧履歴データの削除」をクリックします。「キャッシュされた画像とファイル」にチェックをいれて「データを削除」をクリックします。ブログをリロードするか、、再度ブログを開きなおしてください。