画像を上書きしても反映されない原因と対策【アクセラレータ（キャッシュ）設定に注意】

2025年11月11日 最終更新日時 : 2026年8月14日 login_user
目次

WordPressで画像やCSSを修正し、同じファイル名のままサーバーへ上書きしたのに、「何度更新しても古い画像・古いデザインが表示される」ことがあります。

この現象では、ファイルのアップロードに失敗しているとは限りません。

ブラウザ、レンタルサーバー、WordPressのキャッシュプラグイン、CDNなどに以前のデータが残っているため、新しいファイルをアップロードしても古い内容が表示されることがあります。

また、WordPressの画像については、単純なキャッシュ以外に「自動生成された別サイズの画像」が残っていることもあります。

この記事では、画像・CSS・JavaScriptを差し替えても反映されない原因と、安全な解決方法を、Xserver・ロリポップ！・Cloudflareなどの例も交えて解説します。

1 まず知っておきたい「キャッシュ」とは？

キャッシュとは、一度取得したデータを一時的に保存し、次回から同じデータを再利用することでWebサイトを高速に表示する仕組みです。

WordPressサイトでは、主に次のような場所でキャッシュが使われます。

  • ブラウザキャッシュ：利用者のPCやスマートフォンに保存
  • サーバーキャッシュ：レンタルサーバー側に保存
  • WordPressキャッシュ：キャッシュプラグインなどが生成
  • CDNキャッシュ：CloudflareなどのCDN側に保存

キャッシュはサイト高速化に役立ちますが、
ファイルを更新したときには古いデータが一定期間表示される原因になることがあります。

2 なぜ同じファイル名で差し替えると古い画像が表示されるの？

たとえば、 

https://example.com/images/logo.png

という画像があるとします。

この画像を新しく作り直し、サーバー上の logo.png を同じ名前のまま上書きした場合でも、URLそのものは変わりません。 

変更前
			

				https://example.com/images/logo.png
			

			

変更後
https://example.com/images/logo.png

ブラウザやCDNなどに以前の logo.png が有効なキャッシュとして残っていれば、新しい画像を取得せず、保存済みの画像を表示することがあります。

ただし、「同じファイル名なら必ず古い画像になる」という意味ではありません。

キャッシュの有効期限や Cache-Control、ETag、Last-Modified などの設定によって、ブラウザやCDNが再確認して新しいファイルを取得する場合もあります。

3 最も確実な方法は画像のファイル名を変更する

画像を確実に差し替えたい場合、最も分かりやすい方法はファイル名を変更してURLそのものを変えることです。

たとえば、 

logo.png
↓
logo-v2.png

と変更します。

HTMLも、 

<img src="/images/logo-v2.png" alt="ロゴ">

のように変更します。

URLが変わるため、以前の logo.png のキャッシュとは別のファイルとして取得されます。

サイトのロゴやメインビジュアルなど、更新後すぐ確実に新しい画像を表示したい場合におすすめの方法
です。

4 原因① ブラウザキャッシュが残っている

まず確認したいのが、自分のPCやスマートフォンに残っているブラウザキャッシュです。

サーバーではすでに新しい画像になっていても、自分のブラウザだけ以前の画像を表示している場合があります。

4.1 確認方法

  • ブラウザでハードリロードする
  • シークレットモード・プライベートブラウズで確認する
  • 別のブラウザで確認する
  • スマートフォンなど別の端末から確認する

WindowsのChromeなどでは、 

Ctrl + F5

で強制的な再読み込みを試すこともできます。

別端末では新しい画像が表示され、自分のPCだけ古い場合は、ブラウザキャッシュが原因である可能性が高くなります。

5 原因② Xserver側のキャッシュが残っている

Xserverには、Webサイトを高速化するための複数のキャッシュ機能があります。

代表的なものとして、

  • Xアクセラレータ
  • サーバーキャッシュ設定
  • ブラウザキャッシュ設定

があります。

5.1 Xアクセラレータとは？

Xアクセラレータでは、

  • CSS
  • JavaScript
  • JPEG
  • PNG
  • WebP
  • フォント

などの静的ファイルをサーバー側でキャッシュして高速に配信します。

通常のXserverでは、Xアクセラレータの静的ファイルキャッシュ保存期間は2分間です。

したがって、画像やCSSを同じURLのまま差し替えた直後は、少し待つことで新しい内容へ切り替わる場合があります。

5.2 Xアクセラレータを最初からOFFにする必要はない

