よこやま良平
WordPressで元画像はきれいなのに、記事一覧や関連記事のサムネイルだけがぼやける場合、
最初に確認するのは画質設定ではなく「実際に読み込まれた画像の横幅」と「画面上の表示幅」です。
小さく生成された画像をテーマやCSSが大きく引き伸ばすと、元画像を何度アップロードし直しても改善しません。
正解は、原因を確認して必要な画像サイズを決め、その後に既存画像のサムネイルを再生成する順番です。
20年以上ITエンジニアとしてWordPressの制作・保守・復旧に携わっている、よこやま良平です。画像のぼやけは、見た目だけでなく表示速度やテーマ設定も含めて切り分けることが重要です。
- 元画像とサムネイルのどちらがぼやけているか判断できる
- テーマの表示幅とWordPressの画像サイズの不一致を確認できる
- 既存画像を壊さずにサムネイルを再生成する順番が分かる
- 再生成後も直らない時にキャッシュやCDNを切り分けられる
この記事では、初心者でも迷わないように、確認、設定、バックアップ、再生成、表示検証の順で解説します。
いきなり画像を削除したり、すべてをフルサイズ表示へ変えたりせず、今の状態を記録してから進めてください。
こんなお悩みはありませんか？
- ある朝、サイトを開いたら真っ白画面になっていた
- 管理画面にログインできなくなって手が止まった
- 身に覚えのない記事やページが勝手に増えていた
- プラグインを更新したらサイト全体が崩れてしまった
- 以前バックアップを取ったか自分でも覚えていない
累計1,000件以上のWordPressトラブル対応の経験から、「壊れる前に備える」ためのチェックリストを1冊にまとめました。
ログイン・本体・バックアップ・サーバー・運用の5分野を、50項目で「危険度・確認方法・対処法」まで解説しています。
セキュリティプラグイン・WordPressの教科書も含めた3大特典を、
今なら無料で受け取れます。
WordPressでサムネイルだけぼやける時は表示画像の実寸を先に確認
結論から言うと、最初にブラウザが読み込んだ画像ファイルの寸法と、画面上で拡大された寸法を比べてください。
ここを見れば、再生成が必要なのか、CSSやテーマ側の指定を直すべきなのかを早い段階で分けられます。
元画像を直接開いて鮮明か確認する
メディアライブラリで対象画像を開き、添付ファイルのURLから元画像を新しいタブで表示します。
元画像までぼやけているなら、WordPressのサムネイル生成ではなく、アップロード前の画像品質や書き出し設定が原因です。
元画像が十分に鮮明なら、次に一覧画面で使われている画像URLを確認します。
ファイル名の末尾に幅と高さが付いていれば、WordPressが生成した中間サイズを表示している可能性が高い状態です。
読み込んだ幅より表示幅が大きくないか比べる
たとえば横幅300ピクセルの画像を、カード一覧で横幅600ピクセルまで拡大すれば、1ピクセル分の情報を広げるため輪郭が甘く見えます。
高解像度ディスプレイでは同じ表示幅でも多くの画素が必要になり、差がさらに目立ちます。
ブラウザの開発者ツールが使える場合は、画像要素の自然寸法と表示寸法を確認します。
難しければ、画像URLを開いて寸法を調べ、画面上のカード幅より十分大きいかを比較するだけでも判断できます。
原因を確認せず同じ画像をアップロードし直すと、添付ファイルが増えるだけで表示側は古い小サイズを使い続けることがあります。投稿本文やアイキャッチとの紐付けも変わるため、先にURLと寸法を記録してください。
画像が表示されない、URLが404になる、添付情報が壊れている場合は、ぼやけとは別の問題です。
その場合は先に、画像URLとメディア設定を確認する手順を使ってください。
WordPressのサムネイルがぼやける仕組みと主な原因
WordPressは画像をアップロードすると、元画像とは別に複数の中間サイズを生成します。
サムネイルだけがぼやけるのは、生成された小さい画像と実際の表示枠が合っていないケースが中心です。
アップロード時点の設定で中間サイズが作られる
「設定」から「メディア」を開くと、サムネイル、中サイズ、大サイズの基準を確認できます。
ただしテーマやプラグインは独自の画像サイズを追加できるため、この画面に表示される三種類だけとは限りません。
ここで大切なのは、設定を変更しても過去にアップロードした画像へ自動では反映されないことです。
新しい寸法は変更後のアップロードから使われるため、既存画像には後述する再生成が必要になります。
テーマ変更後に必要なサイズが存在しない
テーマを変更すると、記事カード、関連記事、プロフィール一覧などが要求する画像サイズも変わります。
旧テーマの時に登録した画像には新テーマ用の中間サイズがないため、近い小サイズを拡大してぼやけることがあります。
この場合は元画像を一枚ずつ入れ直すのではなく、新テーマが登録するサイズを確認してから既存画像を再生成します。
先に再生成してから設定を変えると、必要なサイズが作られず二度手間になるので順番に注意してください。
切り抜きと縦横比の違いで輪郭が甘く見える
サムネイルの「実寸法に切り抜く」が有効だと、元画像の中央付近を指定比率に合わせて切り出します。
被写体が小さい画像では切り抜いた範囲を大きく見せるため、同じ解像度でもぼやけた印象になりやすくなります。
一方、切り抜きを無効にすると縦横比を保って縮小するため、テーマ側の固定枠と形が合わない場合があります。
「鮮明さ」と「カードの形」を同時に整えるには、テーマの推奨比率に合わせた元画像を用意することが基本です。
アップロード自体が失敗する、HTTPエラーになる、上限を超えたと表示される場合は、サムネイルの表示品質より前の段階です。PHPやサーバーの容量制限を先に確認してください。
WordPressの画像サイズとテーマ設定の不一致を確認する
サムネイル再生成を始める前に、テーマがどのサイズを選び、どの幅で表示しているかを確認します。
必要な寸法が分からないまま画像を大量生成しても、テーマが別サイズを選べば見た目は変わりません。
問題が出る場所を一つに絞って比較する
トップページ、カテゴリー一覧、関連記事、本文内画像、OGP画像を同時に調べると原因が混ざります。
まず一番ぼやける場所を一つ選び、同じ画像が個別記事では鮮明か、一覧だけぼやけるかを比較してください。
一覧だけならカード用画像サイズ、本文だけなら画像ブロックの選択サイズ、全ページなら元画像や圧縮処理が候補です。
場所を限定すると、変更対象をテーマ、投稿本文、画像生成、CDNのどこに絞るか判断できます。
srcsetとsizesで実際に選ばれた画像を確認する
WordPressはレスポンシブ画像として、複数候補をsrcsetへ出力し、ブラウザが画面幅に合うものを選びます。
HTMLに大きな画像が含まれていても、sizes指定が実際のレイアウトより小さければ、小さい候補が選ばれる場合があります。
開発者ツールのネットワーク画面や画像要素のcurrentSrcを見れば、最終的に読み込まれたURLを確認できます。
テーマのCSS幅、画像の自然幅、currentSrcの幅を並べ、どこで不足したかを記録すると修正後の比較にも使えます。
高解像度画面では表示幅の約2倍を目安にする
カードが画面上で横幅400ピクセルでも、高解像度ディスプレイでは横幅800ピクセル程度の画像があると輪郭を保ちやすくなります。
ただし常に最大画像を配信すると転送量が増えるため、表示枠に応じた中間サイズとsrcsetを使う設計が必要です。
テーマの推奨アイキャッチ寸法がある場合は、その比率と幅を優先します。
独自テーマなら、カードの最大表示幅、余白、二列・三列表示、スマホ時の幅を確認して必要寸法を決めてください。
すべてをフルサイズにすると一時的に鮮明に見えても、一覧ページで大きな画像を何枚も読み込み、表示速度を落とします。必要な中間サイズを用意し、テーマが正しく選ぶ状態へ直すことが本来の解決です。
WordPressのサムネイルを安全に再生成する手順
必要な画像寸法を決めたら、バックアップを取り、少数画像で試してから全体を再生成します。
再生成は元画像から中間サイズを作り直す処理なので、元画像が残っていることと空き容量があることが前提です。
手順1：データベースとuploadsをバックアップする
データベースには添付ファイル情報や投稿との関連があり、uploadsには元画像と中間サイズがあります。
両方を同じ時点で保存し、復元方法まで確認してから作業を始めてください。
画像数が多いサイトでは、再生成によってファイル数と使用容量が増えます。
サーバーの空き容量、ファイル数上限、バックアップ先の容量も確認し、上限に近い場合は先に不要な複製の扱いを決めます。
手順2：必要なサイズを設定してテスト画像で確認する
メディア設定、テーマ設定、子テーマや専用プラグインの画像サイズ登録を先に整えます。
その後、新しいテスト画像を一枚アップロードし、必要な寸法のファイルが生成され、問題の表示場所で選ばれるか確認してください。
テスト画像で直らないなら、全体を再生成しても結果は変わりません。
テーマテンプレートがサイズ名を固定していないか、CSSが想定以上に拡大していないか、srcsetの候補が正しく出ているかへ戻ります。
手順3：少数の既存画像から再生成する
管理画面用プラグインを使う場合は、対象画像を選べる機能と、既存中間サイズを削除するか残すかを確認します。
最初は代表的な数枚だけを処理し、アイキャッチ、本文、一覧、関連記事の表示を比べてください。
SSHとWP-CLIを利用できる環境では、まず不足サイズだけを作る方法が安全です。
次の例は既存ファイルを一律削除せず、足りない中間サイズの生成を試す考え方です。
wp media regenerate --only-missing共有サーバーでは長時間処理が制限されるため、対象IDや件数を分けて実行します。
タイムアウトしても連打せず、完了した範囲、エラーログ、空き容量を確認してから続きへ進んでください。
手順4：全体処理後に古い画像を慎重に扱う
新しいサムネイルが正しく使われることを確認してから、不要になった古い中間サイズの整理を検討します。
古い投稿本文や外部サービスがファイルURLを直接参照している場合、先に削除すると画像切れが起きます。
- 表示URLと寸法を記録する
- データベースとuploadsをバックアップする
- 必要な画像サイズ設定を先に整える
- 新規画像と少数の既存画像で試す
- 全体再生成後にPC・スマホ・高解像度画面を確認する
WordPressのサムネイルぼやけを症状別に直す
同じ「ぼやける」でも、発生場所と時期によって直す対象は変わります。
再生成だけで終わらせず、新規画像だけ、既存画像だけ、特定画面だけという差を使って原因を絞ってください。
新しくアップロードした画像だけぼやける
最近変更した画像圧縮プラグイン、CDNの自動変換、テーマの画像サイズ登録、アップロード前の書き出し設定を確認します。
同じ元画像を別形式で保存し、圧縮機能を一時的に通さない検証環境で比較すると、劣化した工程を特定しやすくなります。
JPEGの品質を極端に下げる設定や、何度も保存し直した画像は、寸法が十分でも細部が失われます。
ただし本番サイトで圧縮機能を突然停止すると配信URLが変わることがあるため、設定変更前にステージングで確認してください。
古い画像だけぼやける
テーマ変更前にアップロードした画像だけなら、新しい画像サイズが存在しない可能性が高いです。
元画像が残っていることを確認し、現在のテーマ用サイズを登録した後に対象期間の画像を再生成します。
元画像自体が削除されている場合、中間サイズから大きな画像を作り直しても本来の細部は戻りません。
バックアップ、旧サーバー、制作時の素材から元画像を探し、見つからない場合は表示幅を下げるか画像を差し替えます。
トップや一覧だけぼやける
個別記事では鮮明で一覧だけぼやけるなら、カード用のサイズ名かテンプレートの指定を確認します。
テーマが「thumbnail」を固定で呼び出しながら、CSSで大きな横長カードへ広げていると、再生成しても小さい寸法のままです。
この場合は、必要な横長サイズをテーマへ登録し、テンプレートがそのサイズを選ぶように変更します。
親テーマを直接編集すると更新で消えるため、子テーマ、フック、テーマ設定など保守できる方法を選んでください。
管理画面では鮮明なのに公開画面だけぼやける
公開画面だけなら、ページキャッシュ、CDN、画像最適化サービスが古い小サイズを配信している可能性があります。
ログイン中とログアウト状態、URL末尾、レスポンスヘッダーを比較し、どの層が画像を返しているか確認します。
キャッシュ削除は、WordPress、キャッシュプラグイン、サーバー、CDN、ブラウザの順に対象を意識して行います。
全部を同時に消すと原因が分からなくなるため、一層ずつ削除して表示URLと画質が変わるかを記録してください。
WordPressのサムネイル再生成後に確認する項目
再生成の完了表示だけでは、ぼやけが直ったとは判断できません。
実際の公開ページで、正しい画像が選ばれ、表示速度とレイアウトを壊していないことまで確認して完了です。
PCとスマホでcurrentSrcと表示寸法を再確認する
PCでは横長カード、スマホでは一列表示など、同じ画像でも表示幅が変わります。
両方で読み込まれた画像URL、自然寸法、表示寸法を確認し、必要以上に大きすぎず、小さすぎない候補が選ばれているかを見ます。
高解像度画面では、通常画面より少し大きな候補が選ばれることも確認してください。
鮮明さだけを基準にせず、画像ファイル容量、ページ全体の読み込み、レイアウトのずれも合わせて評価します。
代表ページと過去記事を抜き取り確認する
トップページだけでなく、カテゴリー一覧、検索結果、関連記事、古い投稿、新しい投稿を数件ずつ確認します。
画像サイズ登録の時期が異なると、一部年代の画像だけ生成に失敗していることがあるためです。
処理ログに失敗IDが出た場合は、元画像の有無、ファイル権限、画像形式、メモリ不足を個別に調べます。
失敗分だけを再実行し、同じ全件処理を何度も繰り返さないようにしてください。
変更内容と戻し方を記録する
変更した画像サイズ、テーマ設定、使用したプラグインやコマンド、開始・終了時刻、失敗件数を残します。
問題が出た時に元へ戻せるよう、バックアップの場所と復元手順も同じ記録へまとめてください。
- 元画像ではなく適切な中間サイズが選ばれている
- 表示幅に対して十分な自然寸法がある
- PC・スマホ・高解像度画面で不自然なぼやけがない
- 画像容量とページ速度が悪化していない
- 代表ページと過去記事で画像切れがない
WordPressのサムネイルぼやけに関するよくある質問
画質改善と表示速度を同じ条件で比較する
修正前後の比較では、同じページ、同じ画面幅、同じログイン状態、同じキャッシュ条件をそろえます。
片方だけキャッシュ済み、片方だけ管理者表示という状態では、画像容量や読み込み時間を正しく比べられません。
画像URLの寸法が大きくなって鮮明さが改善しても、ファイル容量が何倍にも増えた場合は設定を見直します。
必要な表示幅より少し余裕のある中間サイズを用意し、圧縮率を下げすぎず、srcsetで端末に合う候補を配信してください。
ファーストビューのカード画像は体感速度に影響するため、画質だけでなく読み込み開始の順番も重要です。
遅延読み込みを使う場合でも、画面上部の主要画像まで遅らせていないか、レイアウトシフトが増えていないかを確認します。
今後のアップロードで同じ問題を防ぐ
運用ルールとして、アイキャッチの推奨比率、最低横幅、ファイル形式、書き出し品質を決めておくと再発を減らせます。
投稿者が複数いるサイトでは、メディア設定の数値だけでなく、アップロード前に用意する元画像の基準も共有してください。
テーマ変更、カードレイアウト変更、画像最適化プラグイン導入の時は、公開前に代表画像で確認します。
必要サイズの生成、srcset、PC・スマホ表示、容量、キャッシュ更新をチェック項目にすれば、公開後に全画像をやり直す事故を防げます。
再生成ログに画像編集ライブラリやメモリのエラーが出る場合は、寸法設定だけでは直りません。PHPの利用可能メモリ、GD・Imagickの対応形式、壊れた元画像、サーバーログを確認し、失敗原因を解消してから対象画像だけ再実行します。
変更後にアップロードする画像には反映されますが、既存画像には通常反映されません。テーマが必要とする寸法を確認し、テスト画像で正しく生成されることを確かめた後、既存画像のサムネイルを再生成してください。
通常の再生成は元画像から中間サイズを作り直す処理ですが、使用するツールの削除設定によって挙動は異なります。データベースとuploadsをバックアップし、少数画像で元画像・本文・アイキャッチが保たれることを確認してください。
鮮明に見える場合はありますが、一覧で大きな画像を何枚も配信すると表示速度が低下します。表示枠に十分な中間サイズを用意し、srcsetで画面幅に合う候補を選ばせる方が、画質と速度を両立できます。
テーマが選ぶサイズ名、CSSの表示幅、currentSrc、元画像の品質、キャッシュとCDNの順に確認します。新しい画像URLへ変わっていないならキャッシュ、変わっていて寸法が小さいならテーマやsrcsetの指定が主な候補です。
WordPressのサムネイルぼやけは確認してから再生成する
WordPressでサムネイルだけがぼやける時は、元画像、読み込み画像の自然寸法、画面上の表示寸法を最初に比べることが重要です。
小さい中間サイズの拡大、テーマ変更後のサイズ不足、切り抜き比率、srcset、キャッシュを順に切り分けてください。
設定を直した後は、新規画像、少数の既存画像、全体の順に再生成します。
バックアップ、空き容量、PC・スマホ表示、過去記事、画像URLまで確認すれば、画質と速度を両立した状態で完了できます。
WordPressの画像表示トラブルが自分で直せない時は
ワードプレスのWordPressエラートラブル解決をしたいなら
クイックレスキューが解決します。
・WordPressが真っ白画面
・WordPressがログインできない
・ホームページのマルウェアや乗っ取り
・サイトの表示くずれ
・エラーが表示されている
これらでお悩みなら最短30分ですぐに解決します！
いまなら期間限定で
・万一改善されない場合は全額返金保証で安心!
・30日間動作保証で安心!
・初期費・調査料 0円で安心!