【ブログ運営】他サイトの画像のせいで「保護されてない通信」と表示される場合の対処

f:id:pottiri:20200901230017p:plain — HTTPSの設定はしているはずなのに・・・

お疲れさまです。POTTIRIです。
Feedlyってご存知ですか？
会員登録してサイトを登録すると、
そのサイトの更新内容を一覧表示してくれるサービスです。
昔のGoogleリーダーみたいなやつで、RSSリーダーと呼ばれるサービスです。

というわけで当サイトを毎日見に来てねという願いを込めて、
右側にFeedlyへの登録ボタンをつけたのですが、
これをつけた時からChromeで当サイトを見た時「保護されてない通信」と出るようになりました。
今回これの対処方法について記載します。

「保護されてない通信」の意味
ちゃんと設定しているのに
まとめ

「保護されてない通信」の意味

現在のインターネットの世界では、
URLはセキュリティ上httpsによる通信が推奨されてます。
（なぜ推奨されてるかはこの記事の本題ではないので説明を省きます。）

https://pottiri.tech　←推奨
http://pottiri.tech　←非推奨

はてなブログでは、管理画面の設定→詳細設定でこの設定ができます。

f:id:pottiri:20200901231238p:plain — https通信のＯＮ／OFFは、管理画面の設定→詳細設定から行います。

httpsにしているかどうかは検索順位に関係していると言われています。
もしかしたらアドセンスの審査にも関係あるかもしれません。
関係ないかもしれませんがとりあえずやっておきたいですよね。

トップ画像にある「保護されてない通信」というのは、
この設定をしていないか・しているけど上手く行ってないことを意味します。
httpsなのでやっておいたほうが良いよ〜とか、
上手く行ってないので見直してね〜という意味ですね。

ちゃんと設定しているのに

私の場合はちゃんと設定してるのに「保護されてない通信」が出ていました。
何ででしょうか？
こういう時Chromeなら「F12」を押してみます。

f:id:pottiri:20200901231455p:plain — F12を押すとブラウザが発する情報を見ることができます。

画面の下にブラウザからのメッセージが表示されます。
「Console」タブを開いて見ると、以下のメッセージが見つかりました。
Mixed Content: The page at 'https://pottiri.tech/' was loaded over HTTPS, but requested an insecure image 'http://s3.feedly.com/img/follows/feedly-follow-rectangle-volume-big_2x.png'. This content should also be served over HTTPS.

「Mixed Content」「feedly」というキーワードが気になりますね。
どうやらFeedlyの登録ボタンの画像がまずいようです。