WordPressテーマ変更!SimplicityからCocoonへ
スポンサーリンク

ブログの画像が表示されない9つ+αの原因!リンク切れの対処法

ブログの画像が「壊れた絵」になって表示されるのは画像のURLが変わったのが原因なんですね。CSSやHTML(投稿画面のテキストモードやphpファイルなど)に書いてるパスと一致してないからそうなります。

画像のリンクを踏むと404NotFoundページ、そもそも画像が表示されない。考えられる原因と解決方法の紹介です。基本的なことから順にチェックしてくださいね。

404 Not Foundは、ステータスコードです。気になるかたは下記をどうぞ。

LINKヤバイ!初心者向けで凄い解るHTTPステータスコード301.403.404.500等の意味

画像が壊れて驚く女の子、鎖が切れた画像はリンク切れをいみしてます。

スポンサーリンク

ファイル名やパスが違って、URLが一致してないから画像が表示されない

画像もブログと同じでURLで表示されます。元々あった画像ファイルをサーバーなどで名前を変更すると、画像のURLが変わるのが原因だったり。

このばあい原因は根本的に同じで、画像のファイル名やURLがテンプレートに書いた記載(HTMLやCSS)と違ったり、元のディレクトリ(画像を格納してる場所)のパスが違うのが原因になってます。

その他、考えられる原因を、参考にしてください。

サーバーでファイル名を変えた!原因1

サーバーを借りて運営してると、直接サーバーのFTPに入って画像ファイル名を変更できますよねっ。ファイル名がURLになってる事をすっかり忘れて、名前を変えたから壊れた絵が表示するんです。

下記のちっちゃい画像がリンク切れをおこしたとき表示される「壊れた絵」。

リンク切れを起こしたときの画像

  • HTMLやCSSには元のファイル名「topA.gif」と書かれてるのに後に「topB.gif」に書き換えた
https://bibabosi-rizumu.com/wp-content/uploads/2016/02/topA.gif

https://bibabosi-rizumu.com/wp-content/uploads/2016/02/topB.gif

画像のURLは最後ファイル名になってますよねっ。『topA.gif』『topB.gif』URLの最後が違うから、表示できずに「リンク切れ」をおこしてしまったんですね。

実際画像をアップして見ればわかるのでご覧ください。「topA.gif」って画像をアップしました。

画像ファイル名を変える前

サーバーで画像『topA.gif』のファイル名を『topB.gif』に名前を変更して保存してみますね。

サーバーで画像ファイル名を変更

サーバーで画像ファイル名を変更保存(ロリポップ)

すると、リンク切れをおこして「壊れた画像」が表示します。

ファイル名を変更すると、画像が表示されない

ポイント

壊れた絵がでた原因の1つ

  1. 画像のURLは、ファイル名が使われる!http://~略~topA.gif
  2. 画像の名前を変えるとURLがわかる。http://~略~topB.gif
  3. URLが変わるとhttp://~略~topA.gifは存在しなくなって表示されない。

対処法:画像ファイル名とイメージソースを一致させる

  • 画像ファイル名を戻す

    画像名BにしたからAは表示されない

    サーバーで画像ファイル名を変更

    サーバーで画像ファイル名BをAに戻す

  • 新たに正しい画像ファイル名をセットしてアップしなおす、など。

画像ファイル名を日本語でアップしたとき。原因2

カスタマイズしようとしたとき、画像のファイル名を日本語にしてphpファイルに書き込んだは良いけど、実際アップした画像ファイル名は、日本語ではなくやけに長い名前に変わってるって事があります。

例えば「トップへ戻る.gif」を指定したフォルダ内にアップします。

ファイル名『トップへ戻る.gif』

『トップへ戻る.gif』をURLのファイル名はどうなるか?ロリポップでは下記のようなファイル名に変更されます。

62a06d16b0a8552a6e71d552538aa191.gif

それなのに、HTML(footer.phpなど)に指定したファイル名はどうなってるか?

