Elementorで画像が表示されないときは、画像を何度も入れ直す前に、原因を切り分けることが大切です。多くの場合、ブラウザやキャッシュに残った古い情報、CSSの不整合、画像URLの問題、画像最適化機能の影響、ElementorのCSS未再生成などを順番に確認すると、原因を見つけやすくなります。
この記事では、岡山の中小企業のホームページ担当者でも確認しやすいように、作業の順番と注意点を説明します。管理画面を変更する前には、念のためバックアップを取っておきましょう。
まず確認したいこと
最初に、画像が表示されない範囲を確認します。1枚だけ表示されないのか、ページ内の画像がすべて消えているのか、サイト全体で見えないのかによって原因が変わります。
- 特定のページや特定の画像だけ表示されない
- 編集画面では見えるが、公開ページでは見えない
- パソコンでは見えるが、スマートフォンでは見えない
- すべての画像が、画像の代替テキストだけになっている
別のブラウザやスマートフォンでも確認すると、自分のブラウザだけの問題か、訪問者にも起きている問題かを判断できます。
1. キャッシュを削除する
最初に確認するのはキャッシュです。ブラウザ、WordPressのキャッシュプラグイン、レンタルサーバー、CDNなどに古いページ情報が残っていると、画像を修正しても表示が変わらないことがあります。
確認する順番
- ブラウザをシークレットウィンドウで開いて確認する
- キャッシュプラグインのキャッシュを削除する
- サーバー側のキャッシュ機能を削除する
- CDNを利用している場合は、対象ページのキャッシュを削除する
キャッシュ削除後は、ページを再読み込みして確認します。キーボードの強制再読み込みが有効な場合もありますが、操作方法はブラウザによって異なります。キャッシュ削除で直った場合は、画像そのものではなく、古い表示データが原因だった可能性があります。
2. CSSで画像が隠れていないか確認する
画像ファイルが存在していても、CSSの設定によって見えなくなることがあります。たとえば、表示を非表示にする設定、透明度をゼロにする設定、画像の高さをゼロにする設定、別の要素に覆われる設定などです。
Elementorの画像ウィジェットを選択し、「高度な設定」や「レスポンシブ」の項目を確認してください。パソコン、タブレット、スマートフォンごとに非表示設定が入っていないかを見ます。特に、スマートフォン用の表示を調整した際に、意図せず「モバイルでは非表示」になっていることがあります。
追加CSSやテーマ側のCSSを編集したことがある場合は、最近追加したコードも確認します。原因が分からないときは、追加したCSSを一時的に無効にし、画像が表示されるかを確認すると切り分けやすくなります。
3. 画像URLとファイルの状態を確認する
画像URLが正しくない場合も、Elementorで画像が表示されません。メディアライブラリから対象画像を開き、ファイルが存在するか、画像のURLが不自然に書き換わっていないかを確認します。
- 画像がメディアライブラリに残っているか
- 画像ファイルのURLを直接開いて表示できるか
- サイトのURL変更後に、古いドメインやhttpのURLが残っていないか
- ファイル名に全角文字や特殊な記号を使っていないか
- 画像ファイルの保存先でアクセスが拒否されていないか
サイトをhttpからhttpsへ変更した後に一部の画像だけ表示されない場合は、混在コンテンツが関係していることがあります。URLの一括置換は、誤操作するとリンクや本文まで変更する可能性があるため、バックアップを取ったうえで、管理会社や詳しい担当者に相談するのが安全です。
4. 画像の最適化機能を確認する
画像圧縮やWebP変換、遅延読み込みを行うプラグインが原因になる場合があります。最適化機能は表示速度の改善に役立ちますが、設定の組み合わせによっては、Elementorで使っている画像の読み込みを妨げることがあります。
最近、画像最適化プラグインを追加・更新した後に問題が起きたなら、まずその設定を確認します。遅延読み込み、WebP変換、画像の置き換え、JavaScriptの遅延実行などを一時的に停止し、キャッシュを削除して再確認します。
停止によって直った場合は、機能をすべて無効にしたままにせず、設定を一つずつ戻して原因を特定します。画像を軽くすることだけを優先せず、実際のスマートフォン表示で確認することが重要です。
5. ElementorのCSSとデータを再生成する
キャッシュ、CSS、URL、最適化を確認しても直らない場合は、ElementorのCSS再生成を試します。Elementorの管理画面にあるツールから、CSSやデータを再生成する項目を実行します。画面の名称はElementorや関連プラグインのバージョンによって異なる場合があります。
再生成後は、Elementorの編集画面だけでなく、公開ページを別ブラウザでも確認してください。必要に応じて、WordPressやサーバーのキャッシュも再度削除します。作業中に画面が崩れる場合は、バックアップから戻せる状態にしておくと安心です。
実際に画像を復旧した手順
株式会社みうらで対応したケースでは、Elementorの編集画面では画像が見えている一方、公開ページでは画像が空白になっていました。まずシークレットウィンドウで確認し、特定のブラウザだけの問題ではないことを確認しました。
次に、キャッシュプラグインとサーバーキャッシュを削除しましたが改善しなかったため、スマートフォン表示の設定を確認しました。該当画像にはモバイル表示を非表示にする設定が入っており、これを解除しても一部のページでは表示されませんでした。
そこで画像URLを確認したところ、サイトのhttps化前のURLが残っていました。URLを正しいものに修正し、画像最適化プラグインのキャッシュを削除した後、ElementorのCSSを再生成しました。最後にパソコンとスマートフォンの両方で確認し、画像が表示されることを確認できました。
このように、原因が一つとは限りません。作業した内容と結果をメモしながら、一項目ずつ確認することが復旧への近道です。
改善しない場合の相談先
WordPressやElementorでは、テーマ、プラグイン、サーバー設定が互いに影響します。CSSやURLをむやみに変更すると、別のページまで崩れる可能性があります。バックアップがない、管理画面に入れない、画像だけでなくレイアウトも崩れているといった場合は、専門家に相談してください。
WordPressの更新やホームページ全体の見直しについては、株式会社みうらのWordPress制作・サポートもご覧ください。岡山の事業者様で、Elementorの画像表示やホームページの不具合にお困りでしたら、現在の症状と行った作業をお知らせいただければ、原因の切り分けから一緒に確認します。