【ロリポップ】独自SSLが無料に！WordPressのSSL化（https化）全手順

ロリポップレンタルサーバーが2017年7月11日から、無料の独自SSLを導入できる機能の提供を開始しました。

参考2017/07/11 無料の独自SSLがご利用いただけるようになりました！/LOLIPOP!レンタルサーバー

サイトに独自SSLを導入することで通信データが暗号化され、セキュリティ強化、ユーザーからの信頼性の向上、Googleからの評価アップなど多くのメリットを得ることができます。

下記はパソコンのGoogle Chromeのアドレスバーのキャプチャですが、SSLを導入していないサイトは、アイコンをクリックすると「このサイトへの接続は保護されていません」と表示されます。

独自SSL導入後は、緑色の鍵アイコンが付き、それをクリックすると「保護された接続」と表示されるようになります。
『安全なサイトである』という証明のようなものですね。

実はこのロリポップの独自SSL無料提供開始のビックニュース。
私、全然知らなくてですね...。

以前までロリポップで独自SSLを導入するには、1ドメイン毎に追加料金が必要でした。
・・なんと月額2000円。

高っ！

複数サイトに導入するとサーバー代金が莫大な金額に。

それならば...と、重い腰を上げてサーバー移転の作業を始めようとした矢先に、Twitterでお世話になっている方から教えていただいた情報でした。ありがたい限りです。

サイト運営は「少ない費用で気軽に始められる」という点が最大の魅力だと思うんですね。
WordPressサイトでの利用では、低価格の月額250円からプランの選択が可能なロリポップレンタルサーバー。
今まで長年お世話になってきました。

月々のサーバー代金のみで独自SSLを導入できるようになったことで、これからも利用を続けられるようになりとても嬉しいです。

それでは早速！ということで、通常のWordPressとサブディレクトリ型でマルチサイト化したWordPressの両方のSSL化を行いました。

ここでは、マルチサイト化していない通常のWordPressサイトのSSL化（https化）の全手順を記録していきます。

マルチサイト化したWordPressのSSL化についてはこちらをご参照ください。
※ページ内のリンクは右クリックで別タブで開くことができます。

作業にあたり、下記ページを参考にさせていただきました。
SSL化のメリット・デメリットを含め、全ての手順をわかりやすく解説してくださっているのでとても助かりました。

参考1エックスサーバーの無料独自SSLを利用してWordPressをSSL化（HTTPS化）してみた/Life Jam
参考22017年版: WordPressでのhttpからhttpsへの詳細移行ガイド/ブロギングライフ

また、ページ数が多い長期運営サイトなど、SSL化後に鍵アイコンが表示されない原因が見つからないという場合は、様々な確認方法や対処法を掲載されている下記ページが参考になります。

各サイトの運営者様へ、この場をお借りして感謝御礼申し上げます。

参考3WordPressをhttpからhttpsにSSL化した全手順まとめ（エックスサーバー環境）/寝ログ

サイトのSSL化は、まとまった時間があれば比較的簡単に作業を進めていくことができます。

そして、確認や修正作業は一度に終わらせなくてもご自身のペースで行うこともできるんですね。

間違いなく言えることは...

できるだけ記事数は少ない段階の方が楽ちん♪

後回しにしてしまっていた方もこの機会に挑戦してみませんか？

主要ファイルとデータベースのバックアップ

SSL化の作業に入る前に、万が一のトラブルに備えて主要ファイルとデータベースのバックアップをとっておくと安心です。

WordPressのバックアップは色々な方法がありますが、当ブログでのバックアップ方法は下記ページで説明しています。

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

ロリポップにログイン→左側のメニュー→「独自SSL証明書」をクリック。

下記のようにドメイン一覧が表示されます。

SSL化したいドメインにチェックを入れて「独自SSL（無料）を設定する」をクリックです。

しばらくは「SSL設定作業中」と表示されますが、5分ほど待ってからF5キーでリロードすると「SSL保護有効」となり、レンタルサーバー側でのSSL化が完了します。

WordPressのサイトアドレスを変更

WordPressダッシュボード→設定→「一般」をクリック。

「WordPress アドレス (URL)」と「サイトアドレス (URL)」両方のアドレスの先頭部分を『https』に変更します。

403エラーになる場合

403エラーでサイトにアクセスできなくなった場合は、WordPress側の設定→「一般」のアドレスを一旦http://に戻してから、ロリポップ（サーバー側）の管理画面→左側のメニュー→セキュリティー→「WAF設定」を無効に。
時間を置いてアクセスできるようになるか確認→表示確認ができたらWordPressのアドレスをhttps://に変更→WAF設定を再び有効にしてみてください。

内部リンクと画像URLの一括置換作業

既に投稿記事が存在している場合、上記作業を終えた時点ではダッシュボードのみ緑色の鍵アイコンが表示されている状態かと思います。

トップページや投稿ページに鍵アイコンが表示されないのは、内部リンクや画像URLが『http』のままになっているのが原因。

投稿ページ数が少ない場合は1つひとつ手動で修正してもOKですが、プラグインを利用して一括置換を行うとスムーズに作業が進みます。