phpにはトップに戻ると書かれてる。

『/images/トップへ戻る.gif』と指定してる!『トップへ戻る.gif』ファイルでアップしたけど、実際のファイル名は下記。

62a06d16b0a8552a6e71d552538aa191.gif

実際のファイル名と違った書き方をしてるときリンク切れをおこします。URLが違ってくるから画像が反映されないんですね。

%e6%97%a5%e6%9c%ac%e8%aa%9e%e3%83%95%e3%82%a1%e3%82%a4%e3%83%ab.png

上記みたいな表示になる場合もあるかも知れません。どちらにしてもローマ字でアップしなおしてHTMLとあわせてあげないとダメですねぇ。。

参考「トップに戻るボタンを画像に変更する方法」の目次「画像が表示されないっ、反映されない原因は?」

対処法:ファイル名を半角英数字にするか、HTMLに画像URLを挿入

  • 名前をローマ字にして該当フォルダ内へアップする

    FFFTPソフトでサーバーにアップする方法

    画像は参考例

  • HTMLの記載してる箇所に該当画像URLを記載する
    <img src=”ここに表示させたい画像URL” alt=”” />
ポイント

HTMLやCSSの背景のURLと画像の置き場のディレクトリをあわせてあげないと表示されません。。

拡張子が違ってる場合。pngじゃなく別の拡張子など。原因3

画像を保存するときの拡張子が違ってるときも上述と同様、URLが違ってきます。そうなると。実際の画像を収納してるフォルダ内の、画像名と拡張子をURLとして指定してるのに、拡張子が違えばURLも違ってくる。

https://bibabosi-rizumu.com/wp-content/themes/hoge/images/pagetop.png

https://bibabosi-rizumu.com/wp-content/themes/hoge/images/pagetop.jpg

『http://~~/pagetop.png』『http://~~/pagetop.jpg』当然のごとく画像は表示してくれません。。

対処法:HTMLとディレクトリの画像の拡張子をあわす

  • 『.png』『.jpg』『.gif』など正しい拡張子を知ってHTMLを書き直す
    /images/hoge.png → /images/hoge.jpg
  • HTMLに記載してる拡張子に変更する
    画像の拡張子をスクリーンプレッソなどを使って変更

ファイルまでのディレクトリ、フォルダ名(パス)が違うとき。原因4

画像をアップしたディレクトリ(画像の格納場所)のパスが違ってる場合に起こります。例えれば

  1. https://bibabosi-rizumu.com フォルダ内の
  2. wp-content フォルダ内の
  3. themes フォルダ内の
  4. gush テーマ フォルダの下層
  5. images フォルダ内に
  6. hoge.png 画像アップ

上記ディレクトリに画像「hoge.png」をアップしてるのに、HTMLやCSSには別の記載になってる

  1. themes フォルダ内の
  2. gush2-child テーマフォルダ内の
  3. images フォルダ内に
  4. hoge.png 画像がない
ディレクトリが間違ってるのにアップした例

ディレクトリが間違ってるのにアップした例

HTMLでは子テーマディレクトリimagesフォルダ内にhoge.pngを表示させる記載なのに、実際は親テーマ内フォルダの下層にアップしてたなどです。imgタグ内に関数を使ってる記載と合わなかった場合も画像は反映されません。

imgタグ内の”画像URL”にWordPress関数が入ってるとき

WordPressのコードを見てると画像タグ内のURLをいれるところに、関数が入ってる場合を目にします。<img src=”ここ画像のURL” alt=”代替テキスト” />そこに下記コードが入ってるんですね。

"<?php echo get_template_directory_uri(); ?>/images/hoge.png"

これは、親テーマの/imagesフォルダ内に/hoge.pngをアップしたら表示しますよぉって事で、子テーマ内にアップするならget_template_directoryの『template』が、『stylesheet』と書くんですね。

