【解決】IEで画像が表示されないバツ印はBlogger記事のURLが原因だった

カスタマイズ

ブログの画像が、サムネイル以外見れない!って、フォロワーさんから教えていただきました。

問題の症状は、Blogger で書いたブログ記事の画像に、すべてバツマークがついて見れなくなっていたことでした。解決方法は、画像の URL を書き換えるだけなので、簡単でした。

というわけで今回は、Bloggerのブログの画像が、サムネイル以外見れなくなった場合の解決方法をシェアします。

サウンドオルビス
HTmusicM( @harys14474464 )さん、情報提供ありがとう!

症状:Blogger記事の画像が、バツ印で表示になる

Mac 環境では、しっかり見れるんですよ。Safari・Google chrome 共にOKでした。iPhone でも、Android 端末でも。

どうして見れないのだろう?と Windows PC を起動してブラウザで見てみると… …

Iedehyouzisarenaigazou

たしかに画像が、見れませんでした。画像には、バツ印がついています。原因はなんでしょうか?

原因:Microsoft EdgeとInternet Explorer

Microsoftedgeexplorer

見れない原因は、Microsoft EdgeとInternet Explorer だったようです。普段 Windows PC でも Google Chrome を使っていたので、気づきませんでした。

さらに原因を検証すると、画像の URL が問題だったようです。私の環境で MarsEdit4 から、Blogger に画像をアップロードしていました。

そうすると、Microsoft EdgeとInternet Explorer で、画像を表示できない URL になってしまうみたいです。

スポンサーリンク


解決策:画像の URL を書き換える

それでは、Microsoft EdgeとInternet Explorer で、Blogger の画像を表示させる方法を解説します。

まずは画像の先頭部分リンクを書き換えてください。例えば… …

<img src="https:/lh3.googleusercontent.com/-lmkFJdGxCV0/WsgV8EhQ21I/AAAAAAAAaXw/VrxxX7zDR2Y21WMyhnpZkUIC-U-kIwMKQCHMYCw/s0/%255BUNSET%255D" />

こちらのコードだと、Microsoft EdgeとInternet Explorer で画像を表示させることができません。赤文字の部分が、ネックになっております。

コレを↓下のように書き換えてください。

<img src="https://4.bp.blogspot.com/-lmkFJdGxCV0/WsgV8EhQ21I/AAAAAAAAaXw/VrxxX7zDR2Y21WMyhnpZkUIC-U-kIwMKQCHMYCw/s0/%255BUNSET%255D" />

Microsoft EdgeとInternet Explorer で、Blogger の画像を表示できる URL は、こちらです。つまり、解決策は… …

https:/lh3.googleusercontent.com → https://4.bp.blogspot.com

といった感じで、書き換えてあげれば表示できるようになります。

意図的に残した https:/lh3.googleusercontent.com の部分は、やはり読み込めずバツ印になるようですね。その後修正して、表示させることができるようになりました。

Microsoft と Google サービスの相性かな?

Google フォトと外部サービスの連携に相性問題があるのかな? Chrome で表示できて Microsoft Edge などでバツ印になるって考えると、いろいろ詮索しちゃうよね。汗

みな仲良く手を組んで、ユーザビリティを高めていったほうがより高みに行ける気がするのだけれど… …こういうのは思想の問題かもしれないから、なんとも言えませんね。

いずれにせよ解決策は書き換えるだけなので、MarsEdit4 などテキストエディットソフトを使うなら検索&置換でサクッと対応しちゃいましょう。

そんなわけで、情報提供ありがとうございました!また不具合がありましたら、Twitterや下記のメッセージからご連絡くださいな。

記事へのお問い合わせ

サウンドオルビス

1,090,985 views

あなたの問題を解決するために、情報発信をしています。悩みからの解放宣言。「音楽」「テクノロジー」が得意分野です。

プロフィール
  1. この記事へのコメントはありません。

ABOUT

「サウンド」「テクノロジー」をキーワードに、最新情報・商品レビュー・ハウツー講座・噂・小技など、個人で稼ぎたいクリエイターが役立つ情報を集めたメディアです。
Soundtech-Labo とは?

NEW POSTS