こんにちは、BOZU＠田舎もんです。
Googleも推奨しているとおり、今日のブログは常時SSL（https）が当たり前となりつつありますが、当ブログはまだ非対応でした。
昨日思い切ってブログサイトの常時SSL化に挑戦しましたが、思いもよらぬトラブルでレイアウトデザインがガタガタに。
丸1日の悪戦苦闘の末何とか復旧した話しをSSLの手順の紹介を兼ねて書いてみます。
SSL化の手順
ブログサイトの常時SSL化にあたり、まずは私のやった手順は以下のとおり。
「お名前.com」でSSLの申請
私の利用している「お名前.com」では無料のSSLがオプションで設定可能。
まずは「コントロールパネル」にログインし、「セキュリティ」から「SSL証明書」をクリック。
選択中のドメインが間違いないか確認し「申し込む」をクリック。
「無料SSL」にチェックし、「確認する」をクリック。
内容を確認し、「完了する」をクリック。
「無料SSLのお申込みが完了しました！」が表示されれば申請は完了。あとはステータスが「設定中」から「有効」に変わればSSL化の設定は終了。
わずか5分足らずで完了します。
リダイレクトの設定
ブログのURLが「http://」から「https://」に変わりましたので、まずは「https://ドメイン名」でアクセスできるか確認します。ここはSSL化が無事完了していれば問題なくアクセスできると思います。
問題は「http://ドメイン名」でアクセスした場合です。その際におそらくページは正常に表示されると思いますが、ブラウザのURL欄が「http://」のままならば、「http://」と「https://」の二重運用ということになるので、あまり宜しくない状態です。
その場合は、”http://”にアクセスがあったら、すべて”https://”に転送してしまうというやり方（リダイレクト）をお勧めします。
転送手順はこちらのサイトに詳しく書かれていますので参考にしてください。
「http://ドメイン名」でアクセスした際に、ブラウザのURL欄「https://」となっている場合またが「鍵マーク」が表示されている場合は、自動でリダイレクト設定がされていると思われますので特段の設定は不要です。
Googleアナリティクス とサーチコンソールの設定
ブログを運用されている方の大半がGoogleアナリティクス とサーチコンソールを利用されていると思います。
常時SSL化後は、Googleアナリティクス とサーチコンソールの設定変更が必要となります。
Googleアナリティクス
- 「プロパティ」の設定で「デフォルトのURL」を「http://」から「https://に変更し、設定を保存します。
- 次に「ビュー設定」の「ウェブサイト のURL」を「http://」から「https://に変更し、設定を保存します。
以上でアナリティクスの設定は完了です。
Googleサーチコンソール
サーチコンソールは、既存の設定の変更ができませんので、「https://」のサイトを新規登録することになります。
- 「プロパティの追加」から「https://ドメイン名」を追加し、設定を保存します。
- 次にサイトマップを送信します。管理画面の左メニューの［クロール］内の［サイトマップ］から［サイトマップの追加/テスト］に進み、サイトマップのURLを入力して送信します。
以上でサーチコンソールの設定は完了です。
ブログの内部リンクの変更
ブログ内には、リンクページやリンク画像を絶対パス（http://ドメイン名/ページまたは画像ファイル名）で指定しているものが多くあります。
この場合、常時SSL化してもブラウザのURL欄の前に「鍵マーク」が表示されなかったり、「安全ではないサイト」と表示される場合があります。
これは、該当部分を読み込む際は安全でない通信が行われているためです。
このhttpのコンテンツが混ざってしまっている状態を「mixed-contents」といいます。
主に絶対パスを使っているURLは以下のものが考えられます。
- 画像・動画を読み込むURL
- CSSを読み込むURL
- JavaScriptを読み込むURL
この場合は、URLのパス指定をすべて「https://ドメイン名/該当ファイルなど」に変更する必要があります。
これを手作業でひとつひとつ変更するのはかなりの労力が必要です。そこで有効なのが「Search Regex」というプラグイン です。
このプラグインはサイト内の特定の文字列を検索し、一括置換してくれるものです。
つまり「http://ドメイン名/」のパス記述を一括して「https://ドメイン名/」に変更することができます。
Search Regexの設定
WordPressの管理画面から『プラグイン』→『新規追加』をクリックし、キーワード検索で『Search Regex』と入力。
『Search Regex』を選択し、『今すぐインストール』をクリックし、有効化します。
『Search Regex』の設定画面で上記のとおり入力します。
①検索する文字列→http://ドメイン名/
②置換する文字列→https://ドメイン名/
③『全てを置換する』をクリック。
以上でサイト内に記述のURLがすべて変更されます。
と、ここまでは良かったのですが、、、
トラブル発生
無事全置換が完了し、「鍵マーク」が表示されるようになったのですが、これまで設置してきた広告バナーや画像ファイルが一部非表示になり、レイアウトデザインが崩れて見るっも無残なデザインになってしまいました。
やむを得ないので、これまでの手順とは逆に「https://ドメイン名/」を「http://ドメイン名/」に全置換し直してみました。
しかーし、レイアウトデザインの崩れは変わりません。
これは一大事だ！と思ったのも後の祭り、バックアップをとってなかったので元に戻すすべがありません。しかも「外観」の「カスタマイズ」の画面すら表示されなくなってしまったのです。
これはいよいよ本格的にやばいことになったぞ。事の重大さに気付きました。
さて、どうしたものかと暫く悩んだのち、JINのテーマを一旦別のテーマに変更させ、JINのテーマを一旦削除し、JINのテーマを再インストールしてみました。結果状況は変わりませんでした。
次に思いついたのが、「そう言えばお名前.com」のレンタルサーバーには確か自動バックアップ機能があったはず」ということで、昨日の状況まで復元を試みました。
これで何とかなるかも知れないという淡い期待を持ちつつ復元に数十分かかるのを待ち続けました。さて結果は、これも惨敗でした。全く元には戻ってなかったのです。
「どうなってるの！？」と苛立ちと焦りを隠せないまま、少し頭を冷やして考えることにしました。
もうあきらめモードに突入しかけたところ、ダメ元でJINの子テーマに移行させるという手段を取ることにしました。
「子テーマ」とは、選択した既存のWordPressテーマである「親テーマ」の機能やスタイルを継承した上で編集（カスタマイズ）していくためのテーマです。
JINの子テーマをダウンロードし、テーマを子テーマに変更してみました。
すると「カスタマイズ」画面がちゃんと表示され、今までどおり動作するではありませんか。思わず「やったー！」と叫んでしまいました（笑）
なぜこれで修復できたのかは謎ですが、まあ結果オーライといったところです。
但し、修復したのはあくまでもカスタマイズ機能だけで、レイアウトの崩れはもちろん治っていません。その後丸半日を費やして、ひとつずつ手作業で元に戻していきました。
まとめ
明確な原因を掴んで修復できたわけではないので、多少のモヤモヤ感は残りますが、まあ無事元に戻って良かったです。
原因は「Search Regex」で行なったURLの全置換にあることは明白ですが、決して「Search Regex」を否定するつもりはありません。恐らく詳細なオプション設定を見落としていたことが起因していると思います。
「Search Regex」はとても便利なプラグイン ですが、利用する際はしっかりオプション設定を含めた使い方を勉強してから慎重に使うようにしましょう！
これはもう言わずもがなですが、SSL化を含め、簡易なカスタマイズであっても行う前には必ずバックアップをとること、これが最大の反省点であり今回のSSL化で学んだことです。
できればSSL化はブログ運営の途中でやるのではなく、もう最初からやっておくべきですね。これも教訓になりました。
皆さんも今回の私を反面教師に、大切なブログを守るためには、定期的なバックアップと万全のセキュリティ対策を施すことを強くおすすめします。
