ミックスコンテンツが原因？サイト自体はhttps（SSL化）なのに、なぜか「保護されていないマーク」が出る！解決方法はこれ！

こんにちは。長壁です。

ウェブサイトのSSL化（https）は今や当た
り前。
保護されたサイトであることの証なので、
ユーザーも安心して見ることができる。

弊社のトップページのサイトのURLは
httpsになっているのに、ブログ記事を
見ると、URLの先頭にビックリマークが
表示されている記事を発見！

なぜ？

以前にも社長からその現象が起きているこ
とを教えてもらい、いろいろなサイトで調べ
ていました。

当時は、原因と解決策を見つけることが
できずにいたのです。
また、モバイルで見たときに「保護されてい
ないマーク」になる。
会社のパソコン（Mac）で見ると、問題ない。

これがさらに「わかんなーい」「どうして？」と
いう感情でした。

サイト本体はSSL化してあるのに、一部
記事のURLが「保護されていないという
マーク」が出てしまう。

モバイルで見たときだけ「保護されていな
いマーク」になる。

原因は何？
どうすればいいの？
と悩んでいる方へ。

私もそのうちの一人です。
そして、ついに！その原因と解決策を見つ
けることができましたー！！

同じ状況で困っている方は読んでみてくだ
さい。

まず、「https」と「http」の違いとは。

「https」は通信を暗号化しているサイトの
こと。

ネットを使って個人情報などをやり取りする
ときに、第三者に送信内容が漏れないよう
暗号化してやり取りする仕組みを
「SSL通信」といいます。

自社のサイト運営をしているほとんどの方
は、「SSL化」にしていると思います。

「http」は通信を暗号化していないサイト
のこと。

個人情報などを入力する際には要注意。

ミックスコンテンツになっていたことが原因
だった！！

ここ1か月、時間のあるときにネットで検索
して調べていました。

すると、ある記事を見たとき、私が求めて
いた原因と解決につながる内容なのかも！
と思ったのです。

そこには原因のひとつに「ミックスコンテン
ツ」という言葉が出てきました。

ミックスコンテンツ（Mixed Content）と
は、通信が暗号化されているサイト
（https）内に、通信が暗号化されていない
「httpのコンテンツが混ざっている状態」の
ことです。

「混合コンテンツ」とも言う。
画像、動画、スクリプト（簡易的なプログラ
ミング言語のことらしい）などが、httpに
なっていること。

これが原因で、サイト本体はhttpsになっ
ているのに、httpのコンテンツが含まれて
いるので正常に読み込まれず、「保護され
ていないマーク」が出ていたのです。

サイト内で設定している画像やリンク先を
確認しました。

ブログ記事内の画像も要注意です。

弊社のサイトはワードプレスのコクーンと
いうテーマを使っています。
コクーン設定で画像を設定する箇所がいく
つかあるので、一通りチェックしました。

管理メニューからCocoon設定を選択すると
上部に各項目の設定ボタンが並んでいます。

各項目ごとに「変更をまとめて保存」をして
ください。

1〜4までの作業時間は、約15分。

ミックスコンテンツを探す方法で
デベロッパーツールという方法を知ったので
実際に使ってみました。

モバイルで「保護されていないマーク」が
出たサイトをパソコンで開きます。
検索ワードやURLを入力する枠の右側
に“︙”のマークがあるので、クリックします。
その他のツールから、
デベロッパーツールをクリックします。
右に表示された一覧の「Console」を選択
すると開いているサイトのコンテンツなどを
分析してくれるそうです。
どこにミックスコンテンツがあるのかURLで
確認。
「Mixed Content：　The page at」
という表示の一覧に「http」になっている
画像などのURLが表示されます。
ミックスコンテンツが入っている記事の
編集画面を開きます。
修正する画像をクリックすると、
上部に「置換」という項目が出ます。
「置換」をクリックすると、
「現在のメディアURL：」が表示されるの
で、「リンクを編集（えんぴつみたいな
マーク）」をクリックして、「httpに“s”」を
加えて保存する。