WordPressのテーマをカスタマイズする際、カスタマイザーで色やカラーの変更ができる場合がありますが、CSSを直接編集することも多いですよね。
たまにブラウザをいくらリロードしても、カスタマイズしたCSSが反映されない・・・という時があります。
そんな時は以下の点を確認してみます。
CSSが反映されない時に確認すること
- キャッシュのクリア
- スタイルの競合
- WAFでブロックされている
順番に見ていきます。
キャッシュをクリア（削除）する
CSSが反映されない原因で一番多いのが、キャッシュが残っていることではないでしょうか。
以下の点でキャッシュクリアして、反映されるか確認します。
- ブラウザのキャッシュ
- プラグイン・テーマのキャッシュ
- サーバーのキャッシュ
ブラウザのキャッシュをクリアする
WebブラウザはCSSファイルをキャッシュするため、変更が即座に反映されない場合があります。
キャッシュクリアの方法はブラウザによって異なりますが、キーボードショートカット（Ctrl + Shift + R）を使用してページをリロード
プラグイン・テーマでキャッシュをクリアする
WordPressキャッシュプラグインを使用している場合はプラグインのキャッシュをクリアし、ブラウザキャッシュも削除してください。
テーマ側でもキャッシュ機能がある場合があるので、テーマの設定も確認してみます。
サーバーでキャッシュをクリアする
最近の高機能なレンタルサーバーでは、高速化のためサーバー側でもキャッシュ機能を有している場合があります。ブラウザのキャッシュを削除しても変わらない場合は、サーバーでキャッシュされているか確認してみます。
私は以前ConoHa WING
で、いくらブラウザでキャッシュクリアしても一向にCSSが反映されなかったので、Conoha Wingのコントロールパネルでキャッシュクリアをしたら反映されました。
ConoHa WINGではWordPressを簡単インストールすると自動的に「ConoHa WING 自動キャッシュクリア」というプラグインが追加されます。
しかし、記事を投稿した時しかキャッシュクリアしてくれないためCSSやファイルをカスタマイズした時には手動でコンテンツキャッシュをクリアします。
サイト管理 > 高速化 > キャッシュの中にある、コンテンツキャッシュの「クリア」ボタンをクリックします。
ConoHa WINGはWordPressの高速表示できるなど高機能なのにコスパがいいと評判のいいレンタルサーバーです。
CSSスタイルの競合・優先順位
CSSのスタイルは特定の優先順位に従って適用されます。CSSが反映されない場合、他にも優先順位が高いスタイルが適用されている場合があります。
CSSが優先される順序は以下の通りです。
- 重要度（!important）
- 詳細度（セレクタの種類や数）
- ソース順（後に書かれたものが優先）
重要度（!important）
重要度は、CSSの末尾に!importantを付けることで指定できます。この場合、他のルールよりも優先されます。
ただし、!importantを多用するとコードの可読性や保守性が低下するので、必要最小限に留めるべきです。
文法的に正しく記述しているのにCSSが適用されない場合、!importantが存在していることが原因の場合もあります。
詳細度（セレクタの種類や数）
CSSには詳細度という考え方があり、詳細度によってスタイルの適用が変わる場合があります。
詳細度はセレクタの種類や数によって決まります。以下のように下に行くほど、詳細度が高くなります。
- 要素セレクタ（例：p）
- クラスセレクタ（例：.red）
- IDセレクタ（例：#main）
- インラインスタイル（例：style=”color: blue;”）
また、セレクタの数も詳細度に影響します。
例えば、div pはdivよりも詳細度が高くなります。
同じ詳細度の場合は、記述された順によって優先順位が決まり、後に書かれたものが優先されます。
CSS詳細度の例
<!-- HTML -->
<div id="container" class="box">
<p>Hello, world!</p>
</div>/* CSS */
#container p {
color: red;
}
.box p {
font-weight: bold;
}
p {
font-size: 16px;
}上記の例では、#container pのスタイルが最も詳細度が高くなるため、color: red;が適用されます。
次に、.box pのスタイルが2番目の高い詳細度であり、font-weight: bold;が適用されます。
最後に、詳細度が最も低いpのスタイルが適用され、font-size: 16px;が適用されます。
参考 MDN 詳細度
このようにIDセレクタ、クラスセレクタ、要素セレクタの組み合わせでスタイルが適用される順位が決まるため、CSSをカスタマイズする際には詳細度を意識することが重要です。
ソース順（後に書かれたものが優先）
同じ重要度を持つスタイルが複数存在する場合、後に記述されたスタイルが優先されます。
外部ファイルとして複数のCSSファイルを読み込んでいる場合、読み込み順序によっても優先順位があります。
またスタイルが外部スタイルシートで定義されているか、インラインスタイルとしてHTML内に直接記述されているかによって優先度が異なります。
WAF（Web Application Firewall）でブロックされている
サーバーでWAFが有効になっている場合、CSSファイルのアクセスを制限している場合があります。
CocoonやAffingerなどWordPressテーマには、記事ごとにwp_head, wp_footerにコードを挿入することができるので、特定の記事だけにCSSを適用したい時に直接記述することができます。
しかしここへ記述してもCSSが保存されないことがあります。
CSSが保存されない原因はサーバーのWAFによってブロックされていたことでした。その場合WAF側での設定変更が必要になります。
まとめ
以上、WordPressテーマでカスタマイズしたCSSが反映されない時に確認することと、対処法を解説しました。
これらのポイントを確認することで、カスタマイズしたCSSが反映されない問題に対処できます。
デベロッパーツールやデバッグモードを活用して、適切な対応を行うことが重要です。
