アメブロ画像を直接ホームページに貼り付けても、画像が表示されない時の対処法

この記事は、2016年12月12日に SSLに関する部分を追記しました。

アメブロから、画像を直接コピーして、自分のホームページに貼り付けているサロンは、少なくないようです。

ただ、多くの場合、いつまにかその画像が表示されなくなっていることに気づくはずです。

 

あるいは、その画像を見れていたのが、実は自分だけだったということに。


つまり、サロンのホームページに、アメブロの画像を読み込んでいる場合は、

お客様にはエラーとして見られている場合があるのです。

 

すでに、何度も出ているお話なので、いまさら感があるかもですが、

今でもほぼ毎週のように見かけるので、改めて記事にしておきます。

 

アメブロの画像を、直接ホームページに貼り付けた場合

例えば、こちらのテストのアメブロ記事。

http://ameblo.jp/healing-solutions/entry-12212657266.html

中身はこんな感じです。

 

ここに入っている画像を、直接リンクで自分のホームページ内に貼り付けてみます。

この下の画像は、

http://stat.ameba.jp/user_images/20161024/06/healing-solutions/f1/92/j/o4032302413780510153.jpg

という、アメブロのサーバーから直接埋め込んでいるものになります。

画像が天地逆なのは、気にしないでください(笑

 

↑ 見えていますか?

おそらく、見えていると思います。

見えていない場合は、「アメブロからの画像直リンクはやめましょうね」というところで、

この記事の主旨は伝わるので、読み終えていただいて問題ありません。

 

ただ、

見えている場合と、見えていない場合があったので、

検証して具体的に、どういう対応をすればアメブロの画像を直接読み込めるのか、調べてみました。

 

貼り付けたアメブロの画像が表示されない場合

サロンのホームページでは、このパターンが多いと思うのですが、

アメブロの画像をそのまま直リンクすると、基本的には表示エラーになります。

 

その原因は、SSL通信かどうかという部分でした。

SSL通信とは
セキュリティ対策をした、暗号化された通信のこと

 

例えば、以下のGIFアニメは、SSL通信ではない場合のサンプルです。

最初に一度だけ表示されましたが、読み込み直すと、画像エラーになります。



 

こちらは、SSL通信でのテストです。

何度か読み込み直していますが、画像エラーになることはありませんでした。

つまり、セキュリティに配慮したSSL通信のホームページからでないと、

アメブロの画像は直接読み込むことはできないということです。

SSL通信かどうかは、アドレスが http://ではなく、https://  になっているかどうかでわかります。

キャッシュについて

でも、「うちのホームページでは表示されるし、まぁ、問題ないです」

と思っているサロンオーナーさんもいると思います。

 

でも、それって、見えているのは自分だけかもしれないのです。

その理由について、以下の短い動画を見ていただければと思います。

 

解説がなくてわかりづらいですが、やっていることは以下の4ステップです。

  1. 非SSL通信のサーバーで、表示されないことを確認する
  2. SSL通信のサーバーで、表示されることを確認する
  3. ブラウザのキャッシュをクリアして、SSL通信側で画像をもう一度表示する
  4. 非SSL通信のサーバーなのに、1度だけ画像が表示される

 

つまり、ホームページを見るためのブラウザが、

アメブロの画像を保存してくれている1度だけ、画像を表示することができます。

 

しかし、もう一度表示するときに、サーバーがSSL通信かを判断し、画像表示ができなくなっています。

 

自分のところでは見えるループ

あなたが、ホームページに埋め込もうとしている画像は、

もしかしたら、アメブロにも埋め込まれているかのしれません。

 

そして、自分のホームページを管理するときは、アメブロ側も閲覧をしていることでしょう。

そうすると、ブラウザには、アメブロで表示した画像が一時的に保存されます。

 

その後、自分のホームページを見てみると、

一時的に保存した画像が、キャッシュとして表示されるので、

「普通に見えている」と判断してもおかしくはないでしょう。

 

総合的に考えると、やはりアメブロの画像をそのまま直接読み込むことは、避けるべきだと思います。

 

アメブロの画像を表示することができる対応方法

最後に、「ではどうすればいいか」を解説します。

最善の方法は、アメブロから直接コピペせずに、きちんと手元に保存をして、サーバーにアップロードし直すことです。

 

ただ、先ほどから説明しているように、SSL通信であれば、アメブロから画像を直接読み込むことが可能です。

2016年12月12日現在の情報です。アメブロ側の対応変更があれば、変わることもあります。

このホームページは、SSL通信に対応しているので、アメブロの画像を読み込んでも、きちんと表示されているはずです。

SSL通信を導入する

みんな大好きロリポップでは、月々1500円でSSL通信を導入することができます。

ただ、サロンオーナーさんにとって、サーバー代 + 月々1500円は、高く感じられるかもしれません。
そこで、SSL通信にもともと対応したサーバーをご紹介します。

 

月々480円〜の、mixhost

https://mixhost.jp

 

こちらは、月々480円という安さなのに、

超高速なスペックと、標準でSSL通信に対応している安心感がオススメポイントです。

 

このサーバーであれば、何も考えなくても、

https://でアクセスをすることで、アメブロの画像を表示させることが可能でした。

 

最近は、弊社でも積極的に使っていますが、非常に快適です。

ただ、ちょっとサーバー設定の知識が必要な部分もあることだけは、

ロリポップよりも不便かもしれない点です。

 

導入したいけれど、ちょっとわからない・・という場合は、お気軽にご相談ください。

 

 

  • このエントリーをはてなブックマークに追加
  • LINEで送る
こんなブログも読まれています