画像やCSSが反映されないからといって、いきなりXアクセラレータをOFFにする必要はありません。

まず、

  1. 新しいファイルがサーバーに存在するか確認する
  2. ブラウザキャッシュを確認する
  3. 少し時間を置いて確認する
  4. 必要であればサーバーキャッシュを削除する

という順番で確認します。

6 Xserverのサーバーキャッシュを削除する

Xserverのサーバーパネルには、サーバーキャッシュを削除する機能があります。

画像やCSSを変更したあとに古い表示が残っている場合は、対象ドメインのサーバーキャッシュを削除して確認する方法があります。

ただし、キャッシュを削除したあとでも利用者のブラウザ側に古いファイルが残っている場合があります。

サーバーキャッシュ削除後は、ブラウザ側でも再読み込みして確認しましょう。

7 Xserverのブラウザキャッシュ設定にも注意

Xserverには、Xアクセラレータとは別にブラウザキャッシュ設定があります。

この機能では、Webサーバーからブラウザへ、

「この静的ファイルを一定期間保存して再利用してよい」

という指示を送ることができます。

CSS、JavaScript、画像などを長期間ブラウザへ保存する設定にしている場合、同じURLでファイルを差し替えると更新がすぐ反映されないことがあります。

この場合も、画像ならファイル名変更、CSS・JavaScriptならバージョン番号を変更する方法が有効です。

8 Xアクセラレータの設定画面例

Xserverを利用している場合は、サーバーパネルの高速化関連設定も確認してみましょう。

以下はXアクセラレータ設定画面の例です。

Xアクセラレータ（エックスサーバー）

通常は高速化機能をそのまま利用し、問題が発生したときだけ一時的に設定変更して原因を切り分ける方法がおすすめです。

9 原因③ ロリポップ！アクセラレータのキャッシュが残っている

ロリポップ！にも、ロリポップ！アクセラレータというキャッシュ機能があります。

WordPressなどのCMSでも利用でき、Webサイトの表示を高速化するためにキャッシュを利用します。

9.1 まずOFFではなく「キャッシュ削除」を試す

ロリポップ！アクセラレータには、管理画面からキャッシュを削除する機能があります。

画像やCSSを変更しても反映されない場合は、まず対象ドメインの、 

ロリポップ！アクセラレータ
↓
設定
↓
キャッシュ削除

を試します。

ロリポップ！公式では、設定変更やキャッシュ削除の反映には最大5分程度かかる場合があると案内されています。

そのため、キャッシュ削除直後に変化がなくても、少し時間を置いてから確認してください。

10 ロリポップ！アクセラレータの設定画面例

ロリポップ！では、ユーザー専用ページからロリポップ！アクセラレータを確認できます。

ロリポップ！アクセラレータ

通常はアクセラレータをOFFにして制作する必要はありません。

キャッシュ削除で解決しない場合に、一時的にOFFへ変更して原因を確認するとよいでしょう。

11 LiteSpeed Cacheを使っているロリポップ！では注意

ロリポップ！でWordPressプラグインのLiteSpeed Cacheを利用している場合は注意が必要です。

ロリポップ！公式では、LiteSpeed Cacheとロリポップ！アクセラレータは同時利用できないと案内されています。

どちらもキャッシュ機能を持つためです。

LiteSpeed Cacheを利用する場合は、ロリポップ！公式の案内に従ってアクセラレータの設定を確認してください。

12 原因④ CloudflareなどCDNに古いファイルが残っている

CloudflareなどのCDNを使用している場合、CDNのエッジサーバーにも画像・CSS・JavaScriptなどがキャッシュされます。

そのため、 

ブラウザキャッシュ削除済み
サーバー上のファイルも新しい

それでも古い画像が表示される

という場合は、CDNキャッシュも確認します。

12.1 Cloudflareでは対象URLだけPurgeする

Cloudflareでは、キャッシュされたファイルを削除するPurge機能があります。

1枚の画像だけ変更した場合は、すべてのキャッシュを削除するより、変更した画像URLだけを指定してPurgeする方法が適しています。

たとえば、 

https://example.com/images/logo.png

だけを削除します。

Cloudflare側のキャッシュから削除されると、次のアクセス時にオリジンサーバーから新しいファイルが取得されます。

13 原因⑤ WordPressが作った別サイズの画像が残っている

ここは、単純なキャッシュ問題と間違えやすいポイントです。

WordPressへ画像をアップロードすると、元画像だけでなく複数サイズの画像が自動生成されることがあります。