プラグインを利用する場合は、WordPressダッシュボード→プラグイン→新規追加→検索欄に「Search Regex」と入力して表示されるプラグインをインストール→有効化。

WordPressダッシュボード→ツールに「Search Regex」という項目があります。

下記赤枠部分の上段には『http』で始まる置換前のURL。
下段には『https』で始まる置換後のURLを入力後「Replace」をクリック。

置換が行われるソースコードの一覧が表示されますので、確認後、問題が無ければ「Replace＆Save」をクリックです。

ここまでの作業が終了したら、トップページから順番に表示確認をしていきましょう。

手動で修正が必要だった部分

今回のSSL化で手動で修正が必要だった部分です。
当ブログで利用しているWordPressテーマ「AFFINGER4」以外のテーマに該当するものも含まれていますので、あくまでも参考程度にご覧になってくださいね。

SSLのエラーチェックには、先にご紹介した寝ログ様の記事内の「Firefoxの開発者ツールでチェック」という項目が大変参考になりました。
※Firefoxで表示しているページで「F12キー」→「コンソール」

AFFINGER4のAMPページエラーの対処法

独自SSL導入後、WordPressテーマ「AFFINGER4」でAMP化しているページにエラーが出るようになりました。

「AMP Validator」のエラーメッセージ。

Googleの「AMPテスト」でのエラーメッセージです。

いずれも「AMPページに必須のロゴ画像の高さを指定するコードが見つからないよ」ということが書かれています。

このエラーの対処法は、Twitterでお世話になっているsorayori様の下記ページを参考にさせていただきました。

実は、SSL化後にAMPページのエラーに気が付いておらず...。しかも、自分の知識では解決できずにいたかもしれません。
感謝を込めて、ありがとうございます。

参考WordPressで独自SSLをうまく設定できないときの対処法とAMPやgoogleのこと/sorayori

当ブログの場合は、小さなサイズのロゴ画像を使用していますので、変更コードの中の「layout="fixed"」はそのままで、画像の幅と高さを指定するコードのみを追加しました。

また、AMPページのフッターにもロゴを表示させていますので、「st-footer-content-amp.php」（子テーマ）も同様に編集を行いました。

詳しい手順は参考サイト様をご確認ください。

リダイレクトの設定

変更前の『http』から始まるURLにアクセスがあった場合に、自動的に『https』から始まるURLにリダイレクトを行うための設定を行います。

私の場合は、ロリポップのFTPに直接コードを追加しましたが、FTPソフトを使ってパソコンにダウンロードしたファイルをテキストエディタで編集後にアップロードする方法でもOKです。

ロリポップのFTPに直接コードを追加する場合は、ロリポップ→左側のメニュー→WEBツール→「ロリポップ！FTP」→一番上の階層のファイル名→「.htaccess」をクリック。

万が一のトラブルに備えて必ずファイル内のコードを全てメモ帳にコピーしてから、一番上に下記コードを追加します。

追加後はこのようになります。（マルチサイト化していない所有サイトの場合）

ここまでの作業が完了したら、アドレスバーに変更前の『http』で始まるアドレスを入力し、トップページや投稿ページが『https』で始まる緑色の鍵アイコンが表示されるページに正常にリダイレクトされるかどうかをご確認ください。

SSL化でリセットされるSNSシェア数の引継ぎ

SSL化によってサイトアドレスが変更されるため、今までのSNSシェア数はリセットされてしまいますが、プラグイン「SNS Count Cache」を使用することで、変更前と変更後のシェア数を合算して表示することができます。

詳しくは、こちらの記事内で説明しています。

Googleアナリティクスの登録変更

あともう少しでゴールです。
頑張ってくださいね。

Googleアナリティクス→左側のメニュー→一番下にある「管理」→「プロパティ設定」→「デフォルトのURL」の下記赤枠部分を『https://』に切り替えます。

IPアドレス除外設定等で、ビュー設定を行っている場合は、「管理」→「ビュー設定」→「ウェブサイトのURL」の部分も同じように切り替えてください。

Googleサーチコンソールへの再登録とサイトマップ送信

Googleサーチコンソールは、登録変更ではなく『https』で始まるURLで新規にプロパティを追加してサイトマップを再送信する必要があります。

詳しい手順は下記ページで説明しています。

変更前のプロパティは、ホーム一覧の右端にある「プロパティの管理」→「プロパティを削除」をクリックして削除してしまってOKです。

サイト登録先のURL変更作業

最後に、今までにサイトURLを登録していたSNSなどの変更作業を行います。
あらかじめリダイレクトの設定をしていますから、こちらの作業はゆっくりでも問題ありません。

思いつく範囲で...。

すべての作業が終了したら、URL置換に使用したプラグイン、メモ帳にコピーしたコードなどは削除してくださいね。

お疲れ様でした。

以上、独自SSLの無料提供がスタートしたロリポップレンタルサーバーでのWordPressのSSL化（https化）の全手順をご紹介しました。

最後までお付き合いくださりありがとうございます。

晴れてアドレスバーに緑色の鍵アイコンが「ピカリン♪」と表示されますようにとお祈りしております。