ぶんたのそぞろある記から独立移転しました。

カスタムCSSを記事ごとに設定する方法

背景色や文字サイズなど、サイトのスタイルを変更するにはCSSのカスタマイズが必要です。

CSSとはご存じのようにデザインを定義しているもので、例えばフォントサイズを変えたりカラーを指定したりというのはCSSを修正することで実行できます。

しかし親テーマに直接手を加えるのはリスクが大きいので、普通は子テーマを作って編集するのですが、カスタマイズに慣れていない方にとっては、ちょっとした修正のために子テーマを作るのは面倒に感じることもあります。

そこでカスタムCSSというものがあります。これは管理画面で入力したCSSをHTMLソース上のタグ内に出力できる機能です。

カスタムCSS機能を使えば、テーマに直接手を加えるという危険を冒すことなく、管理画面から安全かつ手軽にカスタマイズを行うことができます。

目次

カスタムCSSで親テーマに手を加えずデザインを変える

カスタムCSSには管理画面のカスタマイザーにあるもの(テーマオプション)と、編集画面下部に設置されているもの(エディタ)の二つあります。ただしテーマによってはエディタのカスタムCSSは設置されていないことが多いです。

「カスタムCSS」とか「追加CSS」とか「Add CSS」などと呼び方がいろいろ有り混在しますが同じものです。

テーマオプションのカスタムCSS

WordPress編集画面の左側にあるダッシュボードで「外観」→「カスタマイズ」と進みと最下部に「追加CSS」があります。

テーマオプションの基本設定に存在するカスタムCSS機能です。

こちらに記入したCSSは、サイト上の全てのページに反映されてしまいますが、一括でスタイルを変更したいときには便利です。記事IDにより適用させる記事を指定することもできます。

【例】 テーマColorMag の「追加CSS」

カスタムCSS-テーマ
管理画面ダッシュボード → 外観 → カスタマイズ

エディタのカスタムCSS

投稿や固定ページのエディタ下部にあるカスタムCSSです。

こちらに記入したCSSの内容はそのページだけに反映されます。

【例】下図はCocoon と SWELL の例です(赤枠内にCSSを追加記述する)。

CocoonのカスタムCSS
Cocoon の例
SwellのカスタムCSS
SWELL の例

Cocoon と SWELL にはエディタにカスタムCSSがありましたが、テーマによってはないことが多いです。

その場合は簡単な方法としてプラグインを使って設置することができます。

プラグインを利用してエディタのカスタムCSSを追加する

ここではそのプラグインをご紹介したいと思います。

プラグイン 「Add css to post」

プラグインにもいくつかありますが、ここでは「Add css to post」(作:Kachibito氏)をご紹介します。
「プラグインを使わずに記事ごとに~」というタイトルのとおり、プラグインを使いたくない方向けのカスタマイズ方法だったのですが、結局しっかりプラグインで提供されています。

「ZIP」の絵をクリックしてデスクトップにダウンロードし、 WordPress の「プラグイン」にアップロードして有効化します。

● WordPressのプラグイン一覧画面

追加CSSプラグイン
赤枠のとおりインストールされたら有効化します。

【例】無料テーマ「ColorMag」にプラグインでカスタムCSSを設置

テーマ ColorMag にプラグインでエディタにカスタムCSS(add CSS)を追加した例

ColorMagのオリジナル
ColorMagのオリジナル編集画面
CocorMagのカスタムCSS
プラグインでadd CSSを追加設置(赤枠)

CSSの知識があれば、スタイルの自由度を広げることができますね。

他の無料テーマ「Twenty Twenty」「Twenty Twenty-one」「Twenty Twenty-two」でも同様にadd CSS を設置できました。ただし動作については確認していません。

(おわり)

ー 広 告 ー

Page Top
目次
閉じる