【初心者必見】SSL化したはずなのに「保護された通信」とならない場合の対応策

なんとなく自分のブログを見ていたのですが、アドレスバーにちょっと違和感がありまして。
PCでもスマホでも同じ違和感。

っていうか何がおかしいのかはわかっていたんですよね。

 

 

SSL化したはずなのに鍵がついていないのです。

これはどういうことかというと。

 

 

「完全には」ということは、どこかの何かが悪さをしているということ。
気になって仕方ないので調べてみました。

 

SSL化されていない原因を調べる方法

結論から言うと、ボクの場合はある１つの画像がSSL化に対応していなかったことが原因でした。
どこの何が原因なのかを調べるためには、Chromeのデベロッパーツールを使用します。
ボクはwindowsなので、macの方はそれぞれ置き換えてください。

右クリックで「検証」

するとページの内容が確認できますので、警告がある所をチェック。

 

「Mixed Content」というのは、コンテンツが混在しているためにエラーになっているということ。
これを修正すれば解決できそうです。

 

画像のアドレスが「http」のままというのも原因の一つ

もちろんサーバー側ではSSL化の設定はしています。
ということは原因は記事そのものではないっぽい。
となると、怪しいのは外部から挿入したもの。

 

 

そうなんです。
アップロードしている画像にも画像のアドレスが割り当てられます。

それがhttpsになっていないとSSL化に反映できていないと。

心当たりがなくもないので、ライブラリで全ての画像のチェックをしてみました。

 

 

おかしい。

エラそうに推理してみたのに見当違いだったのでしょうか。
事態はふりだしに戻ってしまいそうな予感。

 

 

初期設定で使われている画像も確認しましょう

このブログは「Cocoon」を使わせてもらっているのですが、初期設定で入っている画像もあるんですよね。

【OGP】→【ホームイメージ】
【404ページ】→【404ページ画像】
【AMP】→【AMPロゴ】

このあたりがデフォルトで入っている画像。
ここで先程のデベロッパーツールで検証した内容を見てみましょう。

 

 

そうなんです。
今回のケースではデフォルトで設定されているAMPページに使われている画像が原因でした。

「Cocoon設定」⇒「AMP」⇒「AMPロゴ」

 

ありましたね。
これを「https」に修正すればミッションコンプリート。
保存して改めてリロードしてみると。

 

 

 

Cocoonは初心者でもSSL化が簡単にできる神テーマ

https://wp-cocoon.com/

っていうか。

Cocoonの公式ページで丁寧に説明をしてくれていました。

 

 

 

http環境の時に挿入した画像のURLはあくまでもhttp～。
https環境にしてから挿入したものは自動的にhttps～

なんですね。

 

・まずは過去の画像のアドレスをチェック。
・並行して初期設定で入っている画像をチェック。

この２つのチェックで少なくともSSL化されていない画像の洗い出しはできると思います。

 

 

ホームイメージや404ページの画像は、せっかくだからオリジナルのものに変更してしまうのもアリですね。

 

まとめ｜SSL化設定はこれからのブログ運営に必須

SSL化の設定方法はサーバーによって少し異なります。

お使いのサーバーの手順に従って行いましょう。
ボクは「Xサーバー」+「Cocoon」環境なので、こちらの記事を参考にさせて頂きました。

 

 

今回ボクのSSL化できていない問題は、Cocoonにデフォルトで入っている画像のアドレスが原因でした。

見落としがちな部分でもありますので、同じような状況になっている人には参考になると思います。

上記であげた部分を全てチェックしても改善されない時は、SSL化する前に投稿した記事のURLもチェックしてみましょう。

記事自体のURLはhttps～になっていても、その記事を内部リンクで別の記事に挿入している場合は確認する必要がありそうです。

ブログに限らずこれからのwebページにはSSL化は絶対に必要な条件です。

忘れがち、見落としがちですが注意しておくべきですね。