ロリポップで画像やCSSを更新したのに古いまま表示される時の直し方

画像を差し替えたのに古い写真が出る、CSSを直したのに見た目が変わらない。サイトを更新していると、このキャッシュ問題はかなりストレスになります。

ただし、原因はブラウザキャッシュだけとは限りません。ロリポップの公開フォルダへ送れていない、別ファイルを編集している、画像URLが変わっていない、スマホだけ古いCSSを見ている、などが混ざります。

古い画像やCSSが出る時の確認順

画像やCSSのURLを直接開き、?v=、画像名変更、CSSのバージョン番号、FTP更新日時の順に確認します。

まず分けること

キャッシュバスターを使うべきもの

キャッシュバスターは、ブラウザが古いファイルを持ち続けると困るものに使います。特に、見た目や操作に関わるファイルは優先度が高いです。

キャッシュバスターを使わない方がよいもの

キャッシュバスターは便利ですが、何でも付ければよいわけではありません。キャッシュは本来、サイトを速く表示するための仕組みです。

なぜ「更新時だけURLを変える」のがよいのか

ブラウザは、同じURLのCSSや画像を再利用します。これは表示速度を上げるためには正しい動きです。しかし、サイト運営者が同じファイル名で中身だけ更新した時、ブラウザが古いファイルを持ち続けることがあります。

そこで、ファイルを更新した時だけ ?v=20260518 のようにURLを変えます。ブラウザから見ると別のURLになるため、新しいファイルを取りに行きます。一方で、更新していない時は同じURLのままなので、キャッシュの速さも残せます。

画像を差し替えた時の安全な方法

同じファイル名で上書きすると、ブラウザが古い画像を持ち続けることがあります。確実に新しい画像を見せたい時は、ファイル名を変えるのが分かりやすいです。

古い画像:
/assets/images/main.jpg

新しい画像:
/assets/images/main-20260510.jpg

HTML:
<img src="/assets/images/main-20260510.jpg" alt="メイン画像">

画像を頻繁に差し替えるページでは、日付や短い番号をファイル名に入れると、どれが新しい画像か追いやすくなります。

CSSはURL末尾のバージョン番号を変える

CSSはファイル名を毎回変えるより、URL末尾にクエリを付ける方法が扱いやすいです。HTML側で読み込むURLを変えると、ブラウザは別URLとして読み直します。

<link rel="stylesheet" href="/assets/css/style.css?v=20260510">

CSSファイル自体の場所は同じでも、?v=20260510 のように変えることで、古いCSSを読み続ける問題を減らせます。

PHPサイトならfilemtimeで自動化できる

PHPで作っているサイトなら、CSSやJavaScriptの更新日時を使って、自動で ?v= を付けられます。手作業で ?v=1、?v=2 と変え続けるより、変更漏れが減ります。

<?php
$css_path = $_SERVER['DOCUMENT_ROOT'] . '/assets/css/style.css';
$css_version = is_file($css_path) ? filemtime($css_path) : '1';
?>
<link rel="stylesheet" href="/assets/css/style.css?v=<?= htmlspecialchars($css_version, ENT_QUOTES, 'UTF-8') ?>">

この方法では、CSSファイルを更新した時だけURL末尾の数字が変わります。毎回ランダムな値を付けるわけではないので、キャッシュの速さを残しながら、更新時の反映漏れを減らせます。

一時確認なら画像URLに?v=を付ける

画像が本当に差し替わっているかだけ確認したい時は、画像URLの末尾に一時的なクエリを付けて直接開きます。

https://example.com/assets/images/main.jpg?v=1
https://example.com/assets/images/main.jpg?v=20260510

これで新しい画像が見えるなら、ファイル自体は更新されていて、ブラウザキャッシュが残っていた可能性が高いです。

今回の最大のミス: 画像本体だけ見て、ページの参照URLを見ていない

画像差し替えで一番やりがちな失敗は、画像ファイルだけを更新して「直った」と判断することです。実際には、ページ側のHTMLが古い画像URLを読み続けている場合があります。

たとえばスマホ用の図解を直したつもりでも、トップページの picture や source srcset が古いSVGを参照していれば、ユーザーのスマホには古い画像が出続けます。この時、画像URLを直に開く確認だけでは足りません。実際のページHTMLがどの画像を読んでいるかまで確認する必要があります。

確実に反映させたい時は、同名画像の上書きと ?v= だけで粘るより、新しいファイル名にしてページ側の参照を切り替える方が分かりやすいです。

変更前:
<source media="(max-width: 760px)" srcset="/assets/images/example-sp.svg" type="image/svg+xml">

変更後:
<source media="(max-width: 760px)" srcset="/assets/images/example-sp-v2.svg" type="image/svg+xml">

AIに作業ルールとして伝える内容

AIやCodexに画像差し替えを頼む時は、画像ファイルを上書きするだけでなく、HTML側の参照URLも確認してもらいます。特にスマホ用とPC用で picture や srcset を使っている場合、片方だけ古いURLのままだと「直したはずなのにスマホだけ古い」状態になります。

