WordPress個別サポート

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

スポンサーリンク

WordPressテーマ「LOTUS (TCD039)」

「カスタマイズは子テーマの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が優先される

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

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

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
WordPress講座の問い合わせ先

関連記事

BizVektorのカスタマイズ

WordPressカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート