エックスサーバーでSSL対応させる方法

2017年10月おり、ユーザーがCrome(バージョン62)でHTTPページのテキストを入力すると、「保護されていません」という警告が表示されるようになるなど、たとえブログなどであっても、WebサイトのSSL対応は必須の時代となってきました。そこで本ブログもSSL対応しましたので、その際の手順をまとめてみました。

HTTPS でサイトを保護する|Googleヘルプ

HTTPS(Hypertext Transfer Protocol Secure)は、ユーザーのパソコンとサイトの間で送受信されるデータの完全性と機密性を確保できるインターネット接続プロトコルです。

【手順1】データベースのバックアップをとる

WordPressのバックアップを定期的にとることは、SSL対応でいろいろ設定をいじる場合以外でも、いろいろなリスクに備える上で必須と言っていいでしょう。とはいえ、定期的に手動でバックアップのは面倒なので、自動バックアップの設定をしていない方は、これを機に自動でバックアップするよう設定することを強くオススメします。

WordPressのバックアップは、「BackWPUp」というプラグインを使うと便利です。バズ部さんの記事が分かりやすいので、こちらを参考に設定してみてください。

BackWPUpで確実にWordPressのバックアップを取る方法|バズ部

HTTPS(Hypertext Transfer Protocol Secure)は、ユーザーのパソコンとサイトの間で送受信されるデータの完全性と機密性を確保できるインターネット接続プロトコルです。

【手順2】エックスサーバーでSSL設定を行う

続いて、エックスサーバーのサーバーパネルからの設定をします。
サーバーパネルにログインしてください。

次に、サーバーパネルから「SSL設定」をクリックし、次のページで、設定するURLを選択してください。

さらに、独自SSL設定の追加から、設定対象ドメインに独自SSL設定を追加するボタンを押してください。

ここで表示される「SSL用アドレス」をクリックすると、SSL対応したサイト(https://で始まるやつです)が表示されるのですが、設定完了まで最大で1時間程度かかります。気長に待ちましょう。(http://で始まるSSL対応していない方のサイトは通常通り表示されます。)

「SSL用アドレス」に登録されているURLでWebサイトが表示されるようになったら、次のステップに進みます。

【手順3】WordPressの設定からURLを変更する

WordPress管理画面の「設定>一般」のページを開きます。

次にそのページの中で、「WordPress アドレス (URL)」「サイトアドレス (URL)」のアドレスをhttps://で始まるアドレスに変更してください。

【手順4】内部リンクをhttpsに置換する

次に、Webサイトの内部リンクを「http://〜」から「https://〜」に変更します。一つ一つ設定すると面倒なので、ここでは「Search Regex」というプラグインを用いて変更していきます。

「Search Regex」使い方は、以下の記事が分かりやすいです。

Search Regexの使い方ーWordPressプラグイン【初心者向け】|TECH ACADEMY magazine

HTTPS(Hypertext Transfer Protocol Secure)は、ユーザーのパソコンとサイトの間で送受信されるデータの完全性と機密性を確保できるインターネット接続プロトコルです。

【手順5】.htaccessでリダイレクト設定する

「http://〜」にアクセスしてきたユーザーに対して、「https://〜」へリダイレクトさせる設定をします。 FTPソフトを利用して、「.htaccess」ファイルに以下のコードを追加しましょう。「.htaccess」ファイルは、「public_html」ディレクトリにあるのですが、FTPソフトで不可視ファイルを表示する設定にしていないと表示されないので注意してください。

.htaccess <IfModule mod_rewrite.c> RewriteEngine on RewriteCond %{HTTPS} !=on [NC] RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L] </IfModule>

「http://〜」でアクセスした時に、「https://〜」にリダイレクトされることを確認したら、次のステップに移ります。

【手順6】安全な接続状態になっているかチェックする

ここまで設定できたら、「Google Chrome」でアクセスし、緑の鍵マークと「保護された通信」というテキストがつくことを確認してください。

緑の鍵マークがつかない場合は、GoogleChromeのデベロッパーツールのConsoleタブをチェックします。すると、エラー箇所が表示されるので修正していきましょう。画像ファイルが「https://〜」としてリクエストさせられるべきものが、「http://〜」としてリクエストされているパターンが多いと思います。該当箇所のURLを訂正すればOKです。サイトのロゴを画像データで設定している場合や、Custom CSSでbackgroundに画像を入れている場合などは、手動でURLを書き換える必要があります。

緑の鍵マークが表示されたら、

【手順7】デザイン崩れがないか確認する

たまに、SSL対応するとデザインが崩れてしまうことがあるようです。デザイン崩れがないかチェックしましょう

【手順8】アナリティクス・サーチコンソール等のURLを変更する

Googleアナリティクス、サーチコンソールに登録しているWebサイトのURLを「https://〜」に変更しましょう。

コメントを残す