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

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

画像のリンクを踏むと404NotFoundページになったのは画像を間違って削除してリンク切れを起こしてるとかURLが違って表示できないなど色んな場合がありえます。

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

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

「何で画像が表示されないの?」「しまったぁ、、やっちゃったよぉw」って経験をたくさんしてしまったんでその原因と、解決方法をザッっとあげてみました。

ブログ運営者さんが「表示されない画像を表示できたよぉ!」ってなったら私、喜んじゃいますよぉー!さぁーてではでは、みてみましょう♪

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

スポンサーリンク

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

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

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

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

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

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

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

  • HTMLやCSSには元のファイル名「topA.gif」と書かれてるのに後に「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のファイル名はどうなるか?ロリポップでは下記のようなファイル名に変更されます。

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

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

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

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

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

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

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

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

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

    画像は参考例

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    参考例

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

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

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

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

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

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

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

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

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

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

  • リンクきれを起こした画像を記事投稿画面より削除する
  • 必要であれば再度、画像をアップしなおして表示させる

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

他のブログやサイトの画像をコピーして自分のブログに貼り付けてることを直リンクといって相手サーバーに付加がかかって画像が表示されなかったりすることもあります。直リンクはマナー違反でそれを禁止する設定をされてる運営者もいるほどなんですね。

どうでしょうか?思いもよらずマナー違反をしてしまってる可能性もありますけど、迷惑がかかってしまうんですねっ。心当たりがあれば、改善してみてくださいね♪

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

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

画像をブログで使うとき、元サイト画像をコピペして自ブログに貼り付けてる場合画像が表示されないことがあります。コピーされたブログ運営者さんが.htaccessで直リンクを禁止してる場合も表示されません。

下記を参考に直リンクをやめて「画像をいったん保存」して再度「ブログへアップ」してくださいね。

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

さいごに

上述したことは私が「なんやこれっ・・何が起こった!?」これってDo You Koto ?ってなったことばかりです。トップに戻るボタンを画像に変更する方法はサイズの実験と、失敗談込みこみで書いてるページですw

画像がリンク切れをおこして404NotFoundのページを出す場合もあるんですよね。WordPressで既存のテーマテンプレートで404ページを簡単に作って自ブログを紹介する方法もあるんで、カスタマイズチャレンジしてみてはいかがでしょうか♪

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

画像の入れ替えなど行ったあとは、キャッシュが残ってるのでうまく表示されてるのかわからないってときもありますよね。そんなときはキャッシュを削除やってみてください♪

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

カスタマイズの失敗をくり返すとブログ書くヒマなくなっちゃうけどw たまには遊んでみてくださいねぇ♪かうたっくでしたっ!

書いた人:かうたっく

何も知らない初心者ですが、WordPressでブログを始めました。 ブログの技術系でつまずいたエラーを経験したことからエラー関連を、初心者が初心者に向けて分かりやすい言葉で書いてます★子どもの喘息様気管支炎や、幼い子どもとの生活ページなどよく読まれる雑多ブログを運営中^^♪ご意見、感想、質問はお問い合せよりお待ちしています。

Twitterフォロー