背景色や文字サイズなど、サイトのスタイルを変更するにはCSSのカスタマイズが必要です。
CSSとはご存じのようにデザインを定義しているもので、例えばフォントサイズを変えたりカラーを指定したりというのはCSSを修正することで実行できます。
しかし親テーマに直接手を加えるのはリスクが大きいので、普通は子テーマを作って編集するのですが、カスタマイズに慣れていない方にとっては、ちょっとした修正のために子テーマを作るのは面倒に感じることもあります。
そこでカスタムCSSというものがあります。これは管理画面で入力したCSSをHTMLソース上のタグ内に出力できる機能です。
カスタムCSS機能を使えば、テーマに直接手を加えるという危険を冒すことなく、管理画面から安全かつ手軽にカスタマイズを行うことができます。
カスタムCSSで親テーマに手を加えずデザインを変える
カスタムCSSには管理画面のカスタマイザーにあるもの(テーマオプション)と、編集画面下部に設置されているもの(エディタ)の二つあります。ただしテーマによってはエディタのカスタムCSSは設置されていないことが多いです。
テーマオプションのカスタムCSS
WordPress編集画面の左側にあるダッシュボードで「外観」→「カスタマイズ」と進みと最下部に「追加CSS」があります。
テーマオプションの基本設定に存在するカスタムCSS機能です。
こちらに記入したCSSは、サイト上の全てのページに反映されてしまいますが、一括でスタイルを変更したいときには便利です。記事IDにより適用させる記事を指定することもできます。
【例】 テーマColorMag の「追加CSS」

エディタのカスタムCSS
投稿や固定ページのエディタ下部にあるカスタムCSSです。
こちらに記入したCSSの内容はそのページだけに反映されます。
【例】下図はCocoon と SWELL の例です(赤枠内にCSSを追加記述する)。


Cocoon と SWELL にはエディタにカスタムCSSがありましたが、テーマによってはないことが多いです。
その場合は簡単な方法としてプラグインを使って設置することができます。
プラグインを利用してエディタのカスタムCSSを追加する
ここではそのプラグインをご紹介したいと思います。
プラグイン 「Add css to post」
プラグインにもいくつかありますが、ここでは「Add css to post」(作:Kachibito氏)をご紹介します。
「プラグインを使わずに記事ごとに~」というタイトルのとおり、プラグインを使いたくない方向けのカスタマイズ方法だったのですが、結局しっかりプラグインで提供されています。
「ZIP」の絵をクリックしてデスクトップにダウンロードし、 WordPress の「プラグイン」にアップロードして有効化します。
● WordPressのプラグイン一覧画面

【例】無料テーマ「ColorMag」にプラグインでカスタムCSSを設置
テーマ ColorMag にプラグインでエディタにカスタムCSS(add CSS)を追加した例


CSSの知識があれば、スタイルの自由度を広げることができますね。
他の無料テーマ「Twenty Twenty」「Twenty Twenty-one」「Twenty Twenty-two」でも同様にadd CSS を設置できました。ただし動作については確認していません。
(おわり)