2017/05/31389 Shares

エックスサーバー独自SSLが無料!WordPressサイトをHTTPS化する方法

Safety

2016 年 6 月 30 日より、エックスサーバーで独自 SSL が無料・無制限で使えるようになりました(11 月から日本語ドメインとサブドメインでも使えるようになりました)。

 エックスサーバー

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

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

HTTPS化(常時SSL)の流れ

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

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

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

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

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

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

  1. サーバーで SSL を設定
  2. WordPress の基本設定を変更
  3. テーマを一部修正(不要な場合あり)
  4. 投稿・固定ページ内のリンクを修正(プラグインで一括置換)
  5. ウィジェットやプラグインの再設定(不要な場合あり)
  6. Mixed Content になっていないか全ページチェック
  7. .htaccess でリダイレクト処理

一連の作業が終わったら、Google Analytics や Search Console などの外部ツールや、SNS などに登録してある URL を「http://~」から「https://~」に変更します。

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

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

WordPressサイトをHTTPS化する手順

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

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

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

エックスサーバードメイン選択

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

エックスサーバーSSL設定

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

エックスサーバー独自SSL追加設定

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

エックスサーバーSSL確定

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

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

エックスサーバーCSR情報設定

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

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

エックスサーバー新規SSL取得申請

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

Firefoxの表示

Firefoxの表示

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

HTTPS設定完了

「https://~」でサイトが表示されるのを確認してから次の作業に移ってください。表示される前に WordPress 側で作業してしまうと、サイトが真っ白になって管理画面に入れなくなることもあります。

それでは、WordPress 側の設定を見ていきましょう。

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

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

WordPress URLを変更

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

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

WordPressテーマをチェックする

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

※今までテーマを触ったことない場合、この作業は飛ばしていただいてもかまいません

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

WordPressテーマ内のURLを修正

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

修正箇所はテーマによって異なりますが、大抵は以下のファイル(とそこから読み込んでいるファイル)をチェックすれば大丈夫だと思います。

  • header.php
  • footer.php
  • functions.php
  • style.css

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

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

プラグイン「Search Regex」を使って、「http://自分のドメイン」を「https://自分のドメイン」に一括置換するのが一番ラクです。

[プラグイン]-[新規追加]から「Search Regex」を検索して、インストール&有効化します。

Search Regexインストール

有効化したら、[ツール]-[Search Regex]に入り、以下のように設定してください。

Search Regex 設定例

Source Post Content
Limit to No limit
Search Pattern http://ドメイン(図の1)
Replace pattern https://ドメイン(図の2)

入力したら「Replace」ボタンをクリック(図の3)。

すると、置換する候補がずらずら~っと出てくるので、きちんと置換されているか確認します。

Search Regex 置換確認

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

外部サイトから画像などを読み込んでいる箇所を修正

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

NG 例
<img src=”http://外部サイト” />

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

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

カエレバは Search Regex で一括置換できるので、以下のように設定してください。

Search Pattern http://ecx.images-amazon.com
Replace pattern https://images-fe.ssl-images-amazon.com

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

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

ウィジェットやプラグインをチェックする

テーマファイルと記事内のチェックが終わったら、ウィジェットやプラグインもチェックしておきましょう。

サイドバーにプロフィール画像や内部リンクを入れていたり、プラグインでアイコンを入れている場合は、すべて「https://~」に変更していきます。

とにかく画像が表示されているところはすべて確認してください。

SNSシェア数を引き継ぐ方法

「http://~」と「https://~」は別のサイトとして認識されるため、SNS のシェア数を表示していたならすべてゼロになってしまいます。

元の URL(HTTP)と合算して表示すれば疑似的に引き継げますが、PHP や jQuery の知識が必要なので初心者には敷居が高いですよね。

でも、プラグイン「SNS Count Cache」を使えば専門知識など不要で、設定項目を一ヶ所変更するだけで対応できますよ!

プラグイン設定のなかにある「HTTPからHTTPSへのスキーム移行モード」を「有効」にするだけです。

SNS Count Cache でカウント数を引き継ぐ

プラグイン未導入の場合は、HTTPS 化の前にプラグインでシェア数を取得しておいて、その後 HTTPS に移行するのが良いと思います。

HTTPS化の最終チェック

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

もし緑になっていなければ、画像やスクリプトの読み込み部分で「http」のままになっている部分があるということです(Mixed Content)。

これは、Chrome のデベロッパーツールで調べていきましょう。

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

