メディアライブラリでは余白を切り取れたのに、記事を見ると前の画像のまま。何度も保存し直す前に、メディアの画像と記事の画像を見比べてみましょう。
WordPressでは、画像の編集後も、挿入済みの記事に編集前の画像URLが残る場合があります。画像URLとは、画像ファイルの場所を示すアドレスです。メディアだけ変わったら、記事の画像を選び直すのが次の確認です。この記事では、変わっていない場所ごとに操作を分け、保存後の見た目とクリック先まで確かめます。
画面はWordPress 7.1.2のPC管理画面・標準画像ブロックで確認しています。バージョンやテーマによって、項目名や配置が異なる場合があります。
最初に、変わっていない場所を見分ける
対象の記事と画像を1つずつ決め、メディアライブラリの画像、記事内の画像、画像をクリックした先を比べます。次の表から、当てはまる確認へ進んでください。
| 症状 | 最初の確認 | 次の操作 |
|---|---|---|
| メディアでも前の画像 | 切り抜きの適用・保存 | メディアで保存を確認 |
| メディアだけ変わった | 記事が使っている画像 | 画像ブロックで選び直す |
| 記事は変わり、クリック先だけ古い | 画像のリンク先 | 指定URLを確認 |
| 編集画面は新しく、閲覧ページだけ古い | 投稿の保存・再読込 | 必要ならキャッシュを確認 |
この記事の切り抜き手順は、管理画面の「メディア」→「ライブラリ」から画像を編集した場合が対象です。記事内の画像ブロックの「切り抜き」は、別の「メディアを編集」画面を開きます。そこで編集した場合も、編集画面と記事の両方を保存してから表示を確かめてください。
画像の見た目だけを変えた場合は、操作が異なります。「ブロック」→「スタイル」→「サイズ」にあるアスペクト比は、横と縦の比率のことです。正方形などを選ぶと記事上の表示の形が変わり、元の画像ファイルは切り抜かれません。
画像ブロックの基本操作は、WordPress公式の「画像ブロック」（日本語）で確認できます。日本語版は旧画面の説明を含むため、最新の切り抜き機能や表示設定は、WordPress公式の「Image block」（英語・最新仕様）をご覧ください。
メディアでも変わらないときは、適用と保存を確認する
切り抜く範囲を選んだだけでは、画像の編集は完了していません。メディアライブラリから操作した場合は、次の順で確認します。
管理画面の「メディア」→「ライブラリ」で対象の画像を開き、「画像を編集」へ進みます。「切り抜き」を開き、画像の残したい部分をドラッグして選んだら、「切り抜きを適用」を押します。
範囲を選んだ後、「切り抜きを適用」で確定します。
切り抜いた結果を確認して、「編集を保存」を押します。画像が保存された通知が出るまで確認してください。「編集を保存」が押せない場合は、切り抜きの適用まで済んでいるか見直します。
切り抜きの適用と、編集結果の保存は別の操作です。
詳細画面を閉じて、同じ画像をもう一度開きます。構図と「サイズ」が変わっていれば、メディア側の保存は確認できています。記事にも意図した画像が表示されていれば、ここで確認を終えて構いません。記事だけ古い場合は、次の手順へ進みます。
メディアの編集方法と復元の基本は、WordPress公式の「メディアの編集」に説明があります。この記事のボタン名は、上の実画面に合わせています。
記事だけ変わらないときは、画像ブロックで選び直す
メディアでは切り抜けているのに、挿入済みの記事だけ前の画像が残る場合に行う手順です。画像ファイルの保存と、どの画像を使うかを確定する記事の保存を分けて確認します。
検証用の画像を1000×700から700×500に切り抜いたところ、メディアのファイルURLは変わりましたが、保存済み記事の画像URLは前のままでした。同じ画像を「置換」から選び直すと、記事の画像URLも編集後のものに変わりました。これは、この環境の標準画像ブロックで確認した例です。
記事編集画面で、変わっていない画像を選択します。画像のツールバーにある「置換」を押し、「メディアライブラリを開く」を選びます。
「置換」から、記事で使う画像を選び直せます。
メディアライブラリで、切り抜いた画像を選びます。似た画像が複数あるときは、プレビュー、ファイル名、サイズを見比べてから「選択」を押してください。メディアで正しく保存できているなら、この段階で画像を削除したり、再アップロードしたりする必要はありません。
右側の「ブロック」→「設定」タブを開き、「解像度」を確認します。これは使う画像ファイルのサイズを選ぶ項目です。「フルサイズ」は、選んだ画像の最大サイズを使う設定で、切り抜く前の画像へ戻す操作ではありません。まずフルサイズで切り抜き結果を確かめ、その後、表示する大きさに合う解像度を選びます。小さい画像を大きく表示すると、ぼやける場合があります。
歯車の「設定」タブに「解像度」があります。
あわせて「コンテンツ」タブの代替テキスト、画像下のキャプション、配置を確認します。元の説明を残す場合も、切り抜いた後の画像と意味が合っているかを見直してください。
切り抜きは反映されたのに画質が悪い場合は、画像がぼやけるときの確認手順で、元画像・解像度・表示幅を見比べます。
下書きなら「下書き保存」、公開済みの記事なら「保存」または「更新」を押します。保存完了後、編集画面を再読込してから、プレビューまたは記事ページを開き直します。意図した切り抜きになっていれば完了です。画像にリンクがある場合は、次のクリック先も確認します。
画像の名前だけで判断しにくいときは、「置換」に表示される「現在のメディアURL」と、メディア詳細の「ファイルのURL」を比べます。解像度によってファイル名にサイズが付くこともあるので、プレビューの構図と組み合わせて判断しましょう。
クリック先だけ古いときは、画像のリンクを確認する
記事の画像をクリックすると、切り抜く前の画像が開くことがあります。記事に表示する画像のURLと、クリックしたときに開くリンクのURLは、別々に確認する項目です。
切り抜いた画像ファイルを開かせたい場合は、「メディア」→「ライブラリ」で編集済み画像を開き、詳細画面の「ファイルのURL」をコピーします。記事編集画面に戻り、画像を選んでツールバーの「リンク」から指定先を開きます。古いURLをコピーしたURLへ置き換えて適用し、記事を保存してからクリック結果を確かめてください。リンク自体が不要なら解除します。
今回の検証では、メディアへのリンクも画像の選び直しで更新されました。ただし、それだけを完了の基準にせず、実際に開く先を確認すると取り違えを防げます。ページ内で画像が拡大する場合は、テーマや画像ブロックの拡大機能が使われている可能性もあります。
選び直しても変わらないときの確認先
編集画面は新しく、閲覧ページだけ古い場合
記事を保存し、開いていたプレビューをいったん閉じて、編集画面から新しく開きます。公開済みの記事では、別のブラウザーや端末でも比べてみてください。下書きはログインしているブラウザーで確認します。
それでも閲覧側だけ古ければ、キャッシュを確認します。キャッシュとは、表示を速くするために保存したデータを再利用する仕組みです。ブラウザーのほか、サーバーやCDNなどにも保存されるため、使っている仕組みの手順に沿って対象ページ・画像のキャッシュを確認します。
画像URLが編集前のままなら、先に画像の選び直しを確認します。キャッシュを消しても、記事が指定する画像URLは直りません。
一部のサイズや、特定の場所だけ違う場合
「設定」タブの「解像度」で「フルサイズ」は正しく、「中」などのサイズだけ違う場合は、その解像度で使われる画像を確認します。表示の形も変えている場合は、「スタイル」→「サイズ」→「アスペクト比」を「元のサイズ」にして構図を比べます。ここでの「元のサイズ」は画像本来の横縦比で表示する設定で、切り抜き前へ戻す意味ではありません。
本文の画像は直っているのに、アイキャッチ、記事一覧、ギャラリーだけ変わらない場合は、それぞれの画像指定やテーマの表示設定が確認先です。画像サイズの一括再生成、テーマ変更、プラグイン停止をまとめて行う前に、どの場所・サイズで違うかを絞り込みます。
相談が必要になったら、対象の記事、メディアのファイル名、変わらない場所、選んだ解像度、保存・選び直し後の結果を伝えると、確認してもらう範囲が明確になります。
他の記事への影響と、元に戻すときの疑問
同じ画像を使っている他の記事も変わりますか？
すべて同じように変わるとは限りません。今回の標準画像ブロックでは、挿入済みの記事に古いURLが残りました。一方、メディアの登録情報を使って画像を表示するテーマや機能もあるため、他の記事が変わらないと決めつけず、使用箇所を確認してください。
特定の記事だけ別の構図にしたいなら、その記事用に切り抜いたファイルを別途用意し、対象の記事で置換すると区別しやすくなります。使用中の元画像を削除する必要はありません。
切り抜く前の画像へ戻せますか？
メディアライブラリの画像編集で「元の画像を復元」が表示される場合は、開いて「画像を復元」を押します。今回の検証でも、元画像の復元に成功した後、記事側には編集後のURLが残っていました。戻したい記事で画像を選び直し、保存後の見た目とクリック先を確認してください。
画像ブロックの新しいメディアエディターでは、編集済みの画像を新しいファイルとして保存します。操作直後の「元に戻す」や、メディアライブラリに残っている編集前の画像を選ぶ方法で戻せます。どの画面で編集したかを確かめてから操作しましょう。
