「WordPressでCSSを変更しても反映されない」とか「style.cssを修正しても表示が変わらない」は多くの方が悩む問題です。当サイトでも何度か記事を書いていますが相談が多いので、ここでも簡単に原因と対策をまとめておきます。
テーマのstyle.cssは変更しない方が良い
そもそも「テーマのstyle.cssを変更したのに反映されない」に悩んでいる方へ。
テーマ（親テーマ）のstyle.cssを直接修正するのはおすすめできません。
なぜなら、現在見ている画面の色や文字の大きさ、余白などのスタイルはテーマのstyle.cssによるものとは限らないからです。
現在表示中の画面には多くのCSSファイルが読み込まれています。
テーマだけでなく多くのプラグインもCSSファイルを持っています。
また、テーマにもstyle.css以外のCSSファイルがある場合もあります。
現在表示中の画面の色やフォントサイズなどが、どのCSSに由来するのか調べる必要があります。
ですから、親テーマのstyle.cssを開いて修正したCSSが反映されないのは不思議なことではありません。
「絶対禁止！」とまでは言えませんが、style.cssを修正してデザインを変更するのは、あまりおすすめできません。
CSSカスタマイズの基本コンセプト
CSSを変更する（CSSカスタマイズ）には、親テーマを修正せずに子テーマまたは「追加CSS」メニューを使います。
「外観」-「カスタマイズ」‐「追加CSS」によるCSSカスタマイズ
その使い方はともかくとして、基本的な考え方は最も優先されているスタイルを上書きすることです。たとえば、見出し2（h2）のフォントサイズを修正したいとします。
h2 {font-size:18px;}
このスタイルを修正するには、新たなスタイルを書いて“上書き”します。
h2 {font-size:18px;}
h2 {font-size:24px;}
これは、後に書いたスタイルが優先されるというCSSの仕組みによるものです。これにより、h2のフォントサイズは24pxになります。
問題は、このスタイルをどこに書くかですが、理想は子テーマのstyle.cssです。
子テーマのstyle.cssにCSSを入力
通常は、親テーマのstyle.cssが読み込まれた後に子テーマのstyle.cssが読み込まれるからです。
「テーマのカスタマイズは子テーマを使おう」と説明されるのは、そのためです。
後に書いた方が優先されるという特徴を活かしたものです。
h2 {font-size:18px;}
h2 {font-size:24px;}
子テーマを使えば親テーマを修正せずにCSSをカスタマイズできるということです。
子テーマを作るのが面倒であれば「外観」-「カスタマイズ」メニューの「追加CSS」に入力しても同じことです。これも親テーマより後に読み込まれるという特徴を活かした機能です。
「外観」-「カスタマイズ」‐「追加CSS」によるCSSカスタマイズ
CSSカスタマイズの基本コンセプトをまとめておきます。
- できれば親テーマのCSSファイルを直接修正しないこと
- 後に読み込まれるCSSが優先されるという仕組みを利用すること
- 親テーマより後で読み込まれるのが子テーマや追加CSS
- そこにCSSを書けば親テーマを修正せずにスタイルを上書きできる
子テーマや「追加CSS」に書いたCSSが反映されない場合
上記のコンセプトは「基本的には」なので例外もあります。
ですから、子テーマや追加CSSに書いたCSSが反映されないことも少なくありません。
主な原因は優先度の問題です。
CSSには優先度が高いスタイルが適用されるという特徴もあります。
前述の「後から書いたCSSが優先される」というのは、次のように2つのスタイルの優先度が同じという前提です。
h2 {font-size:18px;}
h2 {font-size:24px;}
ただし、先に書いたスタイルの方が優先度が高ければ、後に書いたCSSが反映されません。たとえば、次のような例です。
#content h2 {font-size:18px;}
h2 {font-size:24px;}
何が違うのか。それは、スタイルを適用する場所（CSSセレクタ）の指定方法です。
後に書いたスタイルは単純にh2に対してスタイルを指定しています。
「見出し2のフォントサイズを24pxに」という意味ですが、単独のCSSとしては問題ありません。
ただし、先に書いたスタイルでは#content h2のようにCSSセレクタが詳細に指定されています。
「コンテンツ部分の見出し2のフォントサイズを24pxに」のような解釈になりますが、いずれにせよh2のフォントサイズを設定するという意味で違いはありません。
問題は、「h2」と「#content 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の変更が反映されないときはセレクタの優先順位をチェック
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カスタマイズの考え方を説明しましたが、具体的な作業について詳しくは以下のページも参考にしてください。