CSSを編集しても反映されない?chromeのキャッシュが原因かも

Drawing (2)

ワードプレスって見た目のカスタマイズが楽しくてついつい時間をかけてしまいます。記事を書いたほうが効率が良いのはわかっていますが、始めだしたらもう、止まらないものですよ。

CSSを編集してプレビュー画面を見てもあら不思議?変更が修正されていないじゃないの〜なんて経験ありませんか?

今回はchromeブラウザでありがちなCSSが反映されないときの対処法をご紹介します。

CSSが反映されなくなった?

ワードプレスでブログを書いている方なら、CSS(スタイルシート)の編集は

「外観」→「CSSの編集」を選びコードを入力。そしてプレビュー画面を見てCSSが反映されたか確認されていることでしょう。

プレビュー画面を見ながら操作できるので利用している方も多いと思います。しかし、いくらCSSに記述しても変更されない、前回の設定のままだ!っていう場合は原因があるはずです。

実際、僕も人気記事の表示数を10から5に変更した際、反映されなかったことがあります。

ブラウザのキャッシュが原因かも

ブラウザにはキャッシュが残り、これが原因でCSSの編集が反映されないことがあります。

キャッシュとはデータ保存、簡単に言うと前回観たページを再訪問したときに、素早く読み込むためのいわゆる記憶機能です。前回のキャッシュを優先するため、変更中のCSSが反映されず見た目は前回のまんま…なんてことになるのですね。

キャッシュ履歴を消して改善

chromeブラウザにもキャッシュ履歴が残るようになっています。この履歴を消すことでCSSの変更が改善される場合があるのです。

履歴の消し方は簡単。

chromeブラウザのバー右端のアイコン(漢字のみたいなやつ)をクリックして「履歴」を選びます。

履歴が表示されますので、「閲覧履歴データの消去」を選択します。

スポンサーリンク

Drawing

※ちなみに「ctrl」+「c」でも履歴確認が出来ます。

Drawing (1)

「閲覧履歴」「キャッシュされた画像とファイル」にチェックを入れます。期間は「すべて」にします。他の期間だと反映されない場合があるようですね。

※僕の場合「1時間」にしたら反映されませんでした乙。

最後に「閲覧履歴データを消去する」をクリックして終了です。

これでCSSの編集が見た目上も反映されるようになりました。

また、chromeウェブストアにあるアドオン「clear cache」でも簡単にキャッシュクリアができますよ。

▶clear cache-chromeウェブストア

他のブラウザではどうしたらいいの?

履歴削除の方法はブラウザによって違いますが、その他のブラウザのキャッシュクリアの方法はLIG様の解説が簡単ていねいでわかりやすいですよ。
▶キャッシュクリアでサイトの修正を反映させる方法(OS/ブラウザ別)

FirefoxやSafari、Opera等のキャッシュクリアの方法が書かれていますのでぜひ。

まとめ

「いくらCSSを変更しても反映されない!ウキーッ!」ってなる人はブラウザのキャッシュが影響してる可能性があります。

今回の例を参考に試してみてはいかがでしょうか?

※履歴を消したくないって人は別のブラウザを開いて反映されているか確認してみるのも良いかと思います。

スポンサーリンク



まだデータがありません。