そうしたら子テーマのディレクトリの/imagesフォルダ内に/hoge.pngをアップしたら表示するからねっ♪ってなるんです。下記が子テーマを呼び出す記載「get stylesheet directory uri」ってなってますよね。

"<?php echo get_stylesheet_directory_uri(); ?>/images/pagetop.png"
子テーマ/images/pagetop.pngアップで表示

例えばテンプレート ディレクトリURIは、親テーマ内に画像をアップしないと表示されませんよぉ♪って言ってるのを知らずに子テーマのimagesフォルダに画像をアップしたらディレクトリが違ってるから表示されませんよっ♪って例です。

"<?php echo get_template_directory_uri(); ?>/images/hoge.png"
親テーマの/images/hoge.pngアップしたら表示
ディレクトリが間違ってるのにアップした例

親テーマのディレクトリ内にアップしないと表示されない。子テーマを呼び出す関数を書かないとダメってこと

対処法:ファイルまでのパスとHTMLをあわせる

  • パスどおりの場所へ画像をアップする

    FFFTPソフトでサーバーにアップする方法

    参考例

  • 逆に、HTMLの記載箇所にアップしてる画像のパスをいれてあげる。など
    <img src=”ここに表示させたい画像URL” alt=”” />

対処法は、あなたが何をやりたいかによって変わるけど、いち参考例としてヒントになればって思ってます。

imgタグ内の”画像URL”に関数が入ってる場合

"<?php echo get_template_directory_uri(); ?>/images/hoge.png"

下記リンクをさんこうにしてください。

参考「get template directory uri、get stylesheet directory uri」関数の違いは親テーマと子テーマのディレクトリ

画像を削除してしまっている。原因と対処法5

アップした画像を削除すると、リンク切れを起こして404ページを表示させてしまいます。画像のURLは、上述のとおりアップした画像ファイル名と拡張子と、ファイルまでのパスがはいってるんですね。

「https://bibabosi-rizumu.com/wp-content/uploads/2016/02/hoge.png」最後の「hoge.png」がファイル名になります。

e93c767bb3a5d652a5d3357f5ff54472.jpg

上記のような画像ファイルを削除してしまったら、表示させたくっても表示させるファイルがないからリンク切れをおこして404 Not Foundを表示させてしまったんですねっ。再度アップしなおして、画像を貼りなおせば表示されますよ。

対処法:リンク切れの画像を削除、必要であれば再度アップ

  1. リンク切れをおこした画像を、記事投稿画面より削除
  2. 必要であれば再度、画像をアップし表示させる

直リンクしてる可能性は!?原因6

他サイトの画像をコピーして自分のブログに貼り付けてることを直リンクといって、相手サーバーに付加がかかるため、画像が表示されないこともあります。

  • 直リンクはマナー違反だから、それを禁止する設定をする運営者もいる。
  • .htaccessで直リンクの画像を表示させない設定もある。

思いもよらずマナー違反をしてる可能性もあります。心当たりがあれば、改善してください。

LINK画像引用時の出典の書き方!直リンクは何でダメ?ブログのマナーの話

対処法:直リンク画像をブログにアップ

画像をいったんPCなどのローカルに保存してから、ご自身のブログへブログへアップしてくださいね。

ただし著作権の問題もあるので、それに違反して損害賠償ざたにならない範囲で。これが大前提ですよ。

LINK画像引用時の出典の書き方!直リンクは何でダメ?ブログのマナーの話

原因7・画像の転送モードが違うときの対処

サーバーを借りている場合、画像をFTPソフトなどでBINARY modeでアップしてますよね?アスキーモードでアップしてないか確認してください。

FileZillaの転送モード。画像をアスキーでアップしている画面

  • 転送モードを自動にしていると、バイナリモードでアップするから表示される
  • アスキーモード選択してアップすれば画像が表示されない画像が表示さらない

ブラウザの設定の可能性、原因8

設定より、プライバシー。Chrome設定

