最終更新日が2023年以前の記事です。レイアウト変更のため、正常に表示されない場合があります。
Webデザインを刷新しようと思ってスタイルシートをいじったのに、アップロードした更新がすぐ反映されないのは、わかっていても結構なストレスです。サーバーが更新に時間をかけているのが問題なのか、技術的な問題なのかがすぐにはわからないというのもつらいポイント。
しばらくほっといても変更が反映されないので、「CSS 変更 反映されない」とかで検索すると、「キャッシュを消せ！キャッシュを消せ！キャッシュを消せー!!!」しか出てきません。
いやもうキャッシュは消したのよ。それでも直らないのよ。という場合はどうすればよいのでしょうか？
Contents
【もうやったと思いますが】ブラウザキャッシュの消し方
再三になりますがキャッシュは必ず消しましょう。もうそれは済んだよって方はここをクリックして次項へジャンプ！
履歴から消す
Google Chrome の場合
- 任意のページでCtrl+Hを押すか、右上のメニューから履歴を選択して、閲覧履歴を開きます。
- 開いたページの左側メニューから【閲覧履歴データの削除】をクリックし、【キャッシュされた画像とファイル】だけにチェックを付けて、【データを削除】をクリックしてください。
Microsoft Edge の場合
- 任意のページでCtrl+Hを押すか、右上のメニューから履歴を選択し、開いたポップアップウィンドウの右上の【…】を選択し、【[履歴]ページを開く】を選択します。
- 開いたページの右上の「閲覧データをクリア」を選択します。
- 時間の範囲は【全ての期間】を指定し【キャッシュされた画像とファイル】だけにチェックを付けて、【今すぐクリア】をクリックしてください。
キャッシュの消去とハード再読み込みをする
Google Chrome の場合
- F12 開発者ツールを開いた状態で、ブラウザ上の更新ボタンを長押しし、出てきたメニューから【キャッシュの消去とハード再読み込み】を選択してください。
Microsoft Edge の場合
- F12 開発者ツールを開いた状態で、ブラウザ上の更新ボタンを長押しし、出てきたメニューから【キャッシュをクリアしてハードリフレッシュ】を選択してください。
【原因の特定】ページが読み込んでいるCSSファイルを直接開いてみる
※以下はGoogle Chromeの場合の説明です。
アップロードしたCSSファイルが読み出せる状態になっているかどうかを確認します。
開発者ツールの[ネットワーク]タブを開き、読み込まれたcssファイルを探し、クリックします。
[プレビュー]タブで、開かれたcssファイルが最新のものかどうかを確認しましょう。これがもし最新のものであれば、そのページはそのcssファイルを読み込んでいるはずですので、cssの書き方に問題があるということになります。
URLパラメータを外してみる
ここで更新が反映されていない場合、バージョン管理が悪さをしている可能性があるので、URLパラメータを外してみます。
URLパラメータというのは、アドレスの？マークの後ろの部分。
https://ba-artworks.com/○○○/△△△/×××/style.css?ver=1.2.3
[ヘッダー]タブのリクエストURLをまるっとコピーし、ブラウザの新しいタブに貼り付けると、cssがプレーンテキストで表示されるはずです。
ここで、?マークとその後ろについている部分を手動で消してもう一度読み込んでみてください。
- これで最新のCSSが読み込まれるようになる場合、サーバー側のキャッシュの問題です。次項で対処を解説します。
- これでも読み込まれない場合はサーバーの更新が追いついていないだけである可能性が高いです。
【対処法】wordpressにスタイルシートのバージョン指定をやめさせる
URLパラメータを外して更新されるなら、最初からこっちを読み込めばいい話です。
functions.phpを開きます。
functions.php の内容を変更する作業ですので、たった1文字の違いで全てが動かなくなる危険性があります。バックアップを忘れずにとりましょう。
スタイルシートを読み込んでいる関数はwp_enqueue_style()です。以下は一例です。
<?php
wp_enqueue_style('portal',
get_theme_file_uri("/css/portal.css"),
array("ress", "style"),
false,
'all');
?>４つ目のパラメータが大抵falseになっていると思います（パラメータが４つ未満の場合も、４つ目のパラメータの初期値はfalseになります）。ここがバージョンを指定する引数で、falseの場合は自動的にwordpressの最新バージョンナンバーが入るようになっています。ですが今はバージョン指定をさせたくないので、ここを以下のようにに書き変えます。
<?php
wp_enqueue_style('portal',
get_theme_file_uri("/css/portal.css"),
array("ress", "style"),
rand(111,9999),
'all');
?>これでfunctions.phpの更新の反映を待ってリロードしてみてください。更新が反映されると読み込むスタイルシートのURLパラメータが変わりますので、反映されたかどうかは確実にわかります。
どういう仕組み？
クライアント（Chrome や Edge など）がキャッシュを保持して通信負荷を減らそうとするのと同様に、サーバー側でもキャッシュを保持して余計なデータの更新と通信を減らそうとしています。
URLパラメータで同じバージョンが指定されていると、サーバーが前に通信したファイルと同じものをやり取りしようとしている、と判断してしまいます。そこで、ここの数字をランダムに書き変えてやることで、毎回最新のファイルをやり取りすることを強制しています。
ここではrand()関数を使用しましたが、システム時刻などを使用しても構いません。