画像を差し替える時は、反映漏れを防ぐために次のルールで作業してください。

ルール:
- 画像ファイルを更新したら、HTML/PHP側の img src / picture source / srcset の参照も確認する
- 同じファイル名で上書きした場合は、参照URLに ?v=YYYYMMDD-内容 のようなバージョンを付ける
- CSSやJavaScriptは、可能なら filemtime() で更新時刻ベースの ?v= を自動付与する
- 毎アクセスでランダム値や現在時刻を付ける方法は、確認用以外では使わない
- それでも反映が不安な場合は、新しいファイル名にして参照を切り替える
- PC用画像とスマホ用画像がある場合は、両方に同じ方針でバージョンを付ける
- 画像URLを直接開いて、新しい画像が返るか確認する
- トップページや記事ページなど、その画像を使っているページ側のHTMLも新しいURLを出しているか確認する
- 変更した画像ファイルと、参照を書き換えたHTML/PHPファイルを報告する

例:
変更前:
/assets/images/example-sp.svg

変更後:
/assets/images/example-sp.svg?v=20260517-arrow2

確認:
- 画像URL直開きで新しい内容が見える
- ページHTML内の srcset / src が新しい ?v= 付きになっている
- スマホ幅で古い画像が出ていない

mdに残すならこの作業ルール

AIに継続してサイト修正を任せるなら、次のようなルールをプロジェクトのmdに残しておくと、同じミスを減らせます。

## 画像差し替え時の反映確認ルール

- 画像を差し替える時は、画像ファイル単体だけで完了扱いにしない。
- その画像を参照しているHTML/PHPの `img src`、`picture source`、`srcset` を必ず確認する。
- スマホ用画像とPC用画像が分かれている場合は、両方の参照を確認する。
- 同名ファイルを上書きした場合は、参照URLに `?v=YYYYMMDD-内容` を付ける。
- CSSやJavaScriptは、可能なら `filemtime()` でファイル更新時刻を `?v=` に入れる。
- 毎アクセスでランダム値や現在時刻を付ける方式は、表示速度を落とすため恒久運用にしない。
- 反映されない可能性が高い画像は、新しいファイル名にして参照を切り替える。
- 本番確認では、画像URL直開きだけでなく、実際のページHTMLが新しい画像URLを出しているか確認する。
- 最終報告には、変更した画像ファイル、変更した参照元ファイル、確認した本番URLを含める。

FTP側の更新日時を見る

キャッシュ対策をしても変わらない時は、サーバー側のファイルが本当に更新されているか見ます。FileZillaやWinSCPの右側で、画像やCSSの更新日時を確認してください。

• 右側の公開フォルダを開いているか
• 画像ファイルの更新日時が新しくなっているか
• 失敗した転送に残っていないか
• assets/images や assets/css を別フォルダに送っていないか

AIに投げる時のプロンプト

AIに聞く時は、「古い画像が出る」だけでは情報が足りません。URL、変更したファイル、FTP上の更新日時、試したことをセットで渡すと、切り分けが早くなります。

ロリポップでサイトを更新しています。
画像を差し替えたのにブラウザで古い画像が表示されます。

状況:
- 対象URL:
- 画像URL:
- 変更したファイル名:
- HTML/PHP側で画像を参照している箇所:
- FTPソフト:
- サーバー側の更新日時:
- 試したこと: Ctrl+F5 / シークレットタブ / ?v= を付けて確認 / 画像URL直開き

ブラウザキャッシュ、アップロード先ミス、画像パス間違い、HTML側のsrc/srcsetが古いままのどれが原因か、確認順を出してください。

CSSが反映されない時のAIプロンプト

ロリポップでCSSを更新しましたが、画面に反映されません。

確認したいこと:
- HTMLで読み込んでいるCSSのURL:
- FTP上のCSSの場所:
- サーバー側の更新日時:
- linkタグの内容:
- スマホだけ古いのか、PCも古いのか:

CSSキャッシュ、linkタグのパス、アップロード先ミス、メディアクエリの残り指定を切り分ける手順を教えてください。

やってはいけないこと

• 原因が分からないまま同じファイルを何度も上書きする
• ローカルとサーバーのどちらを見ているか確認せずに作業する
• 画像ファイル名に日本語や空白を混ぜる
• 本番の .htaccess をバックアップなしで触る
• キャッシュだと思い込み、アップロード先の確認を飛ばす

公式情報で確認するところ

キャッシュ、FTP、公開フォルダはサーバー仕様やブラウザの挙動に関わります。Copicodeでは実務の確認順に並べていますが、ロリポップ側の仕様や画面名は公式情報でも確認してください。

次に読む記事

• Web公開トラブル症状別レスキュー
• ロリポップで自作PHPサイトを安全に更新する入口
• AIコードを本番に入れる前後の安全確認入口
• CSSが反映されない時の原因と直し方
• ロリポップで画像が表示されない時の確認手順
• ロリポップでスマホだけ表示が古い時の直し方
• FTPでアップロードしたのに反映されない時の確認手順
• Web公開トラブル確認メモ