テーマ『賢威』の例

まだカスタムCSSが、ピンと来ないという方もおられると思うので、『賢威』というテーマの話を例えにあげます。
以下の記事にも書いたのですが、

テーマ『賢威6.2』のカスタマイズ(第1回)☆彡CSSのお勉強(1)

賢威というテーマは、デフォルトの状態では、style.cssを読み込みません。ひとつのスタイルシートで、デザインを設定するのではなく、どの部分のデザインか分かりやすいように、CSSを複数にわける構成を取っているからです。
旧来からのstyle.cssでデザインを指定しているわけではなく、『○○.css』という名前のファイルが複数あり、これらを読み込んで、デザインを構成しているのです。

こういう構成のテーマでは、子テーマを作成せずに、オリジナルテーマを直接編集するという方法を選ぶ人が多いです。というのも、子テーマでのスタイルシート編集は、親テーマがstyle.cssを読み込むことが前提になっています。ですから、もし賢威のスタイルシートの設定変更を、子テーマのstyle.cssでやりたいのなら、別途、PHPの編集が必要になり、手間がかかります。PHPをいじるより、子テーマを作成せず、変更箇所に応じて『○○.css』という名称のファイルを直接編集したほうが、断然、トラブルになりにくい。

2-1

でも、『カスタムCSS』に記載された設定変更なら、賢威であっても設定内容が反映されます。というのも、カスタムCSSは、プラグインとして機能を実装していて、テーマのスタイルシートの構成がどうであろうが、デフォルトでは『カスタムCSSでの設定変更を、テーマのCSSに追加する』という設定になっているからです。

 

賢威とAdsense広告ラベルの例

いぜん、私はグーグルアドセンスの公式プラグインを使って、Adsenseを配置するという記事を書きました。Adsenseを配置したら、『スポンサーリンク』もしくは『広告』と表示するラベルが必要になります。

私は、このサイトのテーマに賢威を使っています。賢威は、テーマ固有のstyle.cssを用いてデザインを指定しているわけではありません。そのため、テーマ固有のstyle.cssに、広告ラベル表示のCSSを指定しても、広告ラベルは表示されないことになります。

2-2

でも、管理画面の『外観』>『CSSの編集』からカスタムCSSで、広告ラベルをCSS指定したら、サクっと表示できました。
つまり、テーマ賢威が、style.cssを読み込まなくても、カスタムCSSでの設定が追加されたので、広告ラベルが表示されたのです。

参考;広告ラベルの話が気になる方は以下の記事を参考にしてください。

WordPress用『Google AdSense公式プラグイン』による広告配置(4) 広告ラベル

 

注:テーマを変更するとカスタムCSSはリセットされる

とはいえ、『カスタムCSS』がテーマと関係ないわけではありません。たとえば本文の文字を白から黒に変えたいと思うのは、オリジナルテーマのCSSが本文の文字が白だと指定しているからですよね。そういう意味では、カスタムCSSも、オリジナルテーマありきの存在なんです。

結果的に、カスタムCSSもテーマごとに管理されることになります。そして、カスタムCSSの画面には『注:テーマを変更するとカスタムCSSはリセットされます』という注意書きがあります。
こうした注意書きがあるのは、『カスタムCSSは、テーマのスタイルシートを編集せずにスタイル指定ができる』という意識がもたらす錯覚のためだと思います。確かに、こうした意識が先に立つと、カスタムCSSは、どんなテーマにも汎用的に使えるような錯覚に陥りそうです。
テーマを変更すると、カスタムCSSの内容もリセットされますから、一時的にテーマを変更したいといった場合は、カスタムCSSの内容もバックアップしておく必要があります。

 

カスタムCSSのプラグインもたくさんある

多機能な『Jetpack by WordPress.com』プラグインをWordPressに入れている方も多いと思うので、例に使いましたが、カスタムCSSだけのプラグインも種類が豊富にあります。

代表的なもののひとつが『Simple Custom CSS』です。プラグインの新規追加のキーワードに、『Simple Custom CSS』と入力して実行すると、同様の機能を持つプラグインも数多く表示されます。

2-3

ここで『Simple Custom CSS』をインストールして有効化した場合は、管理画面『外観』に『Custom CSS』というメニューが追加されます。このメニューから実行するCSSの編集も、『Jetpack by WordPress.com』を入れたあとで追加される『CSSの編集』と同様の機能を持つ『カスタムCSS』です。

2-4

カスタムCSSの設定が反映されないこともある

ただ、カスタムCSSでの設定変更が、うまく反映されない場合もあります。こっちのプラグインではうまくいかなかったが、別のプラグインではうまくいったという場合もあります。同一の機能を持つプラグインを同時に動作させるのは良くないので、複数のプラグインで動作確認する場合は、他のプラグインは無効化しておようにしてください。

また、こっちのプグラインはCSS編集で検索機能が使えないけど、こっちのプラグインでは検索機能が使えるといった機能の違いもあります。そのため、自分が使いやすいプラグインを探すのが良いと思います。