ロリポップ!レンタルサーバーの WordPress を SSL 化(https 化)する手順

2017/08/31

ロリポップ!レンタルサーバーでは2017年7月11日より、ライトプラン以上でドメイン認証型 SSL 証明書「Let’s Encrypt」を無料で設定できるサービスが追加されました。

無料の独自SSLがご利用いただけるようになりました! – レンタルサーバーならロリポップ!

今ご覧いただいているサイト NJ-CLUCKER は「エックスサーバー」で運営していますが、他のサイトはロリポップ!レンタルサーバー上で WordPress を利用して構築しています。今回は、ロリポップ!サーバー上にある WordPress のサイトを SSL 対応させる手順について説明してしていきます。

ロリポップ!レンタルサーバー

なお、エックスサーバー上の WordPress のサイトを SSL 対応した手順については、以下の記事に詳しく掲載しているのでそちらを参考にしてください。

エックスサーバー上の WordPress 構築サイトを SSL 化した手順
エックスサーバーでは2016年6月30日より、全てのプランにおいてドメイン認証型SSL証明書「Let’s Encrypt」を無料・無制限に設定できるサービスが追加され...

SSL 化の対応で必要なこと

読み込みデータを全て https に変更する

  • ロリポップの管理画面から SSL 設定を行う
  • サイト内にある http でアクセスしている箇所を全て https に変更する
  • WordPress のアドレスを https に変更する

これらの手順は絶対に対応が必要なものです。2つ目の項目は、例えば CSS や JavaScript のファイル、ページ内で読み込む全ての画像等、直接参照する「外部ファイル」の URL を変更することを示しています。

なお、参照ファイルを https に変更せずにそのままにしておくと「ミックスドコンテンツ」と呼ばれる http と https が混在している状態になり、せっかくメインのアドレスを https に対応させても、サイトそのものは SSL 化したとは言えなくなるのでご注意ください。

最終的に、全て https で参照したファイルで構成されたページに仕上げることが SSL 対応のゴールになります。

ちなみに、内部リンク(自身の別のページへ飛ぶためのリンク)も https に書き換えるのが望ましいですが、WordPress の URL 設定を変更したり http でアクセスしたら自動的に https に切替えるように後半の手順で対応するので、あまり難しく考える必要はありません。

SSL 対応後に変更を要するもの

  • Google Analytics の設定を https に変更する
  • Google Search Console に https 版のページを新規登録する
  • .htaccess で https へ 301 リダイレクトさせる

これらの項目は、人によって不要なケースもあります。Google 関連のサービスを利用しているユーザーであれば必須になるので、ここは必要に応じた対応を行ってください。なお、最後のリダイレクトとは http でアクセスした場合に自動的に https へ変換する処理を加えるもので、検索サイトからのアクセスが多いサイトを運営している人は絶対に対応しておくべき項目です。

それでは具体的な手順を確認していきましょう。

作業前のバックアップ

http から https へ変更するにあたり、途中で手順を間違えてデータがおかしくなると元に戻すのが大変なので、バックアップは必ず取得してください。

データベースのバックアップ

データベースは MySQL のエクスポート機能を用いてバックアップします。手順は、以下のページ内にある「ロリポップ!データベース上のデータをエクスポート」を参考にしてください。

ロリポップからエックスサーバーへドメインごと移行する方法
先日ロリポップからエックスサーバーへレンタルサーバーを変更したことをお伝えしましたが、今回は具体的な手続き方法について説明していきます。手順は以下の通...

テーマファイルのバックアップ

僕の場合、テーマ内のファイルに独自の修正を加えているため、そちらの URL を https に書き換える必要がありました。WordPress のテーマファイルに修正を加えていない人には不要な手順です。

テーマのバックアップは FTP を使って取得してください。Web ツールの「ロリポップ!FTP」ではファイルをまとめてダウンロードできないため、必ず FTP 専用ソフトを利用する必要があります。FTP については、公式サイトで細かく説明しているページがあるので、必要な方は参考にしてください。

ロリポップ!FTP の設定方法

http でアクセスしている箇所を https に変更

サイト内の画像データの URL 変更

こちらは自身がアップロードした画像ファイルのリンクの URL 変更です。この段階では https でアクセスできないため、プロトコルを外す作業を行います。

つまり img タグの src 属性を

http://(ドメイン)/wp-content/uploads/…

から

//(ドメイン)/wp-content/uploads/…

へ変更します。

この http: 部分はプロトコルと呼ばれているもので、URL からこの文字列を取り除いた場合、現在アクセスしているページのプロトコルに基いて参照するような仕組みになっています。つまり現在開いているページが http: でアクセスしていれば、このページ内にある画像ファイルは http: で参照し、https: で開いていれば https: で参照してくれます。

ただ、投稿ページや固定ページ上の画像リンクを1つ1つ修正するのは大変です。WordPress の場合、記事内のデータを一括で置換することができるプラグイン「Search Regex」を使えば、簡単に変更できます。具体的な利用方法は、こちらのページを参照してください。