たとえば、 

photo.jpg
photo-150x150.jpg
photo-300x200.jpg
photo-768x512.jpg

のようなファイルです。

WordPressではテーマや画面サイズに応じて、これらの画像を srcset などから選んで表示することがあります。

13.1 FTPで元画像だけ上書きしても別サイズ画像は変わらない

たとえばFTPで、 

photo.jpg

だけを新しい画像へ上書きしたとしても、 

photo-300x200.jpg
photo-768x512.jpg

など、WordPressが以前生成した画像は自動的には新しくなりません。

その結果、

  • PCでは新しい画像が表示される
  • スマートフォンでは古い画像が表示される
  • あるページだけ古い画像になる

といった現象が起きることがあります。

13.2 この場合はキャッシュ削除だけでは直らない

サーバー上に古い縮小画像そのものが残っているため、キャッシュを全部削除しても古い画像が表示されます。

WordPressのメディア画像を大きく変更する場合は、新しいファイル名でメディアライブラリへアップロードし直す方法が最も分かりやすく安全です。

既存画像をそのまま置き換える必要がある場合は、必要に応じてWordPressのサムネイル・中間サイズも再生成する必要があります。

14 原因⑥ WordPressのページキャッシュに古い画像URLが残っている

画像そのものは新しくなっていても、WordPressのページキャッシュに古いHTMLが残っているケースもあります。

たとえば、 

旧画像
logo.png

新画像
logo-v2.png

へ変更したのに、ページキャッシュ内のHTMLにはまだ、 

<img src="/images/logo.png">

が残っている場合です。

この場合は、

  • WordPressキャッシュプラグイン
  • レンタルサーバーのページキャッシュ
  • CDNのHTMLキャッシュ

なども確認する必要があります。

15 CSS・JavaScriptはファイル名を毎回変更しなくてもよい

CSSやJavaScriptは、画像とは少し違う方法でキャッシュ対策できます。

WordPressのwp_enqueue_style() とwp_enqueue_script()にはバージョン番号を指定する機能があります。

たとえば、 

style.css?ver=1723612345

のようにURLへバージョン番号を付けます。

ファイル更新時にこの番号が変われば、ブラウザから見ると新しいURLになるため、新しいファイルを取得させやすくなります。

16 CSSをfilemtime()で自動更新する方法

自作の子テーマCSSなどで便利なのが、PHPの filemtime() をバージョン番号として利用する方法です。

たとえば、 

add_action( 'wp_enqueue_scripts', function() {

	$css_path = get_stylesheet_directory() . '/css/custom.css';
	$css_url  = get_stylesheet_directory_uri() . '/css/custom.css';

	$version = file_exists( $css_path )
		? filemtime( $css_path )
		: wp_get_theme()->get( 'Version' );

	wp_enqueue_style(
		'my-custom-style',
		$css_url,
		array(),
		$version
	);

} );

とします。

custom.css を更新するとファイルの更新日時が変わり、読み込まれるURLも、 

custom.css?ver=1723612345
↓
custom.css?ver=1723619876

のように変わります。

毎回手作業でバージョン番号を書き換える必要がありません。

17 JavaScriptもfilemtime()で更新できる

JavaScriptも同じ考え方で設定できます。 

add_action( 'wp_enqueue_scripts', function() {

	$js_path = get_stylesheet_directory() . '/js/custom.js';
	$js_url  = get_stylesheet_directory_uri() . '/js/custom.js';

	$version = file_exists( $js_path )
		? filemtime( $js_path )
		: wp_get_theme()->get( 'Version' );

	wp_enqueue_script(
		'my-custom-script',
		$js_url,
		array(),
		$version,
		true
	);

} );

これで custom.js を更新したときに、自動的に新しいバージョン番号が付与されます。

18 WordPressのバージョン番号をむやみに削除しない

古い高速化記事では、 

remove_query_arg( 'ver', $src );

などを使って、CSS・JavaScriptから ?ver= を削除するコードが紹介されていることがあります。

しかし、WordPressの wp_enqueue_style() やwp_enqueue_script() のバージョン引数は、キャッシュ更新にも利用するための正式な仕組みです。

そのため、理由なくすべての ?ver= を削除する必要はありません。

特に、 

style_loader_src
script_loader_src

へフィルターを付けてサイト内すべてのバージョン番号を強制的に削除すると、テーマやプラグインが意図して付けているバージョン番号まで消してしまいます。

