WordPressでCSSが反映されないときのチェックポイント
「WordPressでCSSを変更しても反映されない」とか「style.cssを修正しても表示が変わらない」は多くの方が悩む問題です。当サイトでも何度か記事を書いていますが相談が多いので、ここでも簡単に原因と対策をまとめておきます。
この記事の内容
子テーマや「追加CSS」に書いたCSSが反映されない
なぜCSSが反映されないのかを説明する前にCSSカスタマイズがうまくいく仕組みを説明します。
CSSカスタマイズがうまくいく仕組み
CSSを変更する（CSSカスタマイズ）には、親テーマを修正せずに子テーマまたは「追加CSS」メニューを使うのが一般的です。
CSSカスタマイズの基本的な考え方は最も優先されているスタイルを上書きすることです。といっても実際に上書きするわけではなく、既存のスタイルより優先度の高いCSSを書くという意味です。
たとえば、見出し2（h2）のフォントサイズを修正したいとします。
h2 {font-size:18px;}
このスタイルを修正するには、新たなスタイルを書いて“上書き”します。
h2 {font-size:18px;}
h2 {font-size:24px;}
続けて書いているので意味がわかりづらいかもしれませんが、実際は最初の「h2 {font-size:18px;}」は親テーマのstyle.cssに書いてあり、2番目の「h2 {font-size:24px;}」は子テーマのstyle.cssや「追加CSS」に入力することになります。
後に書いたスタイルが優先されるというCSSの仕組みによって親テーマのCSSが“上書き”され、h2のフォントサイズは24pxになります。
通常は、親テーマのstyle.cssが読み込まれた後に子テーマのstyle.cssが読み込まれるため、このような“上書き”によるCSSカスタマイズが可能になります。
「テーマのカスタマイズは子テーマを使おう」と説明されるのは、そのためです。後に書いた方が優先されるという特徴を活かしたものです。修正したいコードだけを子テーマに書いていけばよいので管理が楽ですよね。
h2 {font-size:18px;}
h2 {font-size:24px;}
子テーマを使えば親テーマを修正せずにCSSをカスタマイズできるということです。
子テーマを作るのが面倒であれば「外観」-「カスタマイズ」メニューの「追加CSS」に入力しても同じことです。これも親テーマより後に読み込まれるという特徴を活かした機能です。
CSSカスタマイズの基本コンセプトをまとめておきます。
- できれば親テーマのCSSファイルを直接修正しないこと
- 後に読み込まれるCSSが優先されるという仕組みを利用すること
- 親テーマより後で読み込まれるのが子テーマや追加CSS
- そこにCSSを書けば親テーマを修正せずにスタイルを上書きできる
後に書いたCSSが反映されないケース
上記の仕組みには「基本的には」なので、CSSの構成や書き方によっては子テーマや追加CSSに書いたCSSが反映されないこともあります。
主な原因は優先度の問題です。
CSSには優先度が高いスタイルが適用されるという特徴もあります。
前述の「後から書いたCSSが優先される」というのは、次のように2つのスタイルの優先度が同じという前提です。
h2 {font-size:18px;}
h2 {font-size:24px;}
優先度は「どこにスタイルを適用するか」（CSSセレクタ）の書き方で決まります。この場合、どちらも見出し2（h2）に対してスタイルを設定しているので、優先度は同じです。
ただし、先に書いたスタイルの方が優先度が高ければ、後に書いたCSSが反映されません。たとえば、次のような例です。
#content h2 {font-size:18px;}
h2 {font-size:24px;}
この場合、見出し2に対してスタイルを指定している点は同じですが、書き方が違うことで優先度が異なります。
後に書いたスタイルは単純にh2に対してスタイルを指定しています。
「見出し2のフォントサイズを24pxに」という意味ですが、単独のCSSとしては問題ありません。
ただし、先に書いたスタイルは#content h2のようにCSSセレクタが詳細に指定されています。
いずれにせよh2のフォントサイズを設定するという意味で違いはありませんが、一般的にCSSセレクタを詳細に指定した方が優先度が高くなります。「h2」だけの場合は1ポイントですが、「#content h2」が101ポイントというイメージです。
先に書いた「#content h2」の方がポイントが大きいので後に書いたCSSよりも優先されます。
つまり、上記の例では後に書いたスタイルが反映されないという悩みが生まれます。子テーマのstyle.cssに書いても、追加CSSに入力しても同じです。
これが、他人の作ったテーマやプラグインを利用するWordPress特有の悩みです。
Dreamweaverを使って1人ですべてのCSSを制御できる場合は、そのCSSを修正すれば済みますが、WordPressでは他人が書いたCSSの中で最も優先されるCSSを書く必要があります。
ですから「h2のフォントサイズを変更するにはh2 {font-size:24px;}」という教科書的な知識やコピーペーストするだけの作業では通用しません。
現状をしっかり分析してコードを書いていく必要があります。
CSSの優先度について詳しくは以下のページも参考にしてください。
CSSの変更が反映されないときはセレクタの優先順位をチェック
子テーマのstyle.cssを読み込んでいないケース
CSSカスタマイズがうまくいくのは親テーマの後に子テーマのstyle.cssを読み込んでいるためと説明しましたが、そもそも子テーマのstyle.cssを読み込まないテーマもあります。その状態ではCSSを書いても反映されないのは当然です。
その場合、次のようなコードを子テーマのfunctions.phpに追加して明示的に子テーマのstyle.cssを読み込むようにすることができます。
/* 子テーマのstyle.cssを読み込む */
add_action( 'wp_enqueue_scripts', 'my_enqueue_style_child' );
function my_enqueue_style_child() {
wp_enqueue_style( 'child-style', get_stylesheet_uri() );
}
CSSの文法が間違っているケース
初歩的な話ですが、CSSの文法が間違っていると反映されません。コード記述に慣れていないとわかりづらいかもしれませんが、たとえば、次のコードは文法ミスで反映されません。どこが間違っているでしょうか？
h2 {
font-size: 24px !important；
}
答えはCSSを閉じるセミコロン「;」が全角の「；」になっている点です。慣れていればすぐわかるミスですが、コード入力に慣れていない方はCSSは半角で入力することを覚えておきましょう。
文法ミスは他のコードにも影響します。たとえば、次のCSSはh2のフォントサイズを変更しようとしていますが、うまくいきません。「#site-info」は過去に記述したCSSです。
#site-info {
font-size: 36px !important;
h2 {
font-size: 24px !important;
}
今回追加したh2のCSSが反映されないので、そこばかり注目するかもしれませんが、原因は前回に記述した「#site-info」です。波括弧 { が閉じていないので、自分には問題ありませんが、ここから下に書くCSSが影響を受けます。
つまり、h2に対するCSSに問題はありませんが、いつまで経っても反映されないで悩むことになります。
引っ掛け問題のようですが、実際にWordPress個別サポートにも相談のあるケースです。どうみても文法的に問題がなさそうな場合は、そのコードより上の方に問題が起きていないかチェックしてみましょう。
CSSが反映されないときは優先度を上げる
後から書いたCSSが反映されない問題を解決するには、基本的には自分が書くCSSの優先度を上げる方法があります。以下、優先度を上げる2つの方法を紹介します。
CSSセレクタを詳細に指定する
まず、CSSセレクタを詳細に指定して先に書いたスタイルと同じ優先度にする方法があります。たとえば、後から書くスタイルのCSSセレクタを次のように「#content h2」にします。
#content h2 {font-size:18px;}
#content h2 {font-size:24px;}
同じCSSセレクタであれば優先度が同じになるので、後から書いたスタイルの方が優先されることになります。
スタイルに「!important」を付ける
または、後から書いたスタイルの最後に「!important」を付ける方法もあります。
#content h2 {font-size:18px;}
h2 {font-size:24px !important;}
「!important」を付けたスタイルの優先度が上がるため、先に書いたスタイルを上書きすることができます。
ただし、「!important」は強力で、変更したくない部分のスタイルにも影響する可能性があるので、変更後は入念なチェックが必要です。
できれば、「解決策1」のように限定的にスタイルを適用した方が無難です。
キャッシュを見ているとCSSの変更は反映されない
ここまでの話はCSSの仕組みから見た「変更が反映されない」の対策でしたが、ちょっとした原因の場合もあります。
たとえば、ブラウザのキャッシュを見ている場合、修正前の古いCSSを見ているので、変更は反映されません。キャッシュ（履歴）を消去して、ブラウザの「更新」ボタンをクリックして最新の表示で確認してみましょう。
同じようにWordPress内でキャッシュプラグインを使っている場合、最新の内容が画面に反映されない場合があります。キャッシュプラグインのメニューでキャッシュを削除してから確認してください。
まとめ
以上、WordPressでCSSの変更が反映されない問題について説明してきました。ポイントをまとめておきます。
- 基本的には後に書いたスタイルが適用される
- 後に書いたスタイルが適用されないのは優先度の問題
- CSSセレクタを詳細に書いた方が優先度が高くなる
- 優先度を上げるには上書きしたいスタイルのCSSセレクタを参考にする
- どうしてもうまくいかないときは「!important」を使う
- CSSが反映されないのは単純にキャッシュが原因ということも
それでもうまくいかないときはWordPress個別サポートにご相談ください。私が直接サイトのCSSをチェックして対応いたします。
この記事ではCSSカスタマイズの考え方を説明しましたが、具体的な作業について詳しくは以下のページも参考にしてください。