2016 年 6 月 30 日より、エックスサーバーで独自 SSL が無料・無制限で使えるようになりました。

Google が HTTPS をランキングシグナルに採用する という発表があってから個人ブログでも HTTPS 化が進んでいましたが、今回の無料化でさらに加速しそうですね。

というわけで、手持ちのサイトをエックスサーバー独自 SSL を使ってHTTPS 化（常時 SSL ）してみたので、設定方法や手順をご紹介します。

HTTPS化（常時SSL）の流れ

ブログ全体を HTTPS にすることを「常時 SSL 」といいます。

小難しい話はおいといて、要するにブログのドメインが「http://naifix.com」から「https://naifix.com」になる、と覚えておけば良いかなと思います。

HTTPS 化によって、「暗号通信で読者が安全に閲覧できる環境を提供できる」ようになります。また、ほんの少しだけ検索に有利になる可能性もあります。読者にも運営者にもメリットがあるわけですね。

既存のWordPressブログをHTTPS化する方法

HTTPS とか SSL と聞くとなんだか難しそうに感じますが、そんなことはありません。難しいのではなく面倒なだけです……

運営中の WordPress ブログを HTTPS 化する手順を大雑把にまとめると、以下のようになります。

加えて、Google Analytics や Search Console などの外部ツールや、SNS などに登録してある URL を「http://～」から「https://～」に変更します。

ブログの規模やリンクの数にもよりますが、ページ数が少なければ 1 時間もあれば終わると思います。

では、実際に試してみたので手順の詳細をご覧ください。

WordPressサイトをHTTPS化する手順

エックスサーバーのSSL設定

まずはエックスサーバーで SSL 設定を行いましょう。クリックするだけで終わります。

サーバーパネルに入り、左下から HTTPS 化したいドメインを選択します。

つづいて、「ドメイン」欄の「SSL 設定」に進みます。

ドメインを確認し、「独自 SSL 設定の追加」タブをクリック。

再度ドメインを確認し、右下の「独自 SSL 設定を追加する（確定）」を押して終了です。

なお、ブログの URL に「www」をつけていない場合も「www あり」のドメインが表示されます。このまま追加して問題ありません。

また、「CSR 情報（SSL 証明書申請情報）」にチェックを入れると以下のフォームが出てきますが、とくに変更しなくても大丈夫です。

チェックを入れずに確定ボタンを押してください。

青いラインで「SSL 新規取得申請中です」が出てくるので、しばし待ちます。

これでサーバー側の設定は終わりですが、この段階で「https://～」を見ても以下のような画面が表示されるだけです。

Firefoxの表示

設定完了まで 30 分 ～ 1 時間ほどかかり、その後サイトが表示されるようになります。

これで終わりならものすごく楽なんですが、実はまだ不完全な状態です。

最終的には、このようにアドレスバーの「https」が緑色になり、横に鍵のアイコンが表示さるようにしなければなりません。

Chromeのアドレスバー

ここからは WordPress 側の設定に移ります。

WordPressの一般設定でURLを変更する

WordPress 管理画面に入ったら、［設定］－［一般］にある URL を 2 ヶ所変更します。

ここはただ「http」を「https」にするだけです。

「変更を保存」をクリックすると自動的にログアウトするので、再度ログインしましょう。

WordPressテーマをチェックする

WordPress テーマ内で、自サイトの URL が直接記述されているところがないかチェックします。

たとえば、以下のように画像を読み込んでいる部分などがあれば、すべて「https」に変更していきます。

自サイトの URL だけではなく、古いタイプの SNS ボタンなどは HTTP のままだったりするので、こちらも要修正です。

内部リンク・画像をSearch Regexで一括置換する

テーマチェックが終わったら、今まで書いてきた記事や固定ページのなかにある内部リンク・画像リンクを修正します。

「http://自分のドメイン」を「https://自分のドメイン」に変更するのですが、記事が数百あるなら一つひとつ修正していられません。

そこで、プラグイン「Search Regex」を使って一括置換しましょう。

［プラグイン］－［新規追加］から「Search Regex」を検索して、インストール＆有効化します。

有効化したら、［ツール］－［Search Regex］に進みます。

「Source」が「Post Content」になっているのを確認し、以下のように入力します。

