「ロリポップ！」でサーバー契約していれば、7 月 1 1 日から無料で独自 SSL 機能が利用できるようなった。

ウェブサイトの常時 SSL 化（ HTTP → HTTPS ）はセキュリティ対策としてだけではなく、2014年に Google が「 HTTPS（暗号化通信） をランキングシグナルに使用します」と公式に発表してから、SEO（検索順位）にも影響を与えるようになっている。

なので、ロリポップのサーバーを使っている WordPress サイトを、常時 SSL 化。

思っていた以上に修正箇所が多かったので、以下、覚え書き。

常時 SSL とは

常時 SSL とはWebサイトの全ページを HTTPS 化（SSL / TLS 暗号化）するセキュリティ手法のこと。

これまで、SSL を導入すると暗号化オーバーヘッドのため Web サイトの表示が遅くなるといわれていたけど、最近では、サーバー側、クライアント側ともに、CPU の性能が向上したことで、オーバーヘッドの影響はほとんど感じられなくなった。

オーバーヘッドとは、やろうとする処理に付随して発生する付加的な処理のこと。

むしろ、「 SSL / TLS 」での接続（ SSL での接続）により HTTP / 2 というプロトコルを利用できるのでサイトの表示が速くなる場合もある。

HTTP / 2 とは

HTTP / 2 とは、グーグルが開発した SPDY を元に、接続の多重化やヘッダー圧縮などによって通信を高速化し安全性を向上させた新しい通信プロトコルのこと。

『 HTTP / 2 ってなにがいいの？ロリポップ！が試してみた 』は ⇒ こちら

「ロリポップ！」の独自 SSL 設定

WordPress サイトの全ページを常時 SSL 化（ http → https ）するために、まず、ロリポップの独自 SSL（無料）を設定する。

通常、サイトのページを HTTPS 化するためには、SSL 証明書が必要なので証明書の手配と購入が必要だけど、ロリポップが無料提供するので今回は必要無し。

なので、何かあった時にためにバックアップをとってから、ロリポップのユーザー専用ページにログインして設定作業開始。

ロリポップの無料独自 SSL は、設定したら解除ができないので、設定する前に必ず一考。

ロリポップ独自SSL設定1

1 . 専用ページ画面左側「セキュリティ」から「独自 SSL 証明書導入」をクリック。

ロリポップ独自SSL設定2

2 . 「 SSL で保護されていないドメイン 」のタブを選択すると、独自ドメインと、サブドメインが一覧で表示される。

ロリポップ独自SSL設定3

3 . 独自 SSL を適用したいドメインおよびサブドメインのチェックボックスを選択後、「独自 SSL（無料）を設定する」ボタンをクリック。

ロリポップ独自SSL設定4

4 . 申請後、独自ドメインおよびサブドメインのステータスが「 SSL 設定作業中」に変わる。
※認証が完了するまでに最大5分程度がかかる。

ロリポップ独自SSL設定5

5 . 5 分程待ってページをリロードすると、認証が完了したドメインは「 SSL 保護有効」のステータスとなり、「 SSL で保護されているドメイン」のタブに移動される。

これで、ロリポップの設定は完了。

「ロリポップ！」の独自SSL（無料）設定マニュアルは ⇒ こちら

WordPress の http リソースを https に修正

次に、WordPress ダッシュボードにログインして、まず一般設定の 2 箇所の URL の「 http 」部分を「 https 」に修正。

一般設定の 2 箇所の URL を修正

  • WordPress アドレス（ URL ）
  • サイトアドレス（ URL ）

WordPressサイトhttps設定1

1 . 管理画面左側「設定」から「一般」をクリック。

WordPressサイトhttps設定2

2 . 一般設定の「 WordPress アドレス ( URL )」と「サイトアドレス ( URL )」を「 https:// 」から始まるURLに修正。

3 . 「変更を保存」をクリックして一般設定の修正完了。

プラグイン『 Search Regex 』で内部リンクを全て https に置換

一般設定の修正だけでは、サイトの https ページ内に http リソースが混在しているので、WordPress 本文内の内部リンクや、img の内部画像リンクを全て https に修正する。

今回は『 Search Regex 』というプラグインで一括修正。

※SSL 証明書が正しくサーバーにインストールされているのにもかかわらず、https が正しく反映されない時は http リソースが残っている場合が多いので注意。

『 Search Regex 』のインストール方法

Search Regex

  1. 管理画面左側「プラグイン」から「新規追加」で『 Search Regex 』を検索。
  2. 『 Search Regex 』が表示されたら「いますぐインストール」をクリック。
  3. インストールが完了したら「プラグインを有効化」をクリックして有効化。

プラグインを直接ダウンロードして設置する場合は、下記からインストールして有効化。

『 Search Regex 』の公式サイトは ⇒ こちら

『 Search Regex 』を設定して http を https に置換

管理画面左側「ツール」から『 Search Regex 』をクリックして管理画面を開き、各項目の詳細を設定する。