ChromeでHTTPS詳細を確認

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

デベロッパーツールでHTTPを確認

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

デベロッパーツール Network画面

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

デベロッパーツールでHTTPリクエストを発見

上の例は、CSS で背景に画像を設定している部分ですね。

style.css 内の「http」を「https」に修正します。

CSS内の背景読み込み部分

あとはずっとこの繰り返しです。

  • サイトを開いてアドレスバーをチェック
  • 「https://」が緑色になっていなければ、デベロッパーツールで原因を調べる
  • Mixed Content の原因となっている箇所を修正する

全ページ「https」が緑色で、デベロッパーツールもオールグリーンになっていれば OK です!

HTTPS化に成功

どうしても混在コンテンツ(Mixed Content)が解消できないとき

何をどうしても Mixed Content のエラーが出てしまって https の部分が緑にならないときは、強制的に https で読み込ませることもできます。

以下の meta タグを全ページの <head> ~ </head> に入れてください。

または、.htaccess に以下の一文を追記するのでも OK です(※エックスサーバーはサブドメインにも影響するので注意)。

https で読み込めない画像は表示されず、結果的に混在コンテンツエラーは出なくなりますが、ASP のインプレッションカウントに影響が出るかもしれませんので応急処置として覚えておいてくださいね。

とりあえず meta タグを入れて強制的に https で読み込み、表示されていない画像などをチェックしていく方法もありだと思います。

オールグリーンになったら、作業完了まであと一息です!

.htaccessでリダイレクト処理

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

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

.htaccess というファイルを編集する必要がありますが、ここではエックスサーバーのサーバーパネルから編集する方法を載せておきます。

サーバーパネルに入ったら、左下で SSL 化するドメインを設定しておき、「.htaccess 編集」に入ります。

エックスサーバー・サーバーパネル

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

初期位置は多少違うかもしれませんが、「# BEGIN WordPress」の上に入れておけば大丈夫です。

.htaccess リダイレクト設定例

■変更前
■変更後

 FTP で .htaccess を直接編集する場合はこちら

編集が終わったら「http://~」にアクセスして、きちんとリダイレクトされるかチェックしましょう。

https化を確認

もしリダイレクトされない or サイトが真っ白になったときは、全角スペースやよけいな文字列が入っているなどの記述ミスが考えられます。もう一度追記した部分を削除してやり直してみてください。

 500 Internal Server Error(HTTP500エラー)の原因とWordPressでの解決策

これで作業完了です!

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

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

Google Analytics

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

Google Analyticsでhttps設定

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

Google Search Console

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

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

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

Search Console調整

その他チェック項目

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

  • ブログランキング
  • ASP
  • SNS

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

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

WordPress HTTPS化まとめ

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

  1. サーバーで SSL を設定
  2. WordPress の基本設定を変更
  3. テーマを一部修正(不要な場合あり)
  4. 投稿・固定ページ内のリンクを修正(プラグインで一括置換)
  5. ウィジェットやプラグインの再設定(不要な場合あり)
  6. Mixed Content になっていないか全ページチェック
  7. .htaccess でリダイレクト処理
  8. 外部サイトの登録 URL を変更

まだ慌てて HTTPS 化 しなくても大丈夫ですが、今後「HTTP」のサイトを閲覧するとブラウザで警告が出るようになると言われています。

グーグルをはじめとするブラウザの開発者は、最終的には、すべての非HTTPSページで「安全ではない」ことを示す警告を出すようにしたいようだ。

グーグル「常時HTTPSでなきゃChromeでひどい目にあわすよ、まずは1つ目の罰だ」 などSEO記事まとめ10+2本 | 海外&国内SEO情報ウォッチ | Web担当者Forum

『このサイトは安全ではありません』なんていう警告が表示されると、一般ユーザーは驚いて見てくれないと思いますので、余裕があるうちに対応しておいたほうがよいかもしれません。

エックスサーバーなら無料で SSL 化できるので、他サーバーからの引っ越しを検討するのもよいでしょう。

うまくキャンペーン時期と重なれば、ドメイン代も無料になります。

エックスサーバーをお得に使う方法はこちら

もしどうしても SSL 化に不安があるなら、代行作業などご相談に乗りますので、お気軽にお問い合わせください。

▼プラグインを使う方法はこちら
WordPressを一瞬でHTTPS化するプラグイン「Really Simple SSL」の使い方

それでは、また。