Google Chromeなどブラウザの設定で、すべての画像を表示しない設定にしてはないですか?この場合、すべての画像が表示されません。

  • すべての画像を表示するに変更後、完了して設定を保存しなおしてください。

エラードキュメントを指定・その他…考えられる原因9

サーバーを借りてWordPressなどで運営している場合、画像のパスをHTMLで指定し.htaccessで、ErrorDocument 503など指定している場合。

503はサーバーによるアクセス制限がかけられてる状態、またはメンテナンス中で制限している状態です。

同じドメイン・同じサブドメイン内の画像を表示できません。別の(サブ)ドメイン内で画像を置いて表示させる方法もあります。(既に負荷がかかっているので、重くなるからオススメしません。。)

LINKこんな簡単で良い?WordPreesで自作503ページ!離脱阻止できるページを作ちゃおう!

あとは、キャッシュを切ったり、cookieの削除などでしょうか。

LINK普段見てるページにエラー・不具合があったとき、試してほしいこと

表示されない画像(壊れた絵)のURLを確認する方法

上述通り表示されない(HTMLに書かれた)画像のパスは管理画面より該当のPHPファイルのHTMLをみたり、投稿画面のビジュアルではないテキストの方でHTMLを確認できます。

ブログのテキストエディタのimgタグ内HTML

表示されずに壊れた画像マークが表示されている場合、その画像を右クリックして別タブに表示するなどして画像のパスがあっているか確認してください。

HTMLに書かれた通りのパス・URLでなければ、画像は表示されません。

  1. 例:https化されたアドレスとhttpのアドレスの違い

HTMLに書かれた文字列https://domain.com/wp-content/uploads/2017/08/hoge.png
実際の画像のパスhttp://domain.com/wp-content/uploads/2017/08/hoge.png

  1. 例:ファイルのアップロード先の指定が違う

HTMLに書かれた文字列http://hoge-domain.com/wp-content/uploads/2017/08/hoge.png
実際の画像のパスhttp://domain.com/wp-content/uploads/hoge.png

さいごに

画像がリンク切れをおこして404 Not Foundのページを出す場合もあります。

WordPressで既存のテーマテンプレートで404ページを簡単に作って自ブログを紹介するチャンスでもあるのでカスタマイズしてみては いかがでしょうか♪

LINKWordPressで404エラーページをカスタマイズ!超簡単に工夫して作る方法

画像の入れ替え後はキャッシュが残っているので、実際どう表示されてるのか不明なとき、拡張機能でキャッシュのない状態を、すぐ作ることもできます。

LINK便利過ぎて神!カスタマイズ時のキャッシュを削除!ワンクリで手間省けるChrome拡張機能「Incognito This!」

カスタマイズの失敗をくり返すと、ブログ書くヒマなくなりますけど、たまには遊んでみてくださいねぇ^^

それでは、かうたっくでしたっ!

