今回は、CocoonでSSL化してもGoogle Chromeで［保護されていない通信］と表示された場合の解決方法を紹介します。
『SSL化したのに［保護されていない通信］と表示される』
『httpsでも三角マークが表示される』
こんな方におすすめです。
ぜひ参考にしてください。
Google Chromeで［保護されてない通信］と表示される
サイトをSSL化してhttpsと表示されているのに、以下のように表示されることがあります。
スマホだとこんな感じですね。👇
こちらを解決していきます。
警告の原因
結論、［保護されていない通信］が表示されるのは、httpとhttpsが混在しているのが原因です。
例えば、自分のサイトのホームページはSSL化できてても、サイト内にある画像がSSL化されてないと［保護されていない通信］と警告が出ます。
なので、警告を無くすには、サイト内にあるSSL化されていないコンテンツをSSL化する必要があります。
［保護されていない通信］を改善する
それでは、警告を無くす方法について以下の２つを解説します。
- Cocoon設定から改善
- 混在コンテンツを探す方法
順番に解説します。
参考にしてください。
Cocoon設定から改善
SSL化していても保護されていない通信と表示されるのは、Cocoon設定が原因かもしれません。
一応、ダッシュボードからCocoon設定を開き、以下の項目を確認してください。
- 全体
- ヘッダー
- OGP
- 画像
- アピールエリア
- フッター
- ボタン
- 404ページ
- AMP
この9つの項目に原因となる画像が含まれている可能性があります。
例えばこののような感じですね。👇
ヘッダーロゴのリンクがhttpになっています。
このような場合はhttpsに書き換えれば問題ありません。
混在コンテンツを探す方法
もしCocoon設定にも問題が見つからなければ、エラーを確認して混在コンテンツを探す必要がありますね。
まずは、［保護されていない通信］が表示されているページを開きましょう。
次に、Ctrl+Shift+I（MacではCommand + Option + I）もしくはF12キーで検証してください。
そして［Console］を選択すると、下記のように表示されると思います。
そこから、黄色で『Mixed Content: ....』と表記されている部分にSSL化されてないURLが貼ってあります。
おそらく、それが混在コンテンツですね。
URLをクリックすると、混雑コンテンツ（画像など）を見ることができます。
原因となったURLをSSL化しましょう。
まとめ
今回は、SSL化しても［保護されていない通信］と表示された時の解決策を以下の2つに分けて解説しました。
- Cocoon設定から改善
- 混在コンテンツを探す方法
というわけで、今回はここまでです。
最後まで読んでいただきありがとうござしました。(*´ω｀*)
「カスタマイズが難しい…」という方へ
Cocoonはカスタマイズが必要なので、エラーの対処やCSSの学習しなければいけません。「Cocoonでは収益化は難しいな…」という印象です。
僕もCocoonのWEBデザインに3ヶ月ほどかかってしまい、収益化まで遠回りしてしまいました。
そこで、「カスタマイズが難しい…」という方はAFFINGER6の導入がオススメです。僕もAFFINGER6でサイトを運営しており、13歳で月収5桁を達成しました。
AFFINGER6は、それなりに稼ぐアフィリエイターから大人気のテーマなので、詳しくチェックしておきましょう。
-
【比較】なぜCocoonよりAFFINGER6の方が収益化しやすいの？【移行すべき理由】
続きを見る
「収益化するにはCocoonでいいの？」という方は、以下の記事で「僕が有料テーマをオススメする理由」をすべて解説しているので、参考にしてください。
-
【事実】Cocoonで収益化できない本当の理由【解決策あり】
続きを見る
