サイトをSSL化する方法～エックスサーバー編

2017年7月1日2018年6月16日

エックスサーバーではサイトの全SSL化（http→https）が無料で行えます
新しくサイトを作るなら記事を投稿するより先にやっておいた方が、後でやるより手間がかからないので、最初にやっておくのがおススメです

サイトの全SSL化はなんのためにするか

全SSL化をなぜするかというと1つはサイトの安全性をアピールする事ができるからです

以前はショッピングサイトやログインページなど個人情報を入力するページのみに利用される事が多かったのですが、全SSL化をすることで全てのページが安全であるとアピールできればサイトの訪問者は安心して閲覧できますよね

更にもう1つの理由がサイトの安全性に関してGoogleもユーザー保護の観点からSSLの実装をSEO上の基準の1つとする事を発表していることがあげられます

ですのでSSL化することで検索結果が1つでも上にいくならやっていて損はないと思います
昔からやっている老舗サイトはSSL化に対応していない事もあるため、新規サイトが差を縮める要素になりえるとも思います

SSL化の手順

エックスサーバーでSSL化することが前提となっています

• エックスサーバーでSSL化の設定を行う
• WordPressのURLを変更する
• .htaccessを編集する

エックスサーバーでSSL化の設定を行う

エックスサーバーのサーバーパネルにログインして「SSL」設定をクリック

SSL化したいサイトのURLの「選択する」をクリック

「独自SSL設定の追加」タブから「独自SSL設定を追加する（確定）」をクリック
※CSR情報を入力するはチェックしなくていいです

独自SSL設定の追加が完了するとこの画面になります

1時間ほどかかるようなのでしばらく待ちましょう
SSL設定の一覧タブを開いて見てみるとサイトのURLが”https”で始まっているのが確認できます

WordPressのURLを変更する

WordPressの設定-一般から一般設定で「WordPressアドレス（URL）」と「サイトアドレス（URL）」の”http”を”https”に変更して下にある「変更を保存」をクリック

.htaccessを編集する

SSL化しても”http”でアクセスする人やブックマークしている人の為に”http”でアクセスしてきたら”https”のURLに自動でリダイレクトしてもらうために.htaccessを編集します

なお失敗が許されないので編集前の.htaccessは保管しておきましょう
FTPソフトを用意して.htaccessをダウンロードしておきます
全ての作業が終了して問題なく動いているのを確認できたらダウンロードした.htaccessは削除してもいいです（1か月くらいは様子をみましょう）

ちなみに私が使っているFTPソフトは「FFFTP」です
窓の杜とかでダウンロードできます

.htaccessは”自分のサイト/public_html”の中にあるので.htaccessをいったんPCにダウンロードしたら、エックスサーバーのサーバーパネルから「.htaccess編集」をクリック

ドメイン選択画面から編集する.htaccessのあるURLの「選択する」をクリック

.htaccess編集タブを選んで

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

を一番下にコピペして「.htaccessを編集する（確認）」をクリック

確認画面に移るので「.htaccessを編集する（確定）」をクリック

これで設定が完了しました

念のために”http～自分のサイト”とURLを入力すると”https～自分のサイト”に飛ぶことを確認してみて下さい
無事に”https～自分のサイト”が表示されれば成功です

※もしエラーがでるならコピーしておいた.htaccessを戻すか、追記した部分を消すなりして改めてチャレンジしてみて下さい

鍵付きマークが出ればOK

ここまでやっていればブラウザのURL欄に鍵付きマークが出るはずです

これはChromeの場合のものですが、このようになっていれば常時SSL化できたことになります

SSL化できていない場合は鍵の部分に”！”がつきます
この”！”が出てしまっているのはブログ記事内の内部リンクや画像のアドレスが「http」になっているからです

これらを「http」から「https」に変える作業をしなければならないのですが、これは手入力で直してもいいし、プラグインの「Search Regex」というのを使ってもいいです

Search Regexの使い方についてはこちらのサイトを参考にさせて頂きました

以前に私が1つ目のブログをSSL化した際には背景画像のアドレスが「http」だったため、SSL化できなかったという落とし穴がありました
（背景画像に問題があったことにたどり着くまで数時間かかりました）

また、なぜ鍵付きマークがつかないのか見当もつかないよ、という方にはChromeを使っているならF12キーを押せばデベロッパーツールが立ち上がるのでそれでおおよその検討をつけることもできます

ぜひともサイトの全SSL化に挑戦してみてくださいね

サイトをSSL化した後のグーグル系ツールの設定の仕方はこちらです