ねーねー、へーた。僕のブログで画像を差し替えたんだけど新しい画像が表示されないんだよね～
それはキャッシュが原因かもね。
キャッシュですか？？
ウェブデザイナーやコーダーの仕事では、クライアントの依頼でCSSの変更や画像を差し替える作業が多くあります。その度にクライアントに変更・修正箇所を確認していただくわけですが
「画像が変わってないよ」
「文字の色が変わってないよ」
なんて言われたことみなさん一度は経験されていらっしゃるのではないでしょうか。
もちろんCSS・HTMLなどの記述間違えは問題外ですが、それ以外の場合で変更や修正が反映されないのはキャッシュが関係している場合がほとんどです。
キャッシュとは、一度読み込んだデータをパソコンやスマホ（ブラウザ）に一時的に保存する機能です。例えばWebサイトの場合、一度訪問したサイトのデータ（画像・コード）を保存するため次回訪問時のページの表示速度が速くなります。その反面、キャッシュが溜まりすぎるとかえって表示速度が低下したり、過去に保存したデータが表示されてしまうデメリットもあります。
今回は変更内容をクライアントに確認していただくという前提で、強制的にキャッシュを無効化する方法を紹介します。
強制的にキャッシュを無効化する方法
CSSの場合
CSSファイルを読み込ませる場合、一般的に<head></head>間に下記のコードを記述します。
<link rel="stylesheet" type="text/css" href="〇〇〇.css">
強制的にキャッシュを無効化する場合、このコードに少し手を加えます。
<link rel="stylesheet" type="text/css" href="〇〇〇.css?ver=1.0.0">
ファイル名の末尾に?ver=1.0.0 のようにバージョン情報を追加するだけでキャッシュを無効化することができます。
さらにCSSを変更した場合はバージョン情報の部分を?ver=1.0.1 ?ver=1.0.2のように書き換えてサーバーにアップロードすれば、クライアント側でキャッシュクリアしなくても、強制的にキャッシュを無効化することができます。
（以降紹介する「JavaScriptの場合」「画像の場合」も同様）
JavaScriptの場合
JavaScriptファイルを読み込ませる場合、一般的に<head></head>間に下記のコードを記述します。
<script type="text/javascript" src="〇〇〇.js"></script>
JavaScriptもCSSと同じように
<script type="text/javascript" src="〇〇〇.js?ver=1.0.0"></script>
とバージョン情報を追加すればOKです。
画像の場合
画像ファイルを読み込ませる場合の記述は
<img src="〇〇〇.png" alt="〇〇〇">
強制的にキャッシュを無効化する場合は
<img src="〇〇〇.png?20211108" alt="〇〇〇">
拡張子の後ろに?20211108 のようなパラメーター（?以降の文字列は任意）を付与すればキャッシュを無効化することができます。
.htaccessでキャッシュを無効化する方法（一例）
.htaccessファイルに以下の記述を追加します。
<Files ~ "¥.(html|php|jpe?g|gif|png|css|js|pdf)$">
Header add Pragma "no-cache"
Header set Cache-Control no-cache
</Files>
この記述の場合、html、php、jpeg、gif、png、css、js、pdfファイルのキャッシュを無効にします。
WordPressの場合
WordPressでキャッシュを無効化する方法はこちらの記事を参考にしてください。
最後に
今回紹介した方法はあくまでもキャッシュを”無効”にする方法で、”消去”する方法ではございません。
強制的にキャッシュを無効化する方法を制作案件に合わせて使用することで、より効率的に作業が進められると思います。
参考にしたサイト
「キャッシュの削除お願いします」をなくせ！強制的にCSSのキャッシュを無効化する２つの方法
https://haniwaman.com/cache-delete/
.htaccess（ブラウザキャッシュ高速化・無効化）制御による表示速度UP
https://lpeg.info/html/htaccess_cache.html