「Blogger」Googleフォトの画像が正しく表示されない

Bloggerでダークモードの設定を実装してから、色々トラブルが続いてしまいまして、今度は画像が、正しく表示されないブラウザとデバイスが見つかり、表示できるように修正しました。

さて、どうして、画像が正しく表示されなかったのでしょうか。

実は、Googleフォトにある画像のアドレスをコピーして、直リンクをブログに貼り付けていました。この方法でも正しく表示できる場合もあるのですが、なぜか、一部は表示されず、何でだろうと困っていました。

アドレスが長すぎる

Googleフォトから画像のアドレスをコピーすると、凄くURLが長いんです。

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI0yIUVhM-2qWKG_Y4q9bY7OW-msNK9Ch4O-88hrzZj3-gYP2kLSbZxTXcdb_S4TarqzQpiyJW8hx3AGHSU3xoJ3dsbo-7_W87HqnVi0mT9E7N6o4gM2DeGK4qVGlIHlfgYDBMdwEbRCU/w1054-h527-no/?authuser=0

上のアドレスは、Bloggerのヘッダーに使用している画像のアドレスです。長すぎでしょ？

これは、悪さしていてもしょうがない気がします。

そんなわけで、どうにかして、正しく表示できるように、アドレスを変換してようと思ったわけです。

埋め込み用の画像アドレスに変換する

調べてみたら、以下の2つのサイトが埋め込み用の画像アドレスに変換してくれるようなので、試してみました。

• 【外部URL】https://www.labnol.org/embed/google/photos/
• 【外部URL】https://celtislab.net/photoembed-maker/

今回は、こちらのサイト「【外部URL】https://www.labnol.org/embed/google/photos/」で、画像アドレスを変換して、ブログに埋め込むことにしました。

使い方は非常に簡単で、Googleフォトにある埋め込みたい画像を選択し、表示させると上の方に、「共有」ボタンがあるのでクリックします。

共有をクリックすると、共有方法を選択できるので、「リンクを作成」をクリックします。

さらに、リンクを作成をクリックします。

アドレスが作成されるので、コピーします。

このアドレスは、この画像の場所へ飛ぶためのリンクなので、このアドレスをブログに貼り付けても表示されないので、注意してください。

コピーしたアドレスを、【外部URL】https://www.labnol.org/embed/google/photos/に移動して、下の方にスクロールすると、以下の画像のようなフォームが表示されます。

先ほどのアドレスを、「Google Photos Link here..」に貼り付けて、ロボットではないことを確認し、「GENERATE」をクリックします。

しばらくすると、画面が切り替わり、「画像リンク」と「埋め込み用コード」が出力されます。

あとは、この画像をブログに埋め込むなどすれば、画像が表示されるようになるので、一度試してみてください。

ちなみに、変換されたアドレスは、以下のように短くなっています。

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeyzekXJ2SAO0tvpDjLqyc-X8hyphenhyphenrPivmScwobCmV5pmbaXngKS9oHhPO6fwFipiHXe3HuipFYYNRy57gLvDvmQ6D0CxDLf_yQUaHXqhVKWdLXe7fc29lbZOLM5rWTsiaY7FhEbPFqxrmg/w2400/

＊最後尾にある「w2400」は幅のサイズを表しています。