子テーマのstyle.cssに入力したCSSが反映されない理由と対策

テーマをカスタマイズする場合、子テーマを作成してstyle.cssにオリジナルのCSSを入力するのが一般的ですが、入力したCSSが反映されない場合もあります。その原因はさまざまですが、Stinger5のケースで説明します。

「カスタマイズは子テーマのstyle.cssで」が機能する条件

テーマをカスタマイズするときは子テーマのstyle.cssにCSSを入力すれば良いというのは、最後に読み込まれるスタイルシートが子テーマのstyle.cssだというのが前提になっています。

稼働中のWordPressではいくつかのスタイルシートが読み込まれてさまざまなスタイルが適用されます。最後に子テーマのstyle.cssを読み込むことで最終的にそれらのスタイルを上書きできるということです。

逆に言えば、子テーマのstyle.cssの後にCSSが記述されている場合、スタイルを子テーマのstyle.cssに記述しても反映されない（上書きできない）可能性があります。

Stinger5で子テーマのstyle.cssの後に適用されるスタイル

Stinger5で作成中のサイトについて、ページのソースを表示してみましょう。

<title>したまち観光協会</title>
<link rel="stylesheet" href="…themes/child/style.css" … />
…略…
<style type="text/css">
/*ブログタイトル*/
header .sitename a {
 color: #a22041;
}
/* メニュー */
nav li a {
 color: #a22041;
}
</style>

子テーマのstyle.cssが読み込まれた後に、styleタグでブログタイトルやメニューなどの色に関するCSSが出力されています。ダッシュボードの「外観」-「カスタマイズ」メニューで設定したサイトのキーカラーを反映するためです。

このように子テーマのstyle.cssより後でスタイルが適用されているので、通常のカスタマイズのイメージでCSSを入力してもうまくいかない場合があります。

子テーマのstyle.cssに入力したCSSが反映されない例

たとえば、メニューの色などを変更しようとします。メニューの色は「外観」-「カスタマイズ」メニューで選択できますが、サイト名などと共通の色が適用されるため、個別の色を設定したい場合です。

次のようなCSSを子テーマのstyle.cssに入力します。メニューの色とフォントサイズを変更しています｡

nav li a {
    color: #006600;
    font-size:20px;
}

フォントサイズは変更できましたが、色が変わっていません。

その理由は前述のように、子テーマのstyle.cssより後でstyleタグによってCSSが出力されているためです。

子テーマのstyle.cssに入力したCSSを反映させるには、styleタグのCSSより優先度を上げる必要があります。

解決策1：CSSに「!important」を付加

簡単な解決策は適用したいスタイルの後に「!important」を付加する方法です。

nav li a {
    color: #006600 !important;
    font-size:20px;
}

これで子テーマで設定したCSSが優先され、メニューの色も変わります。

「!important」は便利ですが、付ける必要のない部分まで安易に「!important」を付けていくと収拾がつかなくなるので注意が必要です。

解決策2：CSSセレクタを詳細に指定する

「!important」以外で解決するには、CSSセレクタを詳細に指定する方法があります。

styleタグで指定されたCSSのセレクタは「nav li a」です。これより詳細なセレクタを指定すれば、そちらのCSSが優先されます。

たとえば、メニューには「menu」というclass名が付いているのでCSSセレクタに追加してみます。

nav .menu li a {
    color: #006600;
    font-size:20px;
}

この方法で子テーマのstyle.cssの方が優先度が高くなるので、入力したCSSが反映されます。

このようにCSSセレクタを詳細指定することで、後で指定されているスタイルより優先度を上げて適用することができます。

CSSセレクタを詳細指定するパターンはいくつもあるのでHTMLソースを見ながら試行錯誤しましょう。