【はてなブログ】独自ドメインをHTTPS化しました
先日、Google Chrome最新版で、HTTPサイトに警告が表示されるようになったというニュースを目にしました。
INTERNET Watch／2018年7月25日 より
「Google Chrome 68」公開、HTTPサイトには容赦なく警告を表示する仕様に
はてなブログでも独自ドメインのHTTPS化が対応となり、実際にHTTPS化したブログさまもチラホラ見かけていましたので、これを機に、このブログでもHTTPS化に踏み切ることにしました。
備忘録としてHTTPS化の手順をまとめておきたいと思います。
HTTPS化の手順
①ブログのバックアップ
まず、ブログをバックアップします（Movable Type形式）。
設定＞詳細設定＞エクスポート
→記事のバックアップと製本サービス
→ダウンロードする
ダウンロードしたファイル（txtファイル）をローカルに保存します。
②デザインのバックアップ
デザイン周りの HTML、JavaScript、CSS などの記述を保存します。
デザイン＞カスタマイズ（スパナマーク）＞ヘッダ、記事、サイドバー、フッタ、デザインCSS
上記各項目のコードをそれぞれコピペして保存。
③ 混在コンテンツ（Mixed Contents）の事前確認・修正
これは、HTTPS化した後に行う作業ですが、このブログはまだ記事数が少ないので、事前に引っかかりそうな部分をチェック、修正します。
具体的には、
<img src="http://...">
@import url('http://...' .....
<script src="http://..." ...>
のような記述が引っかかるようなので、
「記事の管理」＞右上の検索窓の中に
src="http://
@import url('http://
といった文字列を入れ、すべての記事（一括）で検索をかけます。
そこでヒットした文字列がある記事について、編集画面に入り、
http → https
と修正します。
リンク先が正しいかどうかなど、プレビューで確認してください。
④デザインのHTML・CSSの修正
デザイン周りの HTML、JavaScript、CSS などの記述を修正します。
デザイン＞カスタマイズ（スパナマーク）＞ヘッダ、記事、サイドバー、フッタ、デザインCSS
上記各項目のコードにおいて、
http → https
と修正します。
ここで再びバックアップ。
⑤HTTPS化
いよいよ、HTTPS化を行います。
HTTPS化は一度行うと、元には戻せません。しっかりと事前準備を。
「設定」＞「詳細設定」＞「HTTPS配信」
→HTTPS配信の状況を確認する
→「変更する」ボタン
→「この操作は取り消すことができません。HTTPS配信を有効にしますか？」
→「OK」ボタン
以上で、HTTPS化は完了です。
⑥ブログ表示の確認
ブラウザで自分のブログにアクセスして表示を確認します。
ブログにアクセスすることができ、アドレスバーのブログURL左側に、「（鍵マーク）保護された通信」と表示されていればOKです。
⑦Upgrade Insecure Requestsの設定
これは、記事内に http:// の記述が残っていた場合、ブラウザ側で強制的に https:// に修正する機能だそうです。
念のため、設定しておきます。
「設定」＞「詳細設定」＞「headに要素を追加」に、
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
このスクリプトを入れます。
⑧Googleアナリティクスの設定
Googleアナリティクスで、ブログURLを変更します。
a.プロパティ設定
「ホーム」＞「管理」
＞（中央の列／自分のブログ）「プロパティ設定」
＞「デフォルトのURL」
→ http:// → https:// に変更
→「保存」ボタン
b.ビューの設定
「ホーム」＞「管理」
＞（右の列／すべてのウェブサイトのデータ）「ビューの設定」
＞「ウェブサイトのURL」
→ http:// → https:// に変更
→「保存」ボタン
⑨Google Search Consoleの設定
a.HTTPS化したアドレスの追加
新規にHTTPS化したアドレスを追加します。
「プロパティを追加」
→（ウェブサイト）https://〇〇〇～
→「追加」ボタン
→所有権の確認画面
→「おすすめの方法」または「別の方法」
→（ラジオボタン）「HTMLタグ」を選択
→<meta>タグをコピー
→はてなブログ「設定」＞「詳細設定」＞「headに要素を追加」に<meta>タグを貼り付け
→「確認」ボタン
→「所有権が確認されました」
これで、プロパティが追加されました。
先人によると、ドメインが同じなので所有権の確認の必要はなく、特に何も作業せずに「DNS」なんちゃらの画面で確認ボタンを押すと、所有権が確認される、という報告もありましたが、わたしの場合、その方法だと「確認できません」が出てしまってうまくいかなかったような気がします・・・。
よくわかりませんが、HTMLタグによる確認方法であれば確認OKとなることは確かです。
b.ウェブサイトのリンクを変更
次に、ウェブサイトのリンクを変更します。
新旧のプロパティにおいて、「ウェブサイトのリンクを変更」から
古いプロパティ（http://〇〇〇～）→リンクを解除
新しいプロパティ（https://〇〇〇～）→リンクを設定
これで、HTTPS化した新しいプロパティにリンクが設定されました。
c.サイトマップの送信
最後に、サイトマップを送信します。
新しいプロパティ（https://〇〇〇～）
「クロール」→「サイトマップ」→「サイトマップの追加テスト」
→https://〇〇〇～/sitemap.xml
→送信
直後には「保留」状態となりますが、しばらく時間を置くと（一時間くらい？）処理されて、サイトマップがインデックスされます。
これらは、Search Consoleから「検索パフォーマンスを改善します」というタイトルの G-mail が届いて作業をうながされますので、一つ一つ行ってください。
⑩ 混在コンテンツ（Mixed Contents）の確認・修正
HTTPS化の前に行った確認・修正ですが、HTTPS化の後にもう一度行います。
ブラウザ（Chrome）の検証で、「Mixed Contents」エラーが出ていないか、過去記事をチェックしていきます。
記事を一つ一つチェックしていく作業は時間がかかりそうなので、今後ゆっくり確認を進めることにします。
参考リンク:
※Amazon・楽天などアフィリエイトリンクについて
古い記事だとリンク修正が必要な場合があるということですが、このブログは比較的新しいので、たぶん大丈夫なのではないか、と勝手に思っています。
今後、一応リンクは確認してみますが、修正が必要な場合の手順については、ここでは割愛いたします。
トラブル発生と対処法
HTTPS化によって、いくつかのトラブルが発生しました。
トラブル内容と対処法についてです。
①HTTPS化後、プレビューでデザインが崩れてしまった
HTTPS化を実行したら、プレビュー画面でデザインが崩れてしまいました。
まったく、デザインCSSが効いていない感じです。
これは、システムがHTTPS化したものの、古いブログテーマとの整合性がとれていないためと思われました。
それゆえ、再度テーマをインストールし直すことにしました。
テーマをインストールし直すと、「デザインCSS」の記述がリセットされてしまうため、バックアップしておきます。
HTTPS化に備えて、すでにこれらはバックアップしてありますので、OK。
再インストールの実行で、プレビュー画面はほぼ復活しました。
細部のデザインは、「デザインCSS」のバックアップをコピペすることで整えられました。
②Google AdSenseが一部表示されない
HTTPS化を実行後、一部のアドセンス広告が表示されなくなりました。
具体的には、トップのグローバルナビ下、サイドバーのプロフィール下に手動で入れていた広告が非表示となりました（PC環境において）。
この問題については現在調査中ですので、また別の機会にご報告したいと思います。
さいごに
以上、はてなブログ独自ドメインでのHTTPS化について、備忘録的まとめでした。
ちょっと面倒といえばめんどうですが、HTTPS化自体はボタンひとつで簡単に終えることができました。
一応、スタンダードになりつつある保護された通信ブログになったということで、ホッとしています。
最近、なかなかブログを書くことができずにいますが、やめたというわけではないので、書きたくなったら書く、というスタンスでゆるりと続けていきたいと思っています。
今後とも、よろしくお願いいたします。
