WPブログ更新～安全な接続の為にhttps化・Xserver(エックスサーバー）無料独自SSL証明書の導入

GoogleAdsenceの審査に無事合格して晴れて皆様の仲間入りを果たす事が出来ました。ブログの更新に俄然やる気になっていましたが・・・事件は起きました。

サイトをHTTPS対応に設定すると、他にもメリットが得られます・・・

ん？

・Google検索結果におけるサイトのランクが向上します・・・

なんだって！！！

早速ググって調べてみると・・・

SSL化（暗号化）する事で安全な接続ができる・・・悪意のある第三者から情報を盗み取られるのを防ぐ事ができます。

つまり・・・

何もしていないと危険な訳です・・・

自分のブログにアクセスすると・・・

となっています。

ひ・・・ひどす・・・

こんな表示されちゃったら当ブログから速攻退出したくなっちゃいますよね。

SSL証明書の導入が当たり前の時代に突入したという事です。

逆に言うと、SSL証明書の無いサイトは淘汰されていくという訳です。

そんなの知らなかったし！！！

無料ブログはなにもしなくても鍵のついた常時SSLです。

レンタルサーバーで個人のブログを書いている素人の身としては「辛い現実」であります。

SSL証明書を導入しないとこの先やっていけません！！！

そしてSSL証明書は・・・料金が高い！！！

色々ググっていたら・・・

Xserverなら独自SSLが無料！！！なんだって？？？

Xserverで良かった！！！ほんとに良かった！Xserver万歳！！！

って事で、エックスサーバー推しで無料独自SSLを導入して暗号化しましょう。

順を追って素人的にSSL証明書を導入していきます。

早速SSL設定をすべくサーバーパネルへ

まずはXserver（エックスサーバー）のサーバーパネルにログインします。その項目にドメインがありますのでSSLを導入したいドメインを指定して設定をします。

SSL設定画面を開いたら、独自SSL設定の追加のタブを押します。

独自SSL設定を追加する（確定）を押します。

CSR情報（SSL証明書申請情報）については

何もしないで大丈夫です。

チェックボックスをクリックすると

こんな表示になりますがそのままでいきます。

個人ですからPersonalのままです。

するとこんな画面になります。

設定の反映まで最大1時間程度かかりますので記事でも書きながら待ちましう。

そして1時間後・・・

無事にhttps://www.maharin.com/

となりました。

ブラウザでアドレスを入力してみると・・・

表示はされましたが、

コンテンツの一部は暗号化されていません

と表示されてしまいます。

次の設定に行きますが

SSL設定される前に次の作業へは行かない様にした方が良いようです。

WordPress側で先に作業すると、表示が真っ白になったりトラブルがおきる可能性があるそうです。

しっかり1時間程度待ってhttps化してから作業をします。

WordPress側の設定をしよう

SSL設定が反映されたら、WordPress側の設定をします。

一般設定のURLをhttpsに変更します。

変更すると勝手にログイン画面に戻りますので再度ログインします。

今まで書いてきた記事や固定ページ、その他内部リンクや画像リンクなどはhttpのままなので修正が必要です。

ひとつひとつURLを書き換えていくのは重労働ですので

「Search Regex」というプラグインを使っていきます。

プラグインを有効化したら、

ツール→Search Regexに入り、

Search patternに以前のhttpのドメイン

Replace patternにhttpsのドメインを入れます。

Replaceを押すと

httpからhttpsに変更しますっていう候補が出てきますので確認していきます。

記事の数が多ければ多いほど大変な作業かと思います。

小生のブログはまだそんなに多くないので300件程度でした。

確認が終わったらReplace＆Saveボタンを押すと変更されます。

無事に完了したかはこちらでチェックします。

次のステップへ行きます。

しっかりhttps化されているかをチェックします。

ここまで設定したら、httpsのURLで自分のサイトを表示してみます。

問題が無ければ晴れて鍵付きのサイトになるはずですが・・・

まだ鍵付きにはなりませんでした。

要するに

サイト内にhttpのままのリンクがあるという事になります。

原因を探るべく、

GoogleChromeのブラウザでデベロッパーツールを使い原因を探ります。

ChromeでF１２を押す事でデベロッパーツールを表示出来ます。

デベロッパーツールで見ると、赤丸で表示した部分がエラーになっている部分って事になります。

表示してみると下の赤丸部分にhttpのまま貼られている画像があるという事が分かります。

URLをコピーしてブラウザで開いてみると・・・

プロフィール画像が悪さをしていました。

なので、WordPressのダッシュボードからプロフィール画像を同じ物を差し替えます。

Search Regexの処理で全ての画像がhttps化されていますので差し替えるだけで大丈夫でした。

style.cssでhttpをhttpsに修正する方法もあるみたいですが、素人には難しい所です・・・

他にもhttpのまま挿入されている画像が多いと思いますので、デベロッパーツールで鍵にならない原因を一つ一つ潰していきます。

外部リンクや広告などが悪さをしている可能性もありますのでしっかりチェックしていきます。

恐らくこの部分が一番時間がかかると思います。

ちなみにGoogleAdsenceの自動広告とAmazonアソシエイトについては、変更しなくても大丈夫な様です。(2018年12月現在)

A8.netについてはサイト登録の変更が必要です。

その他のアフィリエイトについては他のサイトを参考にして下さい。

デベロッパーツールで原因を修正した結果・・・

やりました！！！

ついに鍵付きで保護されたサイトになりました。

これで当ブログもSSL化で人並みのサイトとなりました。

しかしながら、httpの当サイトと、httpsの当サイトは別サイトとしての扱いとなるみたいなので・・・

リダイレクト設定というものが必要になります。

次のステップへ行きます。

.htaccessでhttpサイトをhttpsサイトにリダイレクトする設定をします。

無事に鍵付きサイトになった所で、今度は

httpでアクセスした方をSSL化したhttpsサイトに誘導しないといけません。

httpサイトからアクセスした方を保護されたhttpsサイトへ自動的に飛ばす

処置をします。

Xserverのサーバーパネルに再度ログインして.htaccess編集をクリックします。

使用前のご注意には・・・

この機能は上級者向けの機能です　　　　　と。

素人ですが、バシバシ編集してやりましょう。

エックスサーバー独自SSL証明書でhttps化の感想です。

流石に今回の設定については

素人には辛い作業でした。

当然色々なサイト様を頼らないと出来る訳がありません。

今回の作業は

Naifix様のこの記事

を参考にさせていただきました。

非常に解りやすく解説してくれています。

本当にありがとうございました。