WordPress の記事内容を一括で置換できるプラグイン Search Regex
SSL 化に伴い内部リンクを http から https へ変更したい。HTML タグを一括置換したい。そんな時に、過去の全ての投稿を対象に検索を行って、一括置換が行...

上記で記した img タグの src 属性を置換するには、次のような設定を行えば大丈夫です。

[Search pattern] src=”http://(ドメイン名)
[Replace pattern] src=”//(ドメイン名)

同様に a タグの内部リンクも変更してしまいましょう。先程は src 属性の置換を行いましたが、今度は href 属性に対して同様の変更を行います。

[Search pattern] href=”http://(ドメイン名)
[Replace pattern] href=”//(ドメイン名)

外部ドメイン参照しているプロトコル変更

前項の手順は自身のドメインに対して対応したものですが、続いて外部ドメインの画像ファイルや iframe 要素、そして JavaScript ファイル等が http で取得されていないかチェックを行います。こちらも Search Regex を用いて、対象データの有無を検索します。

[Search pattern] src=”http://

この条件で引っ掛かるページが多いと、ちょっと面倒です。先程のように一括置換できないため、1つ1つチェックして変更を加えていきます。つまり1つずつ http から https に変更して、正しく参照できるかを確認します。

残念ながらサイトによっては http から https に変更したらアクセスできなくなるケースもあります。この場合は参照しているサイトが https に対応するのを待つか、https 用の別のアドレスが用意されているのであれば、そちらのアドレスに変更するようにしてください。

外部サイトへのリンク href でしている部分は http のままで残しておかなくてはいけません。内部リンクのように https へ変更したり http を消してしまうと、リンク先の SSL 未対応によりアクセスできなくなることがあります。

WordPress テーマ内の URL チェック

WordPress のテーマファイルも外部データを参照しているケースがあります。FTP でローカルにダウンロードして、1つ1つ確認してください。テキストエディタで Grep 検索を行うのが手っ取り早いですが、修正そのものは1つずつ行っていきます。

ここでの主な変更内容は「http」を「https」へ書き換えることです。内部リンクであれば、先程の置換処理と同様に「http:」を削除するだけでも構いません。修正が完了したファイルは再び FTP でアップロードして上書きしてください。

基本的にテーマファイルが外部データを参照するのは稀ですが、無いとは言い切れないためチェック項目として挙げさせていただきました。

テーマによっては WordPress のメニュー [外観] → [ガジェット] の設定項目が用意され、そこに自身の手でコードを入力していることがあります。ここはデータベースに書き込まれている内容であるため、ブラウザ上から開いて確認してください。

これで内部の URL の変更は完了です。

ロリポップ!レンタルサーバーの SSL 設定

続いてロリポップ上での SSL 設定です。ここでは無料で使える「Let’s Encrypt」を利用する前提で説明を進めます。まずはロリポップのユーザー専用ページへログインしてください。

ロリポップ!ユーザー専用ページ – ログイン

メニューから [独自SSL証明書] → [証明書お申込み・設定] を開きます。

「SSL 保護されていないドメイン」を開くと、まだ SSL 対応していないドメイン・サブドメインが表示されます。ここで SSL 化するものにチェックを入れて、右上の [独自SSL(無料)を設定する] をクリックします。

するとご覧のように [SSL 設定作業中] と表示が切り替わります。ここからサーバー側で自動的に処理が行われるので、約5分ほど待ちます。

再びメニューから [独自SSL証明書] → [証明書お申込み・設定] を開くと「SSL 保護されているドメイン」のリストに、先程 SSL の設定を行ったドメイン・サブドメインが表示されるようになります。この画面で「SSL保護有効」と表示されれば、ロリポップ上での設定は完了です。

設定したサイトの SSL 保護が有効になるまでは、ここから先の手順に進まないようにしてください。

WordPress の SSL 設定

続いて WordPress 上でアドレスが https に変わることを認識させます。WordPress にログインしてメニューの [設定] → [一般] を開き、URL を http から https に変更してください。対象項目は次の2つです。

  • WordPress アドレス (URL)
  • サイトアドレス (URL)

これで WordPress から生成される自サイトの URL が https バージョンに変更されます。

http から https への 301 リダイレクト設定

WordPress の URL を https に変更したので、http のアドレスへアクセスがあった場合に、自動的に https のページへリダイレクトするように設定します。WordPress をインストールしたディレクトリ直下にある .htaccess ファイルを開いて、先頭、もしくは末尾に次のデータを追記してください。

301 リダイレクト設定
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>

なお .htaccess ファイルは Windows であれば「メモ帳」で修正することが可能です。FTP でファイルを取得するか、ロリポップの Web ツールにある「ロリポップ!FTP」で該当のファイルを開いて、直接修正していただいても構いません。

