2016/11/01123 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. .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」が緑色になり、横に鍵のアイコンが表示さるようにしなければなりません。

Chromeのアドレスバー

Chromeのアドレスバー

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

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

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

WordPress URLを変更

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

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

WordPressテーマをチェックする

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

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

WordPressテーマ内のURLを修正

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

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

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

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

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

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

Search Regexインストール

有効化したら、[ツール]-[Search Regex]に進みます。

ツール-Search Regex

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

Search Pattern http://ドメイン
Replace pattern https://ドメイン

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

Search Regexで置換検索

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

Search Regex 置換確認

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

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

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

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

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

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

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

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

カエレバSSL

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

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

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

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

【追記】SNSシェア数を引き継ぐ方法

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

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

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

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

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

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

最終チェック

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

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

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

ChromeでHTTPS詳細を確認

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

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

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

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

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

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

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

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

CSS内の背景読み込み部分

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

HTTPS化に成功

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

おつかれさまでした!

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

.htaccessでリダイレクト処理

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

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

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

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

Yoast SEO ツール画面

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

.htaccess編集画面

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

■変更前
■変更後

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

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

https化を確認

これで作業完了です!

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

サイトの HTTPS 化は以上で終了ですが、Google Analytics など外部ツールと連携している場合は登録してある 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 など、ほかにも見落としがないかチェックしてみてください。

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

まとめ

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

  1. サーバーで SSL を設定
  2. WordPress の URL を変更
  3. テーマ内の URL を修正
  4. 投稿・固定ページ内のリンクを修正
  5. .htaccess でリダイレクト処理
  6. 外部サイトの登録 URL を変更

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

無料独自 SSL がパワーアップ!
2016 年 11 月 1 日より「日本語ドメイン・サブドメイン」でも無料 SSL が使えるようになりました!

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

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

(Naifix の HTTPS 化は未定です……)

それでは、また。