Search Regex

  1. Source（検索・置換の対象を指定） ⇒ Post content
  2. Limit to（一度に置換する上限数） ⇒ No limit
  3. Order By（置換対象を検索した時の並び順） ⇒ Ascending
  4. Search pattern（検索する文字列） ⇒ SSL 化する前の URL
  5. Replace pattern（置換する文字列） ⇒ SSL 化後の URL
  6. Regex ⇒ 選択不要

各設定項目を上記のように設定したら置換作業を開始。

Search Regex

1 . 上記のように全ての項目を設定、入力して「 Search 」をクリック。

クリックすると、「 Results 」が表示され、下に置換対象が表示される。

2 . 「 Replace 」をクリック。

まだ置換が実行されずに置換前と置換後のソースコードの一覧（上の薄緑色部分が置換前の状態で、下の薄黄色部分が置換後）が表示されるので、ここで内容を確認する。

3 . 「 Replace & Save 」をクリックして一括置換スタート。

Search Regex

4 . 一括置換完了後、置換した文字列の数が表示される。

これで、WordPress サイト内のすべての http リソースが https に置換されたはずなので、確認してエラーが表示されなければ修正は完了。

置換出来なった箇所の確認と修正

SSLエラーメッセージ

完了だと思ったら、https に置換できていない箇所があったので上記のような警告表示が出てしまった。

まだ https ページに置換できていない箇所がある場合はアドレスバーに警告表示がでるので、Chrome デベロッパー ツールなどでエラー箇所を確認して修正。

※内部画像リンクではロゴマーク画像や、WordPress 本文内の内部リンクでは『 Page Builder by SiteOrigin 』などのプラグインで作成したページ内に置換が出来ていない http リソースが存在する場合があるので注意。（カスタムリンクで作成したメニューの URL などは見落としがち）

※外部リンクで http リソースのままでいい箇所も https に置換されてしまうので注意。

.htaccess にリダイレクト用のコードを追記する

次に、WordPress をインストールしている場合は、すでにサーバーのトップディレクトリに .htaccess ファイルが存在するのでダウンロードして、http: サイトにアクセスしたユーザーを https: サイトにリダイレクト（転送）するためのコードを書き込む。

.htaccess（ドットエイチティーアクセス）とは？

.htaccess は、Apache を用いた Web サーバの挙動をディレクトリ単位で制御することができるファイルのことで、アクセス制限をかけたり、あるページへのアクセスを別のページヘリダイレクト（転送）させたりすることができる。

今回は、下記のコードを記述して、http: サイトにアクセスしたユーザーを https: サイトにリダイレクトさせる Rewrite 機能を .htaccess に指定する。

.htaccess に記述するコードの内容

  • Rewrite 機能の指定子「 RewriteEngine 」は、機能自体のオン・オフを制御するので「 On 」を指定する。
  • 指定子「 RewriteCond 」には、「 %{HTTPS} off 」を記述して「 https ではない場合」という条件ルールを指定をする。
  • 指示子「 RewriteRule 」には、「記述した URL にリダイレクトする」という処理内容ルールを指定する。
  • [ R = 301 , L ]の R は「リダイレクト」、L は「適用したルールの終了」という指定、301 は、恒久的に移動するという指定。（一時的に転送する指定をする場合は 302 を記述する）

Rewrite（リライト）機能とは、Apache 1.2 で付け加わった機能で、アクセスのあった URL をウェブサーバー内部で正規表現で書き換えてから処理する機能のこと。

記述が完了したら、ダウンロードしたディレクトリにアップロードしてファイルを上書きする。

コードを記述するときに、.htaccessには、他にも index やキャッシュ等の設定が記述されていることがあるけど、一番上に記述する。

これでリダイレクト設定が完了で、http で得た検索エンジンの評価を、https アドレスに引き継がせることもできる。

WAF 設定を OFF にして403エラーを修正

これで、常時 SSL 化の設定完了かと思い「 https:// 」を冒頭に付けた URL でアクセスしたら、下記のような 403エラーが表示されてアクセス出来なかった。

WAF

ロリポップの 403エラーは WAF 機能によることが多いので設定を確認後修正。

WAF は、ウェブアプリケーションファイアーウォールの略で、不正アクセスを防ぐためのセキュリティー機能のこと。

1 . ロリポップのユーザー専用ページにログイン。

WAF

2 . 管理画面左側「 セキュリティ 」から「 WAF設定 」をクリック。

WAF設定

3 . 管理画面から対象ドメインの設定変更の「無効にする」をクリックして更新。

WAF設定

4 . 「 https:// 」の URL でアクセスできることを確認後、WAF は ON が推奨されているので、また有効に戻しておく。

予想以上に手間と時間が掛かってしまったけど、これで「 https:// 」の URL でアクセスできるようになったので、常時 SSL 化の設定が完了かと思いきや…。

Google Analytics と Google Search Console というサイト運営に必要不可欠な外部ツールの設定変更が…。

『常時 SSL 化後にやっておく Google Analytics と Google Search Console の設定』は ⇒ こちら

【 WordPressサイトを常時SSL化した後にするGoogle系外部ツールの設定 】へ