Comments

  1. elcl より:

    はじめまて、elclと申します。
    ワードプレスでブログを始めたばかりのド素人なんですが、
    画像が壊れてしまい、もう何日もさまよった末にこちらに
    たどり着きました。

    Cocoonのページでもお見かけしたことがあったので、
    もしかしたら助けていただけるんじゃないかと思い、
    コメントさせていただいてます。

    おそらく私が何度も画像を差し替えたことが原因だと思うんですが、
    画像がおかしくなるまでに行った作業を覚えている限り記載します。

    ・ファイル名が日本語だったのでローマ字に変えてすべて差し替えた。
    ・画像の容量が大きすぎることに気付き、圧縮してまたすべて差し替えた。

    この辺で画像が壊れていることに気付く

    ・画像の設定が「年月ベース」ではマズイことを知りまた半分くらい
     差し替えた。
    ・半分くらい差し替えはしたが、状況が好転していないようなので中断。

    今↑ここです。1週間以上調べまくってますが、知識がなさ過ぎて
    お手上げの状況です。対処法も読ませていただいたんですが、改善
    できませんでした。

    以下の内容も重要なことかもしれないのでお伝えします。
    画像は、
     ・壊れていたり壊れていなかったりする。
     ・リロードすると100%表示される。
     ・数時間するとまた壊れる。
     ・同時期に入れたプラグインは以下です。
       ・EWWW Image Optimizer
       ・UpdraftPlus – Backup/Restore
       ・Optimize Database after Deleting Revisions

    以上、お手すきのときにアドバイスをいただきたく、
    コメントさせていただきました。よろしくお願いいたします。

    elcl

  2. かうたっく かうたっく より:

    elclさんに

    こんにちは。

    サーバーに画像を置いている場所(画像のパス)と、管理画面のHTMLと言うので指定された『画像のURL』を一致すればキチンと表示されます。いくつか不明な点はあるのですが、以下をチェックしていただけますか?

    ・ファイル名が日本語だったのでローマ字に変えてすべて差し替えた。
    ・画像の容量が大きすぎることに気付き、圧縮してまたすべて差し替えた。

    差し替えた方法ですが、管理画面の投稿エディタ上で画像を追加して、元画像と差し替えましたか?※このばあい元の画像ファイルを削除したわけではない。

    それともFTPソフトで元の画像を削除して同じディレクトリ(フォルダ内)にアップロードしましたか?解決しなかった場合、状況を把握するために書き込みくださいね。また実際不具合が出ているリンクがあれば状況を確認しやすいとも思います。

    この辺で画像が壊れていることに気付く

    • HTMLにある画像のパスが変更されていない可能性はチェックされましたか?

    HTML:画像のパス、確認方法

    管理画面の投稿ページの画像をクリックして、エディタ上部にあるビジュアルではなく『テキスト』タブをクリックし切り替えるとHTMLが確認できます。例をあげますね。

    • サーバー上に画像を置いている場所:FTPソフトで言えば、/domain.com(/public_html)/wp-content/uploads/2018/08フォルダ内にあるfile-name.pngの場合

    画像のパスを以下のようにしていればキチンと表示されます。

    <img src="https://domain.com/wp-content/uploads/2018/08/file-name.png" alt="" width="" height="">

    • サーバー上のパス:/domain.com(/public_html)/wp-content/themes/cocoon-child-master/images/hoge.jpgの場合

    画像のパスは赤字の部分ならhtmlは以下で正常に表示します。※色々コードをはしょってますが

    <img src="https://domain.com/wp-content/themes/cocoon-child-master/images/hoge.jpg" alt="" width="" height="">

    画像のURL(赤字部分)とFTP上のパスがあっているか、確認してください。

    画像は、
    ・壊れていたり壊れていなかったりする。
    ・リロードすると100%表示される。
    ・数時間するとまた壊れる。

    上記説明の画像のURLがあっていなければ、壊れた画像マークが表示されます。でもリロードで表示、時間経過で再度壊れるのは変ですね。

    • キャッシュがない状態で確認したら表示されているのに、キャッシュで元に戻ったかのよう
    • または自動的に(以前の状態に)復元されてしまったかのよう

    この状態が謎すぎます。

    自動的にバックアップをとるプラグインではなく、自動で復元するプラグインなんていれてませんよね??※あるのかすら不明ですが、ないと思う前提です。

    何かキャッシュ系か高速化系のプラグインが入ってませんか?入っている場合は設定からキャッシュをクリアにしてチェックしてください。

    あとエックスサーバーでしたら、mod_pagespeed設定をOFFにしてみるなど。

    [caption id="attachment_17827" align="aligncenter" width="756"] エックスサーバー:mod_pagespeed設定:画像の中段:右側[/caption]

    実際の状況がイロイロ不明ですが、これらをご確認ください。キチンと画像が表示されますように…❦

個人情報の取り扱いについてはリンク先をご確認ください。

ご了承・ご理解いただいた上でコメントお待ちしております?

トップへ戻る
タイトルとURLをコピーしました