入力したら「Replace」ボタンをクリック。

すると、置換する候補がずらずら～っと出てくるので、問題がないか確認します。

あまりに記事数が多い場合は「Limit to」で上限を 100 にしておいたほうが良いと思います。

問題がなさそうなら、「Replace & Save」ボタンを押して完了です。

外部サイトから画像などを読み込んでいる場合

もし外部サイトから画像などを読み込んでいるなら、それもすべて HTTPS に変更する必要があります。ただし、そのサイトが HTTPS 化されていないとダメです。

おもにアフィリエイトリンクのバナーが該当しますが、現時点で ASP が対応していなければバナーは外したほうが良いでしょう（※テキストリンクはそのまま使えます）。

参考主要ASPのアフィリエイトリンクコードのSSL化対応状況【2016年1月時点】

なお、カエレバは Amazon の SSL 画像読み込みに対応しています。

今までのリンクは、Search Regex で置換すれば大丈夫そうです。

アフィリエイトバナーのほかにも、古い YouTube コードなどは HTTP になっている可能性があるので、こちらも修正しましょう。

たぶんここの張り替え作業が、一番時間がかかる部分だと思います。

最終チェック

ここまでの作業が終了したら、サイトを更新して「https」が緑になってるか確認してみてください。

もしまだダメなようなら、Chrome のデベロッパーツールであたりをつけます。

アドレスバーのアイコンをクリックし、「詳細」をクリック。

デベロッパーツールが出てくるので、「View requests in Network Panel」をクリック。

Network 画面に移ったら、F5 でサイトを更新します。

ページの読み込みが終わると、URL が HTTP のまま残っている箇所が表示されます。

これは・・ CSS の背景読み込みですね。

style.css 内を検索して「http」を修正します。

さて、チェックしてみましょう。

「https」が緑色になり、デベロッパーツールもオールグリーンになりました！

おつかれさまでした！

と言いたいところですが、まだ作業が残っています ^^;

.htaccessでリダイレクト処理

この段階では「http://～」と「https://～」の両方が存在しており、両者は別サイト扱いとなります。

このため、「http://～」にアクセスがあったら「https://～」にリダイレクト（転送）させるように設定しましょう。

.htaccess というファイルを編集する必要がありますが、今回はプラグイン「Yoast SEO」で編集してみます。

管理画面のサイドバー［SEO］－［ツール］に入り、「ファイルエディタ」をクリック。

「.htaccess ファイル」の部分を編集します。

以下の 5 行を追加してください。

「http://～」にアクセスして、きちんとリダイレクトされるかチェックします。

これで作業完了です！

外部サイトのURLも変更しておきましょう

サイトの HTTPS 化は以上で終了ですが、Google Analytics など外部ツールと連携している場合は登録してある URL を修正する必要があります。

Google Analytics

Google Analytics は、［アナリティクス設定］－［プロパティ設定］からデフォルトの URL を「https://」に変更します。

トラッキングコードはそのまま使えるので、張り替える必要はありません。

Google Search Console

Search Console は、新規サイトとして追加する必要があります。

XML サイトマップを生成している場合は、サイトマップを送信しておきましょう。

また、Google Analytics のプロパティ設定にある「Search Console を調整」から、新たに https で登録したサイトと紐づけておきます。

その他チェック項目

代表的な変更点は以上ですが、その他外部サイトに登録してある URL も随時変更しておきましょう。

お問い合わせフォームからの自動返信に含まれている URL など、ほかにも見落としがないかチェックしてみてください。

過去記事のメンテナンスも合わせて行うと良いですね。

まとめ

長々となってしまいましたが、HTTPS 化の基本的な流れはこちらです。

運営中のサイトに関しては、今すぐあわててやらなくても良いと思います。エックスサーバーの無料 SSL はまだ日本語ドメインに対応していませんし、もしかするともっと楽に移行できるようなツールが出てくるかもしれませんしね。

はじめから HTTPS にしておけば面倒な作業は必要ないので、これから新しくブログを作るならエックスサーバーがイチオシです。ちなみに、8 月までドメインキャンペーンも行っていますよ！

エックスサーバーの詳細はこちら

（Naifix の HTTPS 化は未定です……）

それでは、また。