WordPressテーマ（子テーマ）のstyle.cssなどでCSSを変更したとします。けれど、「サイトを閲覧しても変更部分が反映されていなかった」なんて場合の対処方法です。
フォーラムへの不具合に関する質問で一番多いのは、この「CSSが反映されない」という質問です。今後僕がフォーラム返信でリンクで案内して楽をするためにも、思いつく対処方法をまとめておこうと思います。
＼エックスサーバー開発のWordPressテーマ／
試して欲しいことリスト
CSSが反映されない場合に、試して欲しいことのリストがこちら。
- そもそもCSSに書き損じがないか確認してみる（CSS変更時）
- ブラウザをリロードする（F5ボタンを押す）
- ブラウザキャッシュを削除する
- ページキャッシュプラグインを無効にしてみる
- サーバー側のキャッシュ機能（mod_pagespeed等）を無効にしてみる
- CDN（CloudFlare等）を利用していないか確認してみる（している場合は停止）
- プラグイン全てを無効にしてみる
上記の順番をあたりで確認してみると効率が良いかなと思います。
以下では、それぞれの方法について詳しく説明します。
そもそもCSSに書き損じがないか確認してみる（CSS変更時）
そもそも、まずstyle.cssに書き込んだCSSに問題がないかチェックしてみてください。
よくフォーラムなどであるのが、カッコの閉じ忘れとかです。こんなの。
a {
color: #2098A8;
word-wrap: break-word;
a:hover {
color: #C03;
}
あと、;（セミコロン）の書き忘れもよくあります。
a {
color: #2098A8
word-wrap: break-word;
}
こういったケースでは、WordPressのテーマ編集画面から見ても、わかりづらいので、CSS文法が強調されるエディターに貼り付けて確認してみてください。
文字色に違和感のある表示になるので気づくことができるかもしれません。
あと、スタイルを適用するCSSセレクタが正しいかなども確認してください。
ブラウザをリロードする（F5ボタンを押す）
CSSが反映されないということは、ブラウザ上に「ブラウザキャッシュ」が残っている可能性があります。
ブラウザキャッシュについては検索で調べてみてください。
ブラウザキャッシュの更新は、ブラウザのリロードボタンを押すことで行うことができます。
ブラウザキャッシュを削除する
たまに、ブラウザのリロードボタン押しても、ブラウザキャッシュが更新されないことも稀にあります。
そういった場合は、以下の手順でブラウザキャッシュの削除を行ってみてください。
ページキャッシュプラグインを無効にしてみる
さらに希に、ページキャッシュプラグインで生成されたページのCSSが反映されている場合も考えられます。
そういう場合は、WordPress管理画面の「プラグイン」設定項目からページキャッシュプラグインを無効にしてみてください。
ページキャッシュプラグインの有名どころで言えばこんなところでしょうか。
- W3 Total Cache
- WP Fastest Cache
- WP Super Cache
- Quick Cache
上記のようなプラグインを無効にしてみてください。
大抵のページキャッシュプラグインのデフォルト設定では、管理者にはキャッシュ表示されない設定になっています。ですので、ログインして閲覧するのでも良いのかもしれません。ただし、プラグインによっては動作が変わってくるかもしれないので、無効にして試した方が確実かもしれません。
サーバー側のキャッシュ機能を無効にしてみる
エックスサーバーなどでは、mod_pagespeedのような、サーバーサイドのキャッシュを用意しているサービスもあります。
この機能が有効になっていると、変更したCSSは即座に反映されません。動作確認などをしたい場合は、無効にする必要があります。
詳しい手順は以下を参照してください。
エックスサーバー以外でもサーバー側にキャッシュ機能がある場合は、無効にしてください。
その他にも、「Xアクセラレータ」が有効になっている場合も無効にしてみてください。
CDNを利用していないか確認（利用していれば更新・削除）
あと、CloudFlareのようなCDN（コンテンツデリバリーネットワーク）サービスを利用している場合は、CSSや、JavaScriptのようなリソースファイルは、CloudFlare上にキャッシュされます。
CDN上にリソースファイルがキャッシュされている場合は、更新または削除してる必要があります。
CDNを利用しているかの確認方法
CDNを経由していないかなどは、who is情報を確認してみると良いでしょう。
ネームサーバー等がCDN（CloudFlare他）になっていれば、CDNを経由しています。
Name Server: CLEO.NS.CLOUDFLARE.COM Name Server: DAISY.NS.CLOUDFLARE.COM
CDNサービスによっては異なるかも。他は使用したことがないので。
CDNを利用している場合はキャッシュの更新・削除を行う
CDNサービスを利用している場合は、CDN側でリソースの更新（キャッシュの更新・削除）を行う必要があります。
CloudFlareの方法については、以下の「CloudFlareのキャッシュをクリアにする」項目にやり方が載っているので、参照してみてください。
その他のCDNについては、検索やヘルプなどを活用して調べてみてください。
プラグイン全てを無効にしてみる
ここまでして、CSSが反映されない場合は、とりあえず（可能性は低いかもしれませんが）その他のプラグインを疑ってみても良いかもしれません。
中には、CSSやJavaScriptのようなリソースを圧縮するプラグインが悪さをしている場合も考えられます。その他にも、予期しない不具合を引き起こすプラグインがないと言えません。
とりあえず、一旦「プラグイン」ページにあるすべてのプラグインを一旦「停止」にします。
その後、ブラウザでリロード行って、CSSが反映されるようであれば、「プラグインのどれか」に問題がある可能性が高いです。
一つ一つプラグインを有効にしていって、不具合が再現されるプラグインを特定してください。
プラグインが特定されたら、特定されたプラグインのみを無効にして、他を有効に戻してOKです。
まとめ
とりあえず、当フォーラムに寄せられる「CSSが反映されない」という質問の原因は、98％くらいの確率で、この8つのうちのどれかで解決することができるような気がします。
「せっかく子テーマのstyle.cssにカスタマイズコードを書いたのに反映されない」とか「何度リロードしても編集が反映されない」なんて場合には試してみてください。
ここまでして不具合が解消できない場合は、ちょっと無料のサポートフォーラムでは対応しきれないので、プロの方にご依頼ください。
