CSSを編集したのにChromeで反映されず!の対処方法

例えば、頑張ってスタイルシートでWebの背景色なぞ変えたのだけども、実際にブラウザで見ても変わってないじゃん!って経験された方がこのページを見ていると思うのですが、そんな時って、こんな感じですよね。

「あり?変わらない・・・なんで??」で、何度もリロード。
「あー、さっき書いたCSSが怪しいんだ。」

「えー、でも何がダメなの??」と混沌になる前に、やることあります。ブラウザのキャッシュの消去、です。

キャッシュって何してくれてるの?

GoogleChromeなどWeb閲覧ブラウザは、「一度見に行ったWebページの画像やデータを蓄積」してくれます。

「あ、そのページ、この前とっといたから、すぐ表示できるよ」と。

気の利くことをブラウザがしているため、一度見たサイトの表示速度は早くなります。

でも、なんでリロードしてもcssが更新されないの?

Webページを読み直し(「F5」ボタンを押すなど)することで、ある程度のデータがリフレッシュされます。リフレッシュされないのは開発中にちょくちょく起きることです。

そのあたり「詳しくはWebへ」です。技術屋さんはここらへん掘っていくと面白い学びとなる場面と思いますが、自分はそのセンスありません。

ニュアンスで生きる私的な言葉に置き換えると、こんなことです。

「Webサーバーにある素材がブラウザに保存されているものと違いはない」と勘違いされて起きる現象。

これの原因にはサーバー時間とブラウザ時間の差異もあるようです。短時間に頻繁に更新されると出て来る現象でした。

で、キャッシュを消すために、
Chromeの三本マークを押す→設定→検索窓に「キャッシュ」と入力。ヒント出て来るので、それをたよりに履歴クリアをする。という面倒なことをし続けていました。

ある日、何気なく「拡張ツール」なるものを眺めていた時、こんな素敵なプラグインを発見してしまいました。

その名も「クリアーキャッシュ(英語表記)!」

【対処方法その1】Chromeであればこのプラグインを入れます。

Chromeユーザーであれば、クリアーキャッシュ(英語)を入れましょう! Clear Cache

キャッシュをクリアしてくれるChromeブラウザ専用のプラグインです。

スーパーキャッシュのキャプチャ画像

英語だったので、googleに自動翻訳してもらいました。

スーパーキャッシュのキャプチャ画像日本語訳

2行目のチェックボックスにチェックを入れるだけ! 説明文がありまして、英語を自動翻訳です。

 

Clear your cache and browsing data with a single click of a button.
ボタンを1回クリックするだけで、キャッシュと閲覧データを消去します。

~以下日本語約のみ~

このダイアログボックスでは、確認ダイアログ、ポップアップなどの不具合がなく、キャッシュをすばやくクリアできます。

アプリケーションキャッシュ、キャッシュ、Cookie、ダウンロード、ファイルシステム、フォームデータ、履歴、インデックス付きDB、ローカルストレージ、プラグインデータ、パスワード、WebSQLなど、オプションページでクリアするデータの種類と量をカスタマイズできます。

 

使い方として、このプラグインを入れて「2行目のチェックボックスにチェックを入れ」た後、「なんかスタイルシート更新されてないなー」っていう時に、ブラウザのツールバーに表示されてる「リサイクルマーク」のようなものをポチッと押す、だけでOKです。勝手にキャッシュをリフレッシュしてくれます。

ちなみに、一番上の「Reload」っていうところにチェックいれておくと、開いている全部のタブのキャッシュも更新してくれます。

【対処方法その2】wordpressであれば、header.phpを書き変えます。

テーマファイルをいじる人向けですが、header.php内のstyle.cssを引いてくる時に「タイムスタンプ」で強制的にキャッシュされたものと比較させますこともできます。

「あのね、タイムスタンプ、サーバーにあるやつとキャッシュされてるやつと比べてみてね。絶対違うから!」

というものです。style.cssというファイルが最終的に更新された日時をタイムスタンプ情報として付加されるので、cssを修正した場合、ブラウザ的にはキャッシュで持っているものとは絶対的に違うものになります。

これにより、「あ、違うのね」と認識してくれ、css修正のたびにブラウザのキャッシュ情報を消す必要がなくなる、というシロモノです。このタイムスタンプはHTMLソースに反映されるので、本当に変更したcssが読み込めているのだろうか?の目視確認もできてとても便利です。

ソースです

以下をheader.phpのスタイルシート読み込み部分(linkタグの一行全部)と差し替えると良いです。

このソースの意図するところは、
1.「bloginfo(‘stylesheet_url’)でcssのアドレスを取得、
2.その後に「?」をくっつけて、
3.「filemtime(get_stylesheet_directory() . ‘/style.css’)」でcssの更新時刻(タイムスタンプ)を取得。
4.今までのを全部くっつけてアドレスにする。です。

最後に

ただ、最近のテーマファイルはheader.phpにごちゃごちゃと機能が付与されてて、style.cssを読み込みさせるという単純な部分をfunctions.phpをまたいで違うとこのphpファイルへ隠す、という感じです。とにかくスタイルシートは奥に奥に隠す、機能も切り刻んでしまい、テーマ独自の関数をまとめるためのfunctions.phpの先を見に行かないと読み解けない、という作り込みが主流?になっているのでしょうか。とにかく工夫されすぎてて手出しするととても大変なことにもなります。

お使いのテンプレートの「header.php」の中に「bloginfo()」関数で呼び出されるスタイルシートであれば、そこのlinkタグごと一行まるっと差し替えます。なんか違うなー、という場合ですと、とても嫌な事件が起きる可能性が高いのでオススメしません。

SNSでもご購読できます。

コメントを残す

*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)