以前から少し気になっていたのですが、Safariでこのブログの更新をしようとして、ログインする画面を表示すると、こんな表示がされていました。
赤字で「Webサイトは安全ではありません」という表示です。そして、Google Chromeでも、「保護されていない通信」と表示されるようになりました。僕だけが使うログイン画面だけど、コメントを入力できる画面にも表示されますので、これではコメントも入力してもらえません。
これではいけないと、常時HTTPS化をすることにしました。
ここでは、備忘録代わりにするためとこれからHTTPS化をされる方向けに、その手順を記載しておこうと思います。僕が利用しているレンタルサーバーは、ロリポップなので、まず無料の独自SSL設定から始めました。
HTTPS化の手順は以下のとおりです。
- サーバーの独自SSL化
- WordPressの設定変更
- imgタグURLの一斉書き換え
- httpからhttpsへのリダイレクト対応
- アクセスカウンターの変更
- Google Chrome 検証モード
- Google Analyticsの設定変更
1．サーバーの独自SSL化
実はこれは既に済ませていました。ロリポップからのメールを見て、Google Chromeの表示について知ったのです。
ロリポップのユーザー専用ページのメニューにある「セキュリティ＞独自SSL証明書導入」から該当ページを表示すると、SSL保護されていないドメインの一覧が出ます。
ドメイン一覧の先頭にチェックボックスがあるので、それをチェックして「独自SSL（無料）を設定する」ボタンをクリックするだけです。
2．WordPressの設定変更
WordPressの設定変更も、とても簡単です。
設定メニューを選択して、一般設定が表示されたら、以下の部分をhttpsに書き換えて保存するだけです。
(1) WordPressアドレス（URL）
(2) サイトアドレス（URL）
※メールアドレスが空欄ですが、個人情報なので空欄にしてスクリーンショットを撮っただけで、実際は変更しません。
ここまでの作業で、ログイン画面は「保護されていない通信」の表示は無くなります。
しかし、ブログのトップページを表示すると、「保護されていない通信」と表示されます。まだ変更できていない部分が残っているのです。
3．imgタグURLの一斉書き換え
この段階で残っている「http://」の記述は、HTTPSへ移行する前にアップした記事の画像などの保管場所を示すURLです。
画像のURLを一斉に書き換えるプラグインが、WordPressには提供されています。「Search Regex」と言うプラグインです。
「今すぐインストール」をクリックして、有効化すると、「ツール」メニューに「Search Regex」と言うメニューが見えるようになります。それを選択すると、下のような画面が表示されます。
「Search pattern」に「http://sore-kara.com」を、「Replace pattern」に「https://sore-kara.com」と入力して、したの右端の「Replace & Save」ボタンをクリックすると、画像ファイルは全てHTTPS化されます。
4．httpからhttpsへのリダイレクト対応
とりあえず、ブログ内のHTTPSへの書き換えはこれで完了です。後は、例外的にウィジェット内に「http://」と言う記述が残っている場合がありますが、後でチェックしつつ書き換えて行きます。
例外が無ければ、これでHTTPS化は完了したことになりますが、ブラウザで「http://」と入力してしまうと、そのまま「保護されていない通信」のページが表示されてしまいます。「http://」と入力しても、自動的に「https://」と変換してくれるようにします。
サイトの一番上の階層にある「.htaccess」の記述の先頭に以下のような内容を追記します。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>
5．アクセスカウンターの変更
ロリポップ提供のアクセスカウンターを利用しています。残念ながら、HTTPSには対応していません。
WordPressのプラグインでアクセスカウンターを設置することにしました。「Count per Day」と言うプラグインを選択しました。
インストールして有効化した後、設定メニューから「Count per Day」を選択し、設定をします。
カウンターの移行なので、スタートする値に今のカウンターの累計値を設定しました。あまり気にしないで、総訪問者数と総閲覧数は同じ数値にしておきました。
設定が終わったら、ウィジェットに設定しているカウンターを外して、利用できるウィジェットにある「Count per Day」をメインサイドバーにセットします。セットするとカウンターの表示設定をします。
こんな感じで、表示設定をします。
6．Google Chrome 検証モード
ここまでやっても、まだ「このサイトへの接続は完全には保護されていません」と言う状態です。
ここでGoogle Chromeでサイトを表示して、右クリックをして「検証」を選択すると、右側にソースコードが表示されます。
右上にエラーになっているものとHTTPS化できていないものの数が表示されています。
詳細は該当箇所をクリックすると表示されますので、内容を読み取ってウィジェットの内容を修正します。だいたいは、「http://」を「https://」と書き換えることで、クリアできます。修正した度にリロードしてみると、表示される数が変化します。
僕のブログで言うと右のメニューの「Count per Day」の下のRSS記事へのリンクとか、アイコンのURL、人気ブログランキングやブログ村のバナーとリンクなどを修正したら、トップページは「保護された通信」になりました。
最後までひっかかっていたのは、各記事の一番下にセットしている人気ブログランキングとブログ村へのリンクとアイコンのURLでした。これは、プラグイン「WP-Insert」によって挿入していたことをすっかり忘れていました。
7．Google Analyticsの設定変更
最後にGoogle Analyticsの設定変更を行います。
ログインした状態で、左メニュー最下部の「管理」ボタンをクリックすると、以下の画面が表示されます。「プロパティ設定」をクリックします。
以下の画面に変わりますので、「デフォルトのURL」の「http://」を「https://」に変更します。
次に元の画面に戻り、「ビューの設定」を選択します。
以下の画面に変わりますので、「デフォルトのURL」の「http://」を「https://」に変更します。
以上でGoogle Analyticsの設定は完了です。
Search Consoleの設定変更を推奨しているサイトもありますが、とりあえず一旦はここで設定完了とすることにしました。時間があるときに、この記事は見直すことにしたいと思います。
この記事を自分で眺めながら、新しく立ち上げたいと思っているブログの設定を実行してみたいと思っています。その上で、この記事はもう一度見直すことにします。
この記事を書くのに参考にさせていただいたサイトは、以下のサイトです。
TECHNICAL CREATOR
「ロリポップ！で構築したWordPressサイトをHTTPS化するときにやったこと」