WordPressでカスタムCSS

WordPressにおいて、見出し等にCSSで下のような装飾を付けたいと思った。

見出しの例

小見出しの例

テーマの「style.css」にCSSを記述すれば実現できるけれども、テーマの更新があったり、そもそもテーマを変更したりすると、せっかく記述したコードが消えてしまう。

そこで、カスタムCSSのプラグインを使ってみることにした。

Simple Custom CSSをインストールする

管理画面の「プラグイン」→「新規追加」でプラグインのキーワード検索に「Simple Custom CSS」を入力すれば、見つけることができる。

２年前から更新されていないのがちと気になるが、WordPress4.8.1で問題なく（たぶん）動いている。他にも似たような機能のプラグインがあるが、なんか複雑そうなので、とりあえすこれを使うことにする。

Simple Custom CSSの使い方

使い方はすごくシンプル。

管理画面の「外観」に「カスタムCSS」が追加されるので、これを選択する。
するとCSSを記述するウインドウが表示されるので、追加するCSSを記述して「カスタムCSSの更新」ボタンをクリックするだけ。「style.css」にCSSを追加するのと同じことになるんだろう、たぶん。

今回は、下のようなCSSを記述してみた。特定のクラス名を付けてある。

例えば、投稿編集画面で、以下のように記述すれば反映される。

<h2 class='midashi'>Simple Custom CSSをインストールする</h2>