こんにちは、Ruiです。
ずっと気になっていた、当ブログの常時SSL化。ハードルが高そうで、なかなか手をつける気になりませんでした。が、先日、ロリポップから下記のメールを受け取り、常時SSL化をする!と決意。
Webサイトを開いて「保護されていない通信」と出てくると、やっぱり見る方は不安になりますよね…。
相当な時間がかかるだろうと覚悟していましたが、2時間ちょっとで無事に常時SSL化できました。
レンタルサーバーはロリポップ!のスタンダードプラン(独自SSL無料)、WordPressのテーマはSTORKを利用しています。
以下、参考にしたサイト、つまずいた個所を含め、当ブログを常時SSL化した際のメモを残しておきます。
バックアップ:
公開記事が126、画像も多い当ブログ。常時SSL化が上手くいかず失敗しても困らないように、まずは、バックアップをとります。使いやすいUpdraftPlus Backupsを利用しています。
以下、ゼロさんのサイトLifeEdgeの記事を参考に進めました。わかりやすく書かれていて助かりました。
ロリポップ:
ロリポップのユーザー専用ページから、独自SSL証明書を導入。
5分ほど待っても”作業中”の表示だったので、サイトをリフレッシュすると、無事作業完了していました。
ワードプレス:
管理画面からWordPressアドレスとサイトアドレスを”http”から”https”に書き換え。
プラグイン、Search Regexを使って、サイトの全ての”http”アドレスを”https”に書き換え。
これで、SSL化が完了し、Chromeのアドレスバーに保護された通信と表示されるはずなのですが、なっていません!
“http”がサイト内に残っているということです。
“http”の記述を以下の順でチェックして”https”に変えました。
ウィジェット:テキストエリア
メニュー:カスタムリンクに”http”記述が残っていました。
コンタクトフォーム:プラグイン、Contact Form 7を使っているのですが、フォームを一旦削除して新たに作成しました。
固定ページ:運営ポリシーの記事のリンクに”http”の記述が残っていました。
これでも「保護された通信」と表示されません。諦めモードになりそうでしたが、ジュンイチさんのサイトジュンイチの記事の最後の方に書かれている”どうしても不完全なhttpsのままで、どこを直したらいいか分からない場合、Firefoxが超便利!”の方法で”http”の記述がある当サイト内の画像が見つかりました!
ウィジェットのテキストエリアは最初に全てチェックしていたはずなのですが、フッターのテキストエリアに貼っていた画像の”http”の記述を見落としていました。
これで、やっと「保護された通信」と表示されました。
Search Console:
Search Consoleは今まで利用したことがなかったのですが、この機会に登録しました。こちらもジュンイチさんの動画を参考にさせていただきました。
Googleアナリティクスのトラックコードを当サイトに貼ってあるので、サイトアドレスの認証方法はGoogleアナリティクスを選択して簡単にできました。
(HTMLファイルをアップロードして認証する場合は、ロリポップ!FTPの、該当サイトフォルダーを開き、Search ConsoleからダウンロードしたHTMLファイルをアップロードします。)
追加して認証するサイトのアドレスは以下の4パターンになります。
http://~, http://www.~, https://~, https://www.~
Search Consoleにサイトマップを追加する際は、わたしはワードプレスのプラグインはAll In One SEO Packを使いました。このプラグインの基本設定は、狐火兎さんのサイト、コビトブログの記事(「All In One SEO Pack」で、SEO対策!検索順位UP!)を参考にさせていただきました。
Googleアナリティクス:
プロパティ設定とビュー設定を”https”に変更。
ロリポップ(301リダイレクト設定):
ロリポップのロリポップ!FTPにある「.htaccess」ファイルへ301リダイレクト設定のコードを追加。
これで、”http”へアクセスがあっても”https”へリダイレクトされます。
これで無事、常時SSL化できました。多くの方がおっしゃっているように、ウィジェットのテキストエリアに”http”の記述が残っていることが多いようです。わたしの場合もウィジェットのフッターテキストエリアの画像アドレスを見落としていました。Search Regexで”https”に変換後、まずはウィジェットをくまなくチェックするべきでした。