http→httpsは思っているほど難しくない
ずっと気になっていた「http→https」を完了したので僕の環境で実施した手順をシェアいたします。
僕はブログをはじめた当初からサーバーはさくらインターネットサーバを使用しています。
そこへWordpressを入れて独自ドメインを取得し、運営しているという環境です。
今回ブログサイトのSSL化に向けて僕が行った手順は
- データのバックアップ
- ドメイン設定変更・証明書発行手続き
- 専用プラグインによるリダイレクト設定
- AnalyticsおよびSerch Console設定
- アドセンスとAmazonJS（プラグイン）
- SSLエラー確認
という流れです。
スポンサーリンク
1.データのバックアップ
最悪の場合でも元に戻せる状態にできる準備をしました。
以前に何度か「画面真っ白」で冷や汗をかいたことがあったので、慎重に慎重をかさねました（それくらいの方がいいですよ）。
そこで一番重要なのが情報収集です。
僕は「SSL化した方がいい」ということは知っていましたが、具体的に何をして、その結果どういう影響があるのかということまで知りませんでした（その状態で作業を進めていく度胸は僕にはありません）。
なので、まずは自分のPC環境を再確認し、起こりうる問題をすべて書き出しました。
それから手順を書き出し、つまずいたら参照すべき記事もピックアップしておきます。
ここまで準備しておくと、全体像が把握でき、「最悪の場合は元に戻せる」という安心感を得ることもできます。
だからこそバックアップは作業前に絶対に行ってください。
僕は「WPBackUp」というプラグインでバックアップをとっています。
- 自動バックアップ設定にしてはありますが、一応作業前にもデータベースをPCへ保存
- さらに、いじる予定の部分ファイルはすべてコピペして保存
これで問題が発生しても元に戻すことができますね。
2.ドメイン設定変更・証明書発行手続き
さくらインターネットでレンタルサーバを契約していると無償の「Let's Encrypt」というSSL証明書を発行してもらえます。
こちらはさくらインターネットサーバのコントロールパネルから申請することができます。
参考さくらのレンタルサーバで無料SSLを登録＆httpsとwwwありにリダイレクトする方法
それからSSL化にともなって必要な設定などはほぼわいひらさんの記事を参照させていただきました。
こちらはエックスサーバー環境での記事ですがとっても参考になりました。
参考WordPressをhttpからhttpsにSSL化した全手順まとめ（エックスサーバー環境）
証明書の発行はすぐに行われました。
3.専用プラグインによるリダイレクト設定
本来ならばこの後.htaccessファイルを編集してhttp→httpsへのリダイレクト設定を行うところなのですが、さくらインターネットにはさくらインターネットサーバで独自ドメインを取得した場合のみ専用のSSL化プラグイン『SAKURA RS WP SSL』を使うことができます。
参考さくらインターネット【WordPress】常時SSL化プラグインの使い方
これは本当に助かりました。
このプラグインは
- .htaccsess設定
- 画像のURLパス変更
- WordPress側のURL変更
をすべて自動でやってくれるんです。
これで
まではわりとすんなりいきました。
4.AnalyticsおよびSerch Console設定
こちらはほんの数分で終わる作業です。
これも前述の記事を参照して
- Search Console設定
- Analytics設定
- サイトマップ送信
まで一気に行って、基本のセットアップは完了しました。
5.アドセンスとAmazonJS
アドセンス広告も再登録する
一応アドセンス広告も新たにコードを取得して貼り付けました。
この当りは特に修正する必要はなさそうですが、新しいタイプの広告も追加されていたりするのでこの機会にチェックしてもいいかもしれません。
Amazon JSプラグイン
こちらもSSL化対応しているので、別段変更する必要はありません。
また、Amazonアソシエイトにメールにて問い合わせをしましたが、http→httpsの変更届けは特に必要ないそうです。
少し手間取った点
ですがそうカンタンに「保護された通信（鍵マーク）」にはなりません。
URLの横に鍵マークが出るためにはSSLエラーを修正しなければいけないんですね。
SSLエラーをチェックする
僕は普段Chromeを使っているのでF12（Macならcommand+option+i）を押すことでエラーコードを確認できます。
「console」タブをクリックするといろいろ出てきてはじめは驚きますが、原因さえわかれば怖くありません。
僕の場合は
- ロゴ画像
- サイドバーの古い広告
- サイドバーのAmazonアソシエイト広告
が問題でした。
画像パスを確認する
さきほどのプラグインを使うことで確かにライブラリ内のURLパスはhttpsに修正されていたのですが、カスタマイザーやテーマ独自の管理画面で設定したURLパスまでは修正されていませんでした。
たとえばロゴ画像やサイトアイコンなんかですね。
あと、メニューや背景に画像を設定している場合もチェックした方がいいです。
いずれも同じ画像を再登録することでhttpsのパスが反映されました。
サイドバーウィジェットを確認する
僕の場合、結局の所、画像以外の大きなエラーはサイドバーのウィジェットが原因でした。
ウィジェットにHTMLテキストで貼り付けていた広告コード内のURLが「http」のままだったんですね。
なので、該当する広告をとっぱらったらあっさり「保護された通信」になりました。
ふぅ、とにかくホッとしました。
SSL化後の感想
SSL化後にいくつか過去の記事を確認しましたが、今の所大きなSSLエラー出ていない様子。
これから少しずつチェックしていくつもりですが、気になった点がありましたら追記したいと思います。
それから、今回のSSL化のプロセスで自分のブログサイトを見直す良い機会にもなりました。
まとめ
ですが今回の収穫はなにより自分でSSL化を実装できたという自信でした。自分でなんとかやってみることで正確な知識が身につきますから。もちろんGoogle推奨ということなので、いずれやらなければと思ってはいましたが、無料ですし、準備さえきちんとやっておけばかなり低リスクでできることがわかったので、今回チャレンジしてみました。
参考になりましたら幸いです。
