My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

さくらサーバーで既存WordPressブログを常時SSL化、「接続は保護されていません」解決法手順紹介

今日は、さくらサーバーで既存WordPressブログをSSL化した際に起こった以下エラーの解決法をご紹介します。

Chromeの場合》
f:id:sntkk3:20180718203736p:plain
f:id:sntkk3:20180718204308p:plain

Firefoxの場合》
f:id:sntkk3:20180718203938p:plain

【エラー内容】

  • SSL適用後にもかかわらず、アドレスバーに鍵のマークが表示されない。
  • 代わりに「このサイトへの接続は保護されていません」エラーが表示される。

さくらの場合、本当であれば専用プラグインでこのような現象が発生せずに簡単に設定完了するかと思ったのですが、期待通りには行きませんでした。
今回の方法は、さくらサーバーに限らず使える方法ですので、
同様の現象でお困りの方はお試しください。


では、以下よりこのエラーに対する解決方法詳細となります。

問題の原因

画像やプラグインなど、既存コンテンツにSSL化されていないものが含まれるため。

解決手順

1. 問題原因となるコンテンツの特定

1.1. 問題サイト表示中、使用しているブラウザのデベロッパーツールを起動します。
Chrome使用であれば、ページの右クリック-「検証」か[Ctrl]+[Shift]+[I]のショートカットキーで起動できます。)


1.2. デベロッパーツール ウインドウ上部に表示された以下注意アイコンをクリックします。
f:id:sntkk3:20180718211044p:plain


1.3. 完全SSL化の妨げになっているコンテンツが、以下のように下部ウインドウに特定表示されます。
f:id:sntkk3:20180718211415p:plain

2. 問題原因のコンテンツを設定し直します。

 (対象画像のURLを「https」に書き換える、あるいは、画像をアップロードし直し、改めて設定します。)

今回の私の場合は、サイトのロゴ画像をはじめとするいくつかの画像がこの原因となっていました。
今回特定された5枚の画像すべてをhttpsとなるように変更すると、、、

f:id:sntkk3:20180718213048p:plain

無事、上図のようにアドレスバーに表示され、SSL化が完了しました。


以上、ご参考まで。