【HTTPS化対応】混在コンテンツを対処しました（多分・・・）
こんにちは。わいのり研究所です。
（犬じゃないです）
私は全然知りませんでした・・・
今日知りました（汗）
そこで、私が対処したことをまとめてみます。
専門家ではないので詳しいことは説明できませんが、私が不安に思ったこと、その原因と対処したことを皆さんに共有できたらなと思います。
少しでもお役に立てたら幸いです。
私が不安だったこと
Firefoxの黄色いアイコン
最近気付いたんですが、Firefoxで私のブログを開くとアドレスバーに「黄色いアイコン」が出るのでなんだろうと思っていました。
鍵マークに黄色いビックリマークなのでイヤな予感がしました・・・
そして黄色いアイコンをクリックすると・・・
「この接続は安全ではありません」
なんということでしょう！
「安全ではない」と言われました！（泣）
これはかなり不安になりました！
泣きそうになりました！
万が一にも、このブログを見てくれる方々に迷惑をかけたら大変ですから！
何も悪いことしてないのに・・・ぐすん
原因はなんだろう？
そこで、このメッセージの詳細を確認しました。
すると、こんな説明が出ました。
混在コンテンツ
だいたい分かりました。
サイトは「https://」なんですが、「http://」へのリンクがあるコンテンツが「混在コンテンツ」であり、今回の原因ということですね！
はてなの開発ブログに書いてあった！
いろいろ検索していたら、「はてなブログ開発ブログ」を発見しました。
今までこの存在を知りませんでした・・・（汗）
要約するとこんな感じです。
対処したこと
「http://」を変更・削除するだけでいいのか不安だったので、いろいろ検索しまくりました。そして、このありがたいブログ様にたどりつきました！（泣）
今回のブログ紹介
こちらのブログ様に助けていただきました！
ありがとうございました！
拝見すると、様々な混在コンテンツがあることが分かりました。
『混在コンテンツ（Mixed Content）とは』
HTTP で配信されたコンテンツがHTTPS のページに含まれる時、これを混在コンテンツ（Mixed Content）と呼ばれてます。
混合コンテンツには「アクティブ」と「パッシブ」の 2種類があります。
「アクティブ」な混在コンテンツは「画像」「動画」「音声」、「パッシブ」な混在コンテンツは「スクリプト（JS）」「スタイルシート」「iframe」Flash」が該当します。
『常時SSL化を妨害する混在コンテンツ（Mixed Content）の発見と退治 - after work Labo』より引用
Chromeの「検証」＞「Console」
このサイト様で、混在コンテンツを確認する方法を教えていただきました。
Chromeでブログを開き「右クリック」すると「検証」という項目があります。
次に「Console」を選択すると、そのページのエラーや警告が表示されます。
エラーを特定
出ているエラーの中で「http://」で始まるアドレスが含まれるものを探し、そのコンテンツを特定しました。
私の場合、サイドメニューに載せていたバナーが該当しました。
「danmachi」とか「steinsgate」って書いてありますよね？
「だんまち」と「シュタインズ・ゲート」のバナーです。
バナーの画像を取得しに行っているアドレスが「http://」でした。
そのサイトは現在「http://」しかないので、なくなく削除することにしました。
そのコンテンツを削除
「http://」ではなく「https://」の代替コンテンツがあれば、そのアドレスに替えればいいのですが、私の場合そのサイトは「http://」しか無かったので、仕方なくバナーを削除しました・・・しくしく
せっかく良さげなバナーだってのに・・・
さようなら、「だんまち」「シュタゲー」「このすば」・・・
結果発表！
そして、バナーを削除した結果・・・ドキドキ
なんということでしょう！
「保護された通信」という表示に変わりました！(∩´∀｀)∩ﾜｰｲ
ちなみにChromeでは、こんなアイコン表示です。
Firefoxの表示もこの通りです。これでひと安心です♪
アインズ様もお喜びです(*´▽｀*)
最後に
「この接続は安全ではありません」という表示が出たときは不安でしたけど、なんとか解決することができてホッとしました。
ちなみに、私は最近ブログ始めたばかり（1か月くらい）なので、私のブログのアドレスは最初から「https://」だったようです。
みなさんの場合は多分「http://」の方が大半だと思いますので、ブログのアドレス自体を「https://」に変換する必要があるようです。
しかし、一度「https://」に変更すると戻せないようなので、「混在コンテンツ」の対処が完全に終わってから変更した方がいいと思われます。
（私では詳細な説明ができないのでごめんなさい・・・）
詳しくは、こちらの「はてなブログ開発ブログ」をご覧ください。
私は「公式テーマ」ではないですし、カスタイズもしてるので対応できているか心配です。またなにか分かりましたら共有します。
今回もお付き合いいただきまして、ありがとうございました。