修正後は FTP でアップロードして上書きします。あとは http:// で始まる URL にアクセスして、自動的に https:// に変わることを確認しましょう。

https エラーの有無をチェック

SSL 対応したページ内に http でアクセスしている箇所が無いか確認します。ここでは Chrome ブラウザを使ったチェック方法を紹介します。

本来であれば全てのページを開いて確認したいところですが、ページ数が多い場合は非現実的です。人によって確認すべきページは様々なので、一概には言えませんが、最低限確認すべきページは次の通りです。

  • トップページ
  • カテゴリアーカイブページ
  • 月別アーカイブページ
  • 投稿ページ
  • 固定ページ

パターンによって数ページを抽出して確認

トップページを除いて、それぞれ数ページをサンプルとして選び確認してください。特に投稿ページは外部サイトのファイルを参照しているページで、前述の手順で URL を変更したものを中心に選ぶと良いです。

確認すべき内容はミックスドコンテンツになっていないことです。

Chrome で対象のページを開いて URL の欄を確認してください。特に問題なければ左側に緑の鍵アイコンが表示され、横に「保護された通信」と記されます。もしここで問題があると、インフォメーションのアイコンが表示されます。

後者は https の設定が不完全であることを表しています。具体的には http のプロトコルで参照しているデータがあり、ミックスドコンテンツになっています。

このようなページがあった場合は、ソースコードを開いて http で参照している場所を探して修正してください。そして同様の問題が生じる可能性があるページも全て修正します。

レスポンシブデザインを採用していれば、基本的には複数デバイスの確認は不要ですが、スマートフォン用に wp_is_mobile() 関数等を噛ませて表示分岐をしている場合、必ずスマートフォンでの表示確認も行いましょう。

一通り確認が終わったら WordPress 側の修正は完了です。後は Google 関連のツール設定となるので、Google Analytics や Search Console を使っていない人はここで終了です。

利用する Google サービスの設定変更

Google Analytics の変更

Google Analytics

Google Analytics へアクセスして、対象サイトのページを開きます。画面左下にある [管理] を選択し、真ん中にあるプロパティの項にある [プロパティ設置] を開きます。

そして「デフォルトの URL」を http:// から https:// へ変更(プルダウン選択)して保存します。

同様に [管理] メニュー押下直後に、右側に表示されるビューの項にある [ビュー設定] を開き、「ウェブサイトの URL」をプロパティ設定と同様に https:// へ変更します。

これで Analytics の変更は完了です。

Search Console の変更

Search Console

サーチコンソールは今まで使っていた http 版 URL で登録された情報を https に変更することができません。よって https 版の URL を新規に登録し直さなくてはいけません。

トップ画面の右上にある [プロパティを追加] より https 版の URL を追加します。

所有権の確認が必要になりますが、そもそも http の状態で確認が取れているのであれば、特に何もする必要がなく、そのまま [確認] ボタンを押下することで所有権が確認されます。

あとは新しい URL になったサイトマップを送信すれば完了です。

Search Console へ登録するタイミングは、ロリポップ上で SSL の設定を行ってから1時間ほど時間を置いてから行ってください。https でアクセスできるようになっても SSL の証明書にドメインが登録されるまでタイムラグが生じることがあります。

もし Search Console への登録が早すぎると「SSL/TLS 証明書にドメイン名 https://○○○○○/ がありません」といったメッセージが届きます。Google からのメッセージは心臓に良くないので(笑)、時間に余裕を持って登録を行ってください。

Google から「SSL/TLS 証明書にドメイン名がありません」とメッセージが届いた原因を探る
先日、エックスサーバー上に構築したサイトの SSL 化を実施しました。WordPess 内のデータ変更から、利用している Google サービスの変更に至るまで。詳細...

これにて、ロリポップ!レンタルサーバー上で WordPress を SSL 化する作業は終了です。人によってはかなり多くの修正が必要になるものの、順調に進めば小一時間程度で終わらせられます。

もしかすると、ミックスドコンテンツのエラーがなかなか消えず苦労するかもしれません。しかしここは時間を掛けてでも、1つずつ丁寧にで問題点を修正するように努めてください。

以上、ロリポップ!レンタルサーバー上の WordPress 構築サイトを SSL 化する手順の紹介でした。

最新の更新情報は、Twitter、Facebook、Freedly にてお届け!

NJ-CLUCKER RSS

このブログの運営者

NJ

気力・体力勝負なシステム業界のエンジニアを経て、個人事業主として独立。Web サイト運営、動画制作など活動の場を広げています。

このブログでは、困ってたどり着いた人に、分かりやすく答えを提供できるように心掛けています。更新情報は、Twitter や Facebook ページを参照ください。フォローお待ちしています。

Facebook ページ NJ-CLUCKER
このブログが役に立ったら
「いいね!」お願いします

サイト内検索

Amazon cyber monday 2017