WordPressでCSSを修正したけど反映されないときに確認すべきこと

ブログのデザインを変更するためにCSSを修正したのに、ブラウザで確認したら修正されてない・・・こんなこと、ないでしょうか？

こういう場合、大抵はキャッシュが悪さをしています。対処方法について私は何度かハマってしまったので、備忘録がてら書いておこうと思います。

まずは基本。ブラウザのキャッシュを削除しよう

最も基本的な対応がこれ。ブラウザに残っているキャッシュを削除しましょう。ブラウザによってやり方は異なると思いますが、私が使っているChromeの場合は以下のとおりです。

以上でChromeブラウザのキャッシュがクリアされます。

ちなみに、ブラウザで確認するときには、通常のリロード（再読み込み）ではなく、スーパーリロードすることをオススメします。ブラウザによって操作方法は違うと思いますが、Chromeの場合は「Shift」＋「F5」です。

ブログをWordPressで構築している場合、キャッシュ系のプラグインを入れている人も多いかと思います。例えば「W3 Total Cache」とか。通常は高速化に貢献できてよいのですが、今回のようなCSS修正の反映確認のようなケースのときは邪魔だったりします。

なので、プラグインを一時的に無効にしてしまいましょう。確認後に有効に戻すのを忘れずに！

CloudFlareをご存知でしょうか？詳細はググって欲しいのですが、個人向けCDNサービスの1つです。

CDNって何かというと・・・Wikipediaをどうぞ。商用だとAkamaiなんかが有名ですね。

まーとにかく、サイト表示の高速化が実現できるもの！とお考えください。

そのCloudFlareを導入している方は、一時的にCloudFlareをバイパスする設定を試してみてください。

上記のページにログインしてください。

▼設定の歯車アイコンから、「Development mode」をクリック。

▼すると注意書きが出るので、「Confirm」をクリック。

以上で完了です。

これにより、一時的に開発モードとなり、CloudFlareを経由しなくなります。

注意書きにも書かれていますが、この開発モードは3時間後に自動的にオフになって再びCloudFlareを利用している状態になるため、後で設定を戻す必要はありません。

ちなみに、上記設定をした上で、CloudFlareのキャッシュを削除するとより確実かもしれません。が、一度削除すると再度キャッシュするのに結構時間がかかると思います（このあたりは試していないので不確実です）。

ブログ表示を高速化できる「mod_pagespeed」という設定があります。

このmod_pagespeed設定をしていると、CSSを更新しても遅延して反映されてしまうようです。即座に反映してほしい場合は、一時的にこのmod_pagespeed設定をオフにしてみましょう。

CSSなどを修正して反映確認を行いたい場合は、上記のポイントをチェックしてみてください。

赤間公太郎,大屋慶太,服部雄樹インプレス 2016-03-18