自分で管理しているCSS・JavaScriptについて、wp_enqueue_style()・wp_enqueue_script() のバージョン引数を正しく使う方法がおすすめです。

19 画像にfilemtime()を使う必要はある？

HTMLへ直接書いている画像なら、 

logo.png?v=2

のようにクエリ文字列を変更する方法もあります。

ただし、WordPressのメディアライブラリで管理している画像では、サムネイル・中間サイズ・srcsetなども関係するため、単純にクエリ文字列だけ変更すればすべて解決するとは限りません。

画像を大きく差し替える場合は、新しいファイル名でアップロードする方法が分かりやすく確実です。

20 画像やCSSが反映されないときの確認順序

原因が分からない場合は、次の順番で確認すると切り分けやすくなります。

  1. サーバー上のファイルが本当に新しくなっているか確認する
  2. 画像URLを直接ブラウザで開いて確認する
  3. ブラウザをハードリロードする
  4. シークレットモードや別端末で確認する
  5. WordPressキャッシュプラグインを利用している場合はキャッシュを削除する
  6. レンタルサーバー側のキャッシュを確認する
  7. Cloudflareなどを使っている場合は対象URLをPurgeする
  8. WordPress画像なら別サイズ画像が残っていないか確認する
  9. CSS・JavaScriptならバージョン番号を確認する

一度にすべてのキャッシュを削除したり機能をOFFにしたりするより、
1つずつ確認した方が原因を特定しやすくなります。

21 画像だけ反映されない場合

画像だけが古い場合は、まず次を確認します。

  • 画像URLを直接開く
  • 別ブラウザ・別端末で確認する
  • CDNの画像キャッシュを確認する
  • WordPressの縮小画像・srcsetを確認する

それでも分からない場合は、
新しいファイル名で画像をアップロードしてURLを変更するのが確実です。

22 CSSだけ反映されない場合

CSSだけ変更が反映されない場合は、

  • CSSのURLを直接開いて内容を確認する
  • ブラウザキャッシュを削除する
  • サーバー・CDNキャッシュを確認する
  • ?ver= の値が更新されているか確認する

といった方法で確認します。

自作CSSなら、
filemtime()をwp_enqueue_style()のバージョンとして利用する方法
が便利です。

23 制作中だからアクセラレータを常時OFFにする必要はない

以前は、 

制作中
→ キャッシュ機能OFF

公開後
→ キャッシュ機能ON

という運用が紹介されることもありました。

しかし、常にOFFにする必要はありません。

制作中でも、

  • 画像は必要に応じてファイル名を変更する
  • CSS・JavaScriptはバージョン番号を更新する
  • 必要なときだけキャッシュ削除する
  • シークレットモードや開発者ツールを利用する

といった方法で確認できます。

高速化機能を通常は利用したまま、問題が発生したときだけ一時的にOFFにして原因を切り分ける方が実際の公開環境に近い状態で確認できます。

24 まとめ：画像とCSSではキャッシュ対策を分けて考える

WordPressで画像やCSSを差し替えても古い内容が表示される場合、原因は1つとは限りません。

  • ブラウザキャッシュ
  • レンタルサーバーのキャッシュ
  • WordPressキャッシュプラグイン
  • CloudflareなどのCDNキャッシュ
  • WordPressが生成した別サイズ画像
  • 古いHTMLページキャッシュ

などを順番に確認します。

画像については、新しいファイル名へ変更してURL自体を変える方法が最も分かりやすい対策です。

一方、自作CSS・JavaScriptでは、WordPressの wp_enqueue_style()・wp_enqueue_script() にfilemtime() を使ったバージョン番号を指定すると、更新時のキャッシュ対策を自動化できます。

また、Xアクセラレータやロリポップ！アクセラレータなどの高速化機能を、ファイル更新のたびに必ずOFFにする必要はありません。

まずキャッシュ削除やURL・バージョン変更を行い、それでも直らない場合に高速化機能を一時停止して原因を切り分けるという順番がおすすめです。

「反映されないからキャッシュ機能を全部OFFにする」のではなく、どの場所に古いデータが残っているのかを一つずつ確認することで、サイトの高速化を維持しながら安全に更新できます。

24.1 関連記事

この記事を読んだ人はこちらも読んでいます

カテゴリー
不具合解決
タグ
前の記事
グラデーション背景CSSサンプル集
2025年11月8日
次の記事
WordPressがメンテナンスから戻らない原因と対処
2025年11月13日