【ホームページ】サイトをSSL化し安全性の高いサイトにする(失敗談もあり)【エックスサーバー】

今後、新しくサイトを作ったら最初に設定します・・・。

 

このサイトの変化にお気づきでしょうか?

画面上部のアドレスバーをご覧ください。

以前はこうでしたが、

 

こうなりました。

 

鍵が付いていますよね。(この画像はChromeの画面)

これはサイトの安全性が高いことを表しています。

この状態にすることを「SSL化」といいます。

今回はサイトをSSL化する方法を記録しておきます。

 

最初に言っておきますが、もし新しいサイトを作ったら記事を書く前にSSL化します!

記事がたくさんある状態でSSL化すると、驚くほど大変な目に遭います!

それも含めて、何を行ったかをすべて記録していきます。


SSL化とは?

SSL化とは、自サイトのWebページをすべて暗号化し、セキュリティを高めることです。

これを行うことにより、サイトが安全なコンテンツであることを示すことが出来ます。

 

SSL化されているかどうかは、アドレスバーを確認すれば一目瞭然です。

先ほど確認したように鍵マークが表示され、URLの最初が「https」になります。

SSL化していない場合のURLは「http」から始まります。

URLが「http://~」から「https://~」に変わるということですね。

SSL化のメリット

SSL化することでサイトの安全性を高めることが出来ます。

また、GoogleはSSL化を推奨しているそうなので、検索エンジンからの評価が高まり検索順位の上昇も狙うことができます。

他にも色々調べると、サイトの表示スピードが上がったという話もあったため、SEO対策(検索エンジン対策)としては非常に良いみたいですね。

エックスサーバーならSSL化が無料

サイトをSSL化する際は、本来なら証明書等を用意するために年間数千円~数十万円の費用がかかります。

しかし、エックスサーバーなら、なんと無料でサイトのSSL化が出来ます!

関連:エックスサーバー(Xserver)の申し込み方法とキャンペーンドメインの取得

 

じゃあやってみよう!

 

ということで、サイトをSSL化してみました。


サイトをSSL化する

サイトのSSL化は、エックスサーバーならものすごく簡単にできます。

たったの3ステップです!

①SSL設定をする

まずはエックスサーバーのサーバーパネルにログインします。

右上にある「ドメイン」から「SSL設定」をクリックします。

 

ドメイン一覧から、SSL化したいサイトのドメインの「選択する」をクリックします。

 

「独自SSL設定の追加」をクリックします。

 

「独自SSL設定を追加する(確定)」をクリックします。

「CSR情報(SSL証明書申請情報)を入力する」のチェックは、企業などの場合に付けるものなので、個人の場合には付ける必要はありません。

 

数十秒~数分待つと追加され、「SSL設定の一覧」に戻るとURLが表示されています。

クリックすると、以下の画面になるのでびっくりしますが、問題はありません。

追加後すぐにアクセスすると、この画面になります。

数十分~1時間ほど待ってからアクセスすると、ちゃんとサイトが表示されますので、しばらく待ちましょう。

 

サイトが表示できるようになったら次のステップに進みます!

 

②.htaccessを編集する

サイトの表示が出来たら、次は「http://~」にアクセスされた際「https://~」に転送されるように設定していきます。

 

.htaccessを編集することで転送設定ができますが、注意点があります。

.htaccessの内容は自動的に記述されている部分もあるため、自分の判断で削除しないようにしましょう。上手くサイトが表示されなくなる可能性があります。

 

それでは編集していきます。

エックスサーバーのサーバーパネル右側の「.htaccess編集」をクリックします。

 

「.htaccess編集」タブをクリックします。

 

一番下に、以下の記述を#BEGIN WordPressの下に追加し「.htaccessを編集する(確定)」をクリックします。

 

 

こちらの内容はエックスサーバーマニュアルのページにも記載されていますので、そちらからコピペでOKです。間違えて、最初から記入されている文字列を消さないように注意してください。

また、貼り付け場所を一番下にしてしまうと、トップページ以外のリダイレクトがされなかったので、貼り付ける位置も上記画像と同じようにしてください。

 

以上で.htaccessを編集が完了です。

次で最後のステップです!

 

ここの編集で不安なことや疑問点がある場合は、詳しい人に質問してみるのが良いと思います。

まわりにそういう人がいない場合は質問サイトを活用しましょう。

ヤフー知恵袋はちょっと信用できない回答もあるかもしれないので、エンジニアが答えてくれる質問サイト「teratail(テラテイル)を使うと安心です。

関連:プログラム系質問サイト「teratail(テラテイル)」が初心者に優しすぎてスゴイ

③WordPressの設定を変更する

最後にWordPressの設定を変更します。

設定の変更後、再ログインが必要になるので、IDとパスワードを控えてから設定を変更していきます。

 

メニューの「設定」から「一般」をクリックします。

 

「WordPressアドレス(URL)」「サイトアドレス(URL)」の2か所を変更します。

最初はURLの先頭は「http://」になっています。

 

これに「s」を追記して「https://~」に変更します。

