CSSが反映されない!?それはキャッシュのせいかも知れません。

SyntaxHighlighterはPrismで決まり

Cache(キャッシュ)。

貯蔵するという意味の英語です。

パソコンで言うCacheは、一度読み込んだwebサイトの情報を、次に読み込む際に高速で表示できるようにパソコン内に保存しておく領域のことを言います。

シゲ

お金のことちゃうんかい。
そりゃCashやがなー。っておもんないわっ!

カミ

こんな人にオススメ
  • 何回リロードしてもCSSが更新されないとお嘆きの方
  • そもそもリロードって何?という方
  • キャッシュとリロードについて詳しく知りたい方

ファイルが反映されない!?

このCacheはとても便利な機能なのですが、Cacheのせいで編集したcssや、中身だけ変えてタイトルを変えなかった画像ファイルが反映されない。なんてことがよくあります。

この場合、実際は反映されているのですが、自分のパソコンで確認することが出来ません。

じゃあどうするの?という話になるわけですが、ご安心を。

Cacheを消すか、スーパーリロードをすればいいんです。

シゲ

強制リロードとかフルリロードとかっても言うで。
たまには普通のことも言うやんけ・・・・・。

カミ

スーパーリロードをすれば、キャッシュが残っていても強制的にファイルをダウンロードして反映させます。

スーパーリロード:Windowsの場合

Google ChromeCtrl+F5
Internet ExplorerCtrl+F5
MicroSoft EdgeCtrl+F5
FireFoxCtrl+F5
VivaldiCtrl+F5

シゲ

なんや。Ctrl押しながらF5押せばええのか。
他にも方法あんねんけどな。いっぱい知ってたってしゃあないやろ。

カミ

シゲ

てかVivaldiってなんやねん。
こなゆきオススメのブラウザらしいわ。

カミ

スーパーリロード:Macの場合

Google Chrome⌘Command+shift+R
Safari⌘Command+Option+E
FireFox⌘Command+Shift+R

シゲ

リロードは⌘Command+Rで共通やで。
てか、⌘ とか良く探せたな。

カミ

シゲ

偶然 ⌘ 打つ方法発見したから、思いついたらしいわ。

それでも反映されない場合、各ブラウザの設定からCacheを消してリロードしてください。

それでも反映されない!

WebサーバーのCacheが残っている場合があります。

その場合、Pluginや、各WEBサーバーの設定パネルからCacheを削除してください。

PluginならWP Fastest Cacheがオススメです。

シゲ

虎のやつや。
虎ちゃう。ヒョウや。

カミ

WP Fastest Cacheを使用しWebサーバーのCacheをクリアしたいだけなら、Delete Cache and Minified CSS/JSをクリックするだけです。

いやいや、それでも反映されない

WebサーバーのCache、ブラウザのCacheを両方ともクリアしても反映されない場合、残念ですが記述ミスを疑いましょう。

開発者ツール(F12ボタン)を使用し、何がイケないのか確認する必要があります。

まとめ

この記事のまとめです。

まとめ
  1. Cacheは読み込みを早くするために一度開いたサイトの情報やファイルを保存しておく領域
  2. 反映されない場合、スーパーリロードとWebCacheのクリアを!
  3. それでもダメならミスを疑おう。

最後までお読みいただきありがとうございました。