前回、 「WING(AFFINGER5)」で作ったサイトがスマホ表示で変になっていたことがきっかけで、あらためて今の自分のサイトを見直すことに。そして、前から気になっていたけど見て見ぬふりをしていたアドレスバーのエラー表示を解決することにしました。そのエラー表示というのは、
アドレスバーに表示される
「保護されていない通信」
「このサイトへの接続は完全には保護されていません。このサイトで目にする画像は、悪意のあるユーザーによって差し替えられたものである可能性があります」
……なんて表示されたら怖くてサイトを見れませんよね(;^_^A
このエラーはURLがhttp://から始まる場合に表示されるのですが、私のサイトはSSL認証をしてhttps://になっています。それでも保護されていない通信となってしまう場合の解決法をここにまとめます。
解決法
グーグルクロームで該当のサイトを表示した状態で、「F12」キーを押してデベロッパーツールを起動させます。
次に、右側にある点が縦に3つ並んでいる記号をクリックして、Dock sideの右にある記号をクリック。
「Security」を選択してから「F5」を押して更新します。そして、左側に表示される「Overview」を選択すると右側に安全ではない要素が表示されます。「View 〇 requests in Network Panel」がそれに該当するのでリンクをクリック。
すると、「Network」が表示されます。下のほうに「Name」があるので、その下の文字をクリック。「Headers」をクリックで表示される詳細がエラーの原因です。
私の場合は4つの画像が問題だったようです。その為、これらの画像を使っている記事を編集して、あらためて画像をアップロードしなおしました。念のため、画像の名前は変更しています。修正作業が終わった後に再度上記画面を「F5」で更新すると……
赤いエラー表示が消えました!問題のサイトも「F5」で更新すると……
「この接続は保護されています」
これで解決です!
もし同じような現象でお困りの方は、是非参考にしてください。