A&iサービス 
「画像URLを直接開くと正常に表示されるのに、WordPressのページ内だけ画像が表示されない…」
このような症状で困っていませんか？
先日、WordPressで制作していたページで、少し不思議な画像トラブルが起きました。
画像URLを直接ブラウザで開くと、画像は問題なく表示されます。
ところが、WordPressのページ内では、その画像だけが表示されません。
最初は、画像リンク切れやキャッシュ、サーバー側の問題を疑いました。
しかし、画像URLは正常に開けます。WordPressの管理画面でも画像は確認できます。さらに、HTMLを見てもimgタグはきちんと出力されていました。
つまり、画像ファイル自体は存在しているのに、ページ上では見えない状態だったのです。
調べていくと、最終的な原因は画像ファイルではなく、CSSによる表示の問題でした。
この記事では、実際に私が遭遇した症状をもとに、どのように原因を切り分けたのか、なぜCSSで画像が見えなくなっていたのか、そして最終的にどのCSSで解決したのかを紹介します。
すぐ直したい場合はまずこのCSSを試してください
今回のケースでは、以下のCSSで解決しました。
.wp-block-image img {
width: 100%;
height: auto;
display: block;
}このCSSを追加したところ、ページ内で表示されなかった画像が正常表示されるようになりました。
ただし、WordPressで画像が表示されない原因は一つではありません。
画像URLの間違い、キャッシュ、LazyLoad、プラグインの影響など、別の原因で起きている場合もあります。
そのため、同じような症状が起きた場合は、いきなりCSSだけを修正するのではなく、順番に原因を切り分けることが大切です。
WordPressで画像URLは開けるのに画像が表示されない症状
今回発生した症状は、一般的な「画像リンク切れ」とは少し違いました。
先日、WordPressで制作していたページで、少し不思議な画像トラブルが起きました。
画像URLを直接ブラウザで開くと、画像は問題なく表示されます。ところが、WordPressのページ内では、その画像だけが表示されません。
最初は、画像リンク切れやキャッシュ、サーバー側の問題を疑いました。しかし、画像URLは正常に開けます。WordPressの管理画面でも画像は確認できます。さらに、HTMLを見てもimgタグはきちんと出力されていました。
つまり、画像ファイル自体は存在しているのに、ページ上では見えない状態だったのです。
調べていくと、最終的な原因は画像ファイルではなく、CSSによる表示の問題でした。
この記事では、実際に私が遭遇した症状をもとに、どのように原因を切り分けたのか、なぜCSSで画像が見えなくなっていたのか、そして最終的にどのCSSで解決したのかを紹介します。
WordPressで画像が表示されない時の切り分け手順
今回、実際に行った確認手順を紹介します。
① 画像URLを直接開く
ただし、WordPressで画像が表示されない原因は一つではありません。
画像URLの間違い、キャッシュ、LazyLoad、プラグインの影響など、別の原因で起きている場合もあります。
そのため、同じような症状が起きた場合は、いきなりCSSだけを修正するのではなく、順番に原因を切り分けることが大切です。
② imgタグが存在するか確認する
次にChromeのDevTools（開発者ツール）でHTMLを確認しました。
<img src="画像URL">imgタグが存在しているということは、WordPress側は画像をページに表示しようとしている状態です。もしimgタグ自体が出力されていなければ、テンプレートやブロックの出力、PHP側の問題を疑う必要があります。
しかし今回は、imgタグは存在していました。
つまり、WordPress側の画像出力そのものは動いている。それでも画面上では画像が見えていない。この時点で、原因はHTMLではなく、CSSやレイアウト側にある可能性が高くなりました。
③ キャッシュや LazyLoad（遅延読み込み）を疑う
WordPressで画像が表示されない場合、キャッシュの影響もよくあります。
たとえば、LiteSpeed Cache、WP Rocket、Autoptimizeなどのキャッシュ系プラグインを使っていると、CSSの圧縮や結合、遅延読み込みの影響で表示が崩れることがあります。
そのため、ブラウザキャッシュの削除、WordPress側のキャッシュ削除、CSS最適化の停止なども確認しました。
また、LazyLoad、つまり画像の遅延読み込みも疑いました。
最近のWordPressテーマやプラグインでは、ページ表示速度を上げるために、画像を後から読み込む仕組みが使われていることがあります。
ただ、今回のケースでは画像URLは正常で、imgタグも出力されていました。キャッシュを削除しても状況は変わりませんでした。そのため、キャッシュやLazyLoadだけが原因とは考えにくい状態でした。
④ DevToolsでCSSを確認する
ここで、「CSSによる描画問題では？」という可能性が高くなりました。
DevToolsでCSSを確認したところ、以下の指定が入っていました。
.wp-block-image img {
width: fit-content;
}
WordPressで画像が表示されない原因はCSSだった
今回の原因は、以下のCSSでした。
.wp-block-image img {
width: fit-content;
}一見すると問題なさそうに見えます。
fit-content は、内容に合わせて幅を調整する指定です。通常であれば便利なCSSですが、レイアウトの状態によっては、ブラウザが画像の幅をうまく計算できないことがあります。
今回のケースでは、この width: fit-content; が原因で、画像の表示幅が正しく確保されていませんでした。つまり、画像が読み込まれていないのではなく、CSSによって画像の表示領域がなくなっていた状態です。
なぜ width: fit-content; で画像が消えるのか
最近のWordPressテーマでは、flexレイアウトが多く使われています。
display:flex;特に、Snow MonkeyやSWELL、Blocksyなどのブロックエディタ対応テーマでは、カラムや画像ブロック、レスポンシブ調整のために display:flex; が使われることがあります。
flexレイアウトの中で画像に width: fit-content; が指定されると、環境によってはブラウザが画像の幅を正しく計算できない場合があります。
その結果、画像の幅が0に近い状態になったり、表示領域がなくなったりします。
この状態になると、HTML上にはimgタグがあります。
画像URLも正常です。
しかし、画面上では画像が見えません。
今回まさに、この状態でした。
「画像は存在しているのに見えない」という不思議な症状の正体は、CSSによる幅の計算ミスだったのです。
実際に直ったCSS
最終的に、以下のCSSを追加することで画像が表示されるようになりました。
.wp-block-image img {
width: 100%;
height: auto;
display: block;
}このCSSでは、画像の幅を親要素に合わせて明示的に指定しています。
width: 100%; を入れることで、ブラウザが画像幅を曖昧に計算する状態を避けられます。
height: auto; は、画像の縦横比を維持するための指定です。画像の幅だけが変わっても、高さが自動調整されるため、画像が縦に伸びたり潰れたりしにくくなります。
また、display: block; を指定することで、imgタグをブロック要素として扱えるようになります。
imgタグは通常inline要素として扱われるため、余白や高さの計算で意図しないズレが起きることがあります。block化することで、表示が安定しやすくなります。
WordPressで画像が表示されない時にDevToolsで確認すべきポイント
今回のように、画像URLは正常でimgタグも存在しているのに画像が表示されない場合は、DevToolsでCSSを確認することが重要です。
特に、以下の指定が入っていないか確認すると原因を見つけやすくなります。
display:none;
要素そのものを非表示にする指定です。これが画像や親要素に入っていると、画像は画面上に表示されません。
width:0; または height:0;
画像の幅や高さが0になっている状態です。今回のように、幅の計算がうまくいかず、結果的に画像が見えなくなるケースがあります。
opacity:0;
画像は存在しているものの、透明になっている状態です。HTML上には存在していても、画面上では見えません。
visibility:hidden;
要素のスペースを残したまま非表示にする指定です。画像の表示領域はあるのに画像だけ見えない場合は、この指定も確認した方が良いです。
overflow:hidden;
親要素に overflow:hidden; が指定されていると、画像の一部、または全体が切れて見えなくなることがあります。
z-index
別の要素が画像の上に重なっている場合、画像が裏側に隠れて見えないことがあります。画像そのものに問題がない場合でも、重なり順によって見えなくなることがあります。
Snow Monkeyなどのブロック系テーマで起きやすい理由
今回の症状は、特定のテーマだけが原因というより、最近のWordPressテーマ全般で起こり得るものだと感じました。
最近のテーマは、Gutenberg、つまりブロックエディタに対応するために、flexレイアウトやレスポンシブ制御、動的なCSSを多く使っています。
そのため、以下のような指定が複雑に絡むことがあります。
width: auto;
width: fit-content;
display: flex;
overflow: hidden;このような条件が重なると、画像URLは正常でimgタグもあるのに、ページ上では画像が表示されないという現象が起こることがあります。
ただし、すぐに「テーマのせい」と決めつけるのは避けた方が良いです。
まずは、画像URLが正常か、imgタグが存在するか、CSSで非表示になっていないか、widthやheightが0になっていないかを順番に確認することが大切です。
まとめ
今回のように、画像URLは正常で、imgタグも存在していて、404エラーでもないのに画像が表示されない場合、原因はCSSによる描画不具合である可能性があります。画像ファイル自体には問題がなくても、CSSの指定によって画像の表示幅がなくなり、画面上では見えなくなることがあります。
今回のケースでは、以下のCSSを追加することで解決しました。
.wp-block-image img {
width: 100%;
height: auto;
display: block;
}画像URLが正常だからといって、必ずしもページ上で正しく表示されるとは限りません。同じような症状が起きた場合は、画像ファイルだけでなく、DevToolsでCSSの状態まで確認してみてください。原因を順番に切り分けることで、今回のように「画像はあるのに表示されない」というトラブルも解決しやすくなります。
