独自ドメインではてなブログを HTTPS 化した話

ども、@kimihom です。

ついに、はてなブログ Pro で独自ドメインをやっていても HTTPS 化ができるようになったので、早速このブログも HTTPS 化した。今や HTTPS でないサイトは信用性や機密性の部分で懸念点を抱えることになってしまうため、真っ先に HTTPS に対応した次第だ。

今回はそれをやっていく上で注意したいことを簡単にまとめてみる。

HTTPS 化にする方法

まずどうやれば HTTPS になるのかを簡単に紹介する。

はてなブログの設定 -> 詳細設定 -> HTTPS配信にいけば、HTTPS化にするページに行くことができる。そのページで注意点なども書いてあるので、ざっと確認しよう。本記事の後半でも、実際にやって見て起きた点などを報告している。

f:id:cevid_cpp:20180613183421p:plain

はてなブログをクールにカスタマイズして、例えば <script> タグで HTTP のサイトをロードしている場合、一部で HTTPS が使われていないことで、ブラウザの表示が "保護された通信" にならない問題が出てくる。せっかく HTTPS にしたのなら、この緑色の表示にしたいよね。

f:id:cevid_cpp:20180613182447p:plain

<script>タグのロード先が HTTPS に対応していれば、 src="https://" にするだけで OK だ。

同じように、画像の読み込み等も、基本的に全部 HTTPS にする必要がある。例えば、はてなブログの設定のタイトルに画像を入れている場合、これも HTTP の状態になってしまっている。正しく HTTPS にするためには、再度画像をアップロードすれば、勝手に HTTPS になってくれた。

f:id:cevid_cpp:20180613182625p:plain

この MixedContent の対応については、はてなブログの公式で案内されているので、参照してほしい。具体的に MixedContent の問題がどこで起きているのかを確認するには、ブログページを右クリック->検証->Consoleタブでわかる。

HTTPS 化する前に、以下の点に注意した方がいい。

1. 関連記事一覧が出てくるか これは一時的な問題かもしれないが、HTTPS 化したら関連記事が出てこなくなった。おそらく URL 自体が変わったからなんだろうが、どうやればいいか検討中の段階だ。

もし記事下に関連記事一覧が出てこないのがめちゃ困る！って場合は HTTP のまま様子見した方がいいかもしれない。なぜなら、HTTPS から HTTP に戻すことができないからである。

追記: しばらくしたら出てくるようになった模様？一時的な挙動のようだ。

2.はてなブックマーク数が表示されるか 記事のブックマーク数も同様に、HTTPS にしてから調子が悪くなった。これははてなブログの公式の記事にあるように、

※はてなスター・はてなブックマーク以外のSNSでのアクション数（例: Facebookのいいね！やシェア数など）は移行できませんのでご注意ください。

とのことである。まぁ、個人的にはそれを差し置いてでも HTTPS 化に真っ先に更新したかったので、この点は承知の上で行った。もしこれが困る！って場合にも、同様に HTTP のまま様子を見た方がいいのかもしれない。今後、この情報が引き継がれるってのは考えられにくいけど。

今回は速報的な感じで独自ドメインのはてなブログを HTTPS 化した話をざっとまとめた。

ついに来た、はてなブログ独自ドメイン HTTPS 化の感動の瞬間を見逃してはならない！！