必ず小文字のsを追加してください。これを間違えるとログインできなくなる可能性があります。

 

最後に一番下の「変更を保存」をクリックしましょう。

ログアウトされますので、再度ログインをすれば変更が完了です。

 

以上でサイトのSSL化が終了です!お疲れさまでした!

 

サイトを作った直後ならね・・・

 


すでに記事があるサイトのSSL化

すでに記事があるサイトの場合、これだけではSSL化が完了しません・・・。

このサイトの場合、上記手順だけだとこうなりました。

「https://」にはなっていますが、鍵マークが表示されません。

これは、ページ内すべてがSSL化されていないのが原因です。

 

どこに問題があるのか・・・

 

これを探すのが、非常にめんどくさい作業でした。

原因を突き止めることが出来ましたので、修正すべきところがどこなのかをまとめておきます。

 

内部リンク

一番の原因はこれでした。

内部リンクはSSL化する前に設定したものなので、すべて「http://」のページで設定してあるので、SSL化できていないと判断されます。

なので、全ページのリンクを修正する必要があります。

 

めんどくさい・・・(泣)

 

と思ったら、楽に何とかする方法があったので、いったん保留して他の原因もチェックします。

アフィリエイト広告

A8.netやAmazonの広告に原因がある所が何か所かがありました。

A8.netは楽天の広告がSSL化に対応しきれいていないようでした。

Amazonの広告はバナーとウィジェットは、そもそも表示されなくなってしまったため、コード自体の修正が必要でした。

 

ここで思ったのですが、URLが変わったことを申請しなくてよいのか気になったので、問い合わせたりしました。

関連:知識ゼロから自分のサイトに広告を表示する手順まとめ<画像付き>

 

A8.netの場合

こちらは、サイトの登録情報を変更すればOKです。

A8.netのトップページの「サイト情報の登録・修正」から変更できます。

 

Amazonアソシエイトの場合

こちらはURLの変更方法が分からなかったので、問い合わせました。

「http」から「https」への変更に関しては、特に申請や変更の必要がないそうです。

ということで、安心してそのまま使用します。

 

googleアドセンスの場合

こちらは設定したURLを削除することが出来ないので、新しいサイトとして追加し、元のサイトを許可から外そうと思いました。

ところが、追加をしても新しくURLが追記されません。

「https」のサイトにアクセスした際もインプレッション数が増えたため、同一のサイトとしてみなされているようです。

なので、特に作業は必要ありません。

 

ということで、広告コードを修正する必要があります。

 

画像

トップページの画像など、外観で設定した画像がうまく「https」に切り替わっていないものがありましたので、チェックしてみましょう。

変更されていない場合は、外観の設定からもう一度画像を設定しなおせば上手くいきます。

 

メニュー

こちらも外観から設定したものです。

メニューの「ホーム」が「https」に切り替わっていませんでした。ほかのものは大丈夫だったので、初めから存在していたパーツの設定がうまくいかないのだと思います。

 

以上です!

これらをすべて修正したら、ちゃんと鍵マークが表示されるようになりました!

 

サイト紹介

特に修正が大変な「内部リンク」と「広告」を一括で何とかするPHPを作ってくださっているサイトがあったので、紹介します!本当にありがとうございます!

WordPressサイトの内部リンクSSL対応(HTTPS化)をコードコピペでちょっと楽にする方法|寝ログ

広告すべてには対応していないようなので、何カ所かは手動で広告コードを修正する必要がありますが、ほとんどは自動で修正してくれました!

内部リンクの修正が必要なかったのが、本当にありがたかったです!

<追記>

phpを使用するとページの表示速度が少し遅くなります。しばらくは上記の寝ログ様のphpを使わせていただきましたが、プラグイン「Search Regex」を使用して内部リンクはすべてのhttpをhttpsに置き換えました。

関連:プラグイン「Search Regex」ですべての投稿内の文字列を置換・削除する方法

 

ということで、サイトの修正は以上です!

 

しかし、記事数が多くてGoogleにインデックスされている場合はもう少し作業があります。

 

Google関連の対応

Search ConsoleやGoogleアナリティクスに登録している場合は、そちらの登録情報を修正する必要があります。

Search Consoleでは「http」のサイトと「https」のサイトは別サイトとして扱うため、新規にサイトを登録する必要があります。

GoogleアナリティクスはURLの修正が可能です。

 

今度こそ以上です!お疲れさまでした!


今回のまとめ

今回は「サイトのSSL化」についてまとめました。

お盆休みの内、丸1日を使ってしまうほど大変な目に遭ったので、これだけは言えます。

 

SSL化するならサイトを作ってすぐに!

 

そうすれば面倒な作業が一切なく、すぐにセキュリティ対策ができた安全性の高いサイトにすることが出来ます。1時間ほどで全作業を終了できるくらいです。(内待ち時間50分)

ということで、もし今後新しいサイトを作る機会があったら、最初に設定してしまおうと思います。

 

ここまでお読みいただき、ありがとうございました。

 

関連:知識ゼロからホームページ作成・公開するまでの手順と公開後の作業まとめ<画像付き>