最近ブログを再開したのですが、久しぶり見てみるとブログの世界も大きく変わっていました。
非常に多くのサイトがSSL化に対応されています。
個人が運営するサイトでも作る側と見る側双方安全にということでしょう。
当ブログは、ロリポップレンタルサーバーを使いWord Pressで作成してるのですが、ロリポップでは独自SSL機能を無料で使うことができるので、重い腰を上げ思い切って私もこのサイトの常時SSL化に挑戦してみるとにしました。
結果から言いますと、これが意外と簡単。
少しの時間とちょっとした手直しで終わってしまいました。
ここではロリポップレンタルサーバーに契約しWord Pressを使ったサイトでの常時SSL化の手順を簡単に説明していきます。
目次
常時SSL化とは？
SSLとは、Secure Sockets Layerの略でインターネットでの通信のやり取りを暗号化する技術のことです。
サイトを常時SSL化するということは、通信を暗号化することによりセキュリティーを強化した安全なサイトにするということ！
最近ではGoogleさんもサイトのSSL化を推奨していますよね。
SSLサイトの表示
SSLに未対応のサイト「http://〜」では、URLの前に【iマーク】と『このサイトへの接続は保護されていません』と表示されます。
そしてSSLに対応しているサイト「https://〜」では、緑色で『保護された接続』と表示され鍵マークがつきます。
最近ではSSLに対応したサイトが多くなってきていますが、「保護されていない接続」と表示されるとサイトを閲覧されている方は少しセキュリティー面で不安になってしまいます。
ロリポップレンタルサーバー 無料独自SSL
サイトをSSL化するには、いろいろな手続きや料金が必要となってきます。
ここで説明するロリポップレンタルサーバーでは、簡単な手続きだけで無料SSLを使うことができます。
ロリポップの独自SSL化設定は非常に簡単！
WordPressサイトを常時SSL化（http://⇒https://）するにはSSL証明書というものが必要となります。
通常、この証明書の発行には手数料がかかりますが、ロリポップレンタルサーバーの独自SSL設定は無料ですることが出来ます。
ようやくここからが本題となります。
ロリポップの無料独自SSLは一度設定したら解除ができません！
ここからの作業はバックアップをとってから行なって下さい！
WordPressのバックアップをしたことがないという方は、以下のサイト全体を手動でバックアップする方法を参考にしてみて下さい！
ロリポップの独自SSL設定をする！
①ロリポップのユーザー専用ページから【セキュリティー】から【独自SSL証明書導入】をクリック。
②［SSL保護されていないドメイン］からSSL化したいドメインにチェックを入れ［独自SSL（無料）を設定する］をクリック。
③ステータスが「SSL設定作業中」に変わります。
④数分後、リロードするとステータスが【SSL保護有効】に変わります。
これでロリポップでの設定は完了です。
Word Pressの設定を変更！
ロリポップでのSSL設定が完了したら次はWordPressの設定に移ります。
上記でサイトのSSL化は出来ているのですが、今の状態では「http://〜」と「https://〜」が混在している状態になっています。
ここで全てのページを常時SSL化『https://〜にURLを統一』するためにWordPress側の設定をしていきます。
WordPressのダッシュボードから【設定】【一般】へと進み、「WordPressアドレス（URL）」と「サイトアドレス（URL）」を「https://〜」から始まるURLに変更し【変更を保存】をクリックします。
この時点で強制的にログアウトされる（URLが変更されたため）ので、再度WordPressにログインします。
再ログインしたら管理画面のURLをチェックして下さい！
「https://〜」ではじまるURLになっています！
これでWordPress側の設定は完了です！
内部リンクをプラグインを使って「https://〜」に置換する！
東京バード
なつおくん
今の状態だとページ内に「http://〜」からはじまるURLが混在している状態となっています。
画像リンク（アップロードした画像）や内部リンク（関連記事など）などページ内にある全てのURLを「https://〜」からはじまるURLに変更しないと『保護された通信』と表示されません。
ここで『Search Regex』というプラグインを使って「http://〜」を「https://〜」に一括で置換していきます。
ここではプラグインのインストール方法などは割愛させてもらいます。
【ツール】から【Search Regex】をクリックし、設定画面を開きます。
設定するのは①②③の3ヶ所のみです。
- ①は［Post content］を選択。
- ②［Search pattern］は、「http://サイトドメイン」を入力。
- ③［Replace pattern］は、「https://サイトドメイン」を入力。
私のサイトの場合、こんな感じになります。
［Search］をクリックで置換対象が表示されます。
［Replace］をクリックし置換前と置換後のコードが表示されます。
「http://〜」からはじまるアドレスが全て「https://〜」に置換されることが分かります。
確認し特に問題がなければ［Replace＆Save］をクリックして実際に置換を実行します。
上記をしっかり確認＆バックアップをとるなど事前に行っておきましょう！
これで全てのページが常時SSL化され『保護された通信』と表示されているはずです。
東京バード
まだ、「https://〜」に置換されていない部分がある、つまりページ内に「http://〜」 で書かれた部分が一つでも存在すると鍵マークは表示されません。
それでは一つ一つ探していきましょう！
『保護された通信』と表示されないページの修正
ページ内に存在する全てのURLが「https://〜」になっていないとそのページは常時SSL化『保護された通信』された状態にはなっていません。
ここからは、サイトによって多少の違いがあると思うのですが私が修正した箇所で説明していきます。
私が修正した場所は、ウィジェット内のリンクとメニューバーのカスタムリンク内、あとタイトルロゴのURLに「http://〜」で書かれ部分が存在していたため『保護された通信』と表示されていませんでした。
ウィジェットのリンクを「https://〜」に変更！
プラグイン「Search Regex」ではウィジェット内のカスタムHTMLで書かれた部分までは置換されません。
ウィジェット内のカスタムHTMLで書かれた「http://〜」があれば「https://〜」に書き換えておきましょう。
メニューバーのカスタムリンクを「https://〜」に変更！
メニューバーのカスタムリンク内にも「http://〜」で書かれた部分がありました。
ここもしっかり「https://〜」に書き換えておきましょう！
タイトルロゴのURLにも注意！
私の場合、上述まで試してもいっこうに『保護された通信』と表示されず焦っていましたが、ようやく発見！
全てのページで使われているタイトルロゴのURLが変更されていませんでした。
タイトルロゴはWord Pressの場合、テーマの外観設定画面などから設定します。
プラグインではその内容まで置換されませんので当然ですよね！
意外な穴でした！
私の場合、上述までの設定を変えて無事『保護された通信』と表示かれ常時SSL化された状態となりました。
しかし個別のページで見ていくと、SSL化されていないページもあります。
例えば、昔貼ったカエレバのリンクがあるページなどです。
最近のカエレバはSSLに対応されているみたいで、新たにリンクを貼り直せば対応できそうです。
他にも昔貼った外部リンクなどを個別ページごとにチェックしていく必要があります。
301リダイレクトの設定をする！
最後に『301リダイレクトの設定』をしていきます。
参考 ページの URL の変更と 301 リダイレクトの使用Search Console ヘルプ検索エンジンの結果で表示されるページの URL を変更する必要がある場合は、サーバー サイドの 301 リダイレクトを使用することをおすすめします。これは、ユーザーや検索エンジンが正しいページにたどり着くことを保証する最善の方法です。ステータス コード 301 は、ページが別の場所に完全に移転したことを意味します。
東京バード
なつおくん
「.htaccess」にリダイレクト用のコードを追記する！
この『301リダイレクトの設定』はいたって簡単！
WordPressの「.htaccess」ファイルに以下のコードをコピペするだけ！
FTPソフトを使ってWordPressの「.htaccess」ファイルにアクセスします。
この記事を見ている方はおそらくロリポップサーバーを使われているユーザーの方だと思うので、ここでは「ロリポップ！FTP」を使って説明していきます。
ロリポップ！のユーザー専用ページから「ロリポップ！FTP」にアクセスし、「.htaccess」ファイルをクリック。
以下のコードを「#BEGIN WordPress」よりも前の行にコピペします。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>
上記のコードの記述を完了したら、試しにご自分のサイトの「http://〜」ページにアクセスしてみて下さい。
自動的に「https://〜」のアドレスにアクセスされていると思います。
これで設定は完了です！
常時SSL化完了後は、Google AnalyticsとSearch Consoleの設定も変更しておこう！
無事サイトの常時SSL化が完了したら、Google AnalyticsとSearch Consoleの設定も見直しておきましょう！
別記事で詳しく解説していますのでそちらを御覧ください。
まとめ
以上、私が自分のサイトを常時SSL化した手順を説明させてもらいました。
最後に、今回このサイトを常時SSL化するにあたって非常に参考にさせてもらったサイトをご紹介します。
参考 ロリポップが無料の独自SSLを導入！WPのサイトを常時SSL化する手順赤ちゃん絵本のWEB図書館 参考 WordPressサイトにロリポップの独自SSL(無料)を設定する方法Hovys
非常に分かりやすく解説されていてお手本にさせていただきました。
おかげさまで、このサイトも無事にSSL化することができました。
本当に感謝！感謝です。
これから常時SSL化に挑戦してみようという方は、上記サイトも含めこの記事がお役に立てればと思います。
コメントを残す