WPカスタマイズ時、CSSがChromeに反映させれない時の対処法
なぜ、WPをカスタマイズしていてCSSがすぐに反映されないのか？
ワードプレスのオリジナルテーマに、機能を追加したり見栄えを良くしたりするために、ローカルでCSSをいじってサーバーにアップしてもChromeに反映されない時があり困ったことがありました。
ググると、キャッシュが残っていることが原因でした。
「キャッシュ」とは？
訪問した “ ウェブページの情報 ” を一時的に保存する仕組み（またはその一時的なデータそのもの）のことで、よく訪問するページの表示スピードが上がるというメリットがある。ページを表示する際には、そのページのデータをダウンロードする必要があるが、画像やテキスト情報など、キャッシュという一時的な保存データがスマホやPC内にあることで、再表示のスピードが上がるというわけだ。
TIME&SAPACE KDDIがお届けするIT×カルチャーマガジン
キャッシュデータはキャッシュした時点の情報のため、ウェブページの更新があってもその内容が反映されず、キャッシュデータ（更新前のページ）を表示し続ける場合がある。PCの場合は『スーパーリロード』というキャッシュを使わずウェブから情報を読み込む更新方法で対応できるが、スマホの場合は、キャッシュを削除する必要がある。※参考：スーパーリロード方法
・Windows：Control＋F5
・Mac：Command＋R
https://time-space.kddi.com/ict-keywords/20191210/2798
ネットを利用する上で便利な機能＝キャッシュですが、そのキャッシュによって
書いたCSSが適用されているか、サイトを表示して確認したい時に、前のキャッシュが残っていて反映されないと困ります。
pc内のブラウザのキャッシュを削除して、CSSが反映されるようにしました。
キャッシュの消去とハード再読み込み
Windowsづかいのため、C＋F5でリロードしましたが、反映されないことがありました。
再度ググると、Chromeのみにになりますが、全部読み込み直す方法を見つけました。
- F12でデベロッパーツールを表示
- リロードのマーク上で右クリック
- 「キャッシュの消去とハード再読み込み」をクリック
カスタマイスのために書いたCSSがしっかり反映されました！
下記リンクを参考に、スマホなども定期的にキャッシュを消去すると動きが良くなりますよ。
スマホでのキャッシュクリア手順
TIME&SAPACE KDDIがお届けするIT×カルチャーマガジン
https://time-space.kddi.com/ict-keywords/20191210/2798