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

スポンサーリンク

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

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

スポンサーリンク

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

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

  1. 右上の設定メニューから「その他のツール」を選択
  2. 「閲覧履歴を消去」を押下
  3. 「閲覧履歴データを消去する」が表示されるので、「キャッシュ」にチェック。期間は「すべて」を選択しておきましょう

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

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

スポンサーリンク

WordPressを利用しているなら、キャッシュ系のプラグインをチェック

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

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

スポンサーリンク

CloudFlareを導入している場合、一時的に設定を変更しよう

CloudFlareとは?

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

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

コンテンツデリバリネットワーク – Wikipedia

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

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

CloudFlareの設定方法

My websites | CloudFlare | The web performance & security company

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

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

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

以上で完了です。

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

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

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

mod_pagespeedの設定をオフにしてみる

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

エックスサーバーの人は絶対やろう!mod_pagespeed設定でブログ表示速度が向上したよ

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

まとめ

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

<関連記事>

【WordPress】CSSでナンバリング!人気記事のランキング順位を表示する方法

HTMLやCSS修正の確認はChromeの標準機能「デベロッパーツール」を使うと便利!

エックスサーバーの人は絶対やろう!mod_pagespeed設定でブログ表示速度が向上したよ