【WordPress/Elementor】画像が急に表示されなくなった原因と対策【日本語ファイル名に注意】


【WordPress/Elementor】画像が急に表示されなくなった原因と対策【日本語ファイル名に注意】

WordPressやElementorでサイトを編集していると、「ちゃんと画像を入れたのに、表示されなくなる」「!マークの壊れた画像になる」という経験はありませんか?

今回は、私の実体験を元に、画像が突然見えなくなった原因と、その解決方法を紹介します。とくにファイル名に日本語を使っている方は要注意です。



発生した問題:Elementorで挿入した画像が壊れて見える

WordPressのElementorでロゴ画像を挿入し、公開ページでも正常に見えていたはずなのに、ある日突然、画像が「壊れたマーク」になって表示されなくなりました。

対象の画像URL:

原因:ファイル名に「日本語」が含まれていた

この不具合の原因は、ファイル名に日本語(全角文字)が含まれていたことでした。

✅ 日本語ファイル名が引き起こす問題

  • URLが自動でエンコードされて読みづらくなる(%E3%82%B5%E3%82%AF...
  • 一部のブラウザ・サーバー・CDNが正しく読み込めない
  • ElementorやOGP、SNSでのシェア時に画像が壊れて表示される

解決方法:英数字ファイル名で再アップロードするだけ

✅ 手順は簡単です:

  1. 画像ファイルの名前を「半角英数字+アンダーバー・ハイフン」だけにする
    例: sakutore_title_logo.png
  2. WordPressのメディアライブラリに再アップロード
  3. Elementor側で新しい画像を選び直す

これだけで、問題はすぐに解消しました。

同じトラブルを防ぐために:おすすめプラグイン

  • Media File Renamer
    → アップロード済みの画像の名前を英語に変換可能
  • Filename Sanitizer
    → 今後アップロードする画像のファイル名を自動で半角英数字に変換

おわりに

WordPress・Elementorでは、ちょっとしたことで画像が突然表示されなくなることがあります。特に「日本語ファイル名」は大きな落とし穴です。

もし同じような症状に悩まされたら、ぜひファイル名に日本語が含まれていないかをチェックしてみてください。

最後までお読みいただきありがとうございます。
よろしければブログやTwitterでのシェアをお願いしております。
コメントもお待ちしております。
誤植や勘違いなどございましたらコメント欄にて教えていただけると幸いです。

ITパスポート、基本情報技術者、応用情報技術者などIPAが提供する国家資格の過去問を学べるモバイルアプリをリリースしました。
詳しくは下記のプレスリリースをご覧ください。
https://prtimes.jp/main/html/rd/p/000000008.000073303.html

Youtubeチャンネル開設いたしました。
チャンネル登録者10,000人を目指しているので、良いと思った方はチャンネル登録をお願いしたいです。
https://www.youtube.com/channel/UC219XhmSRxmXltTy6COxSMw






elementor

Posted by ちこ