はてなブログを最速でhttpsに対応させる

こんにちは、irucaです。
遅ればせながら本はてなブログもhttpsに対応しましたのでそのやり方をまとめておきました。

目次

まとめ

以下のことをするだけです。

• はてなブログ設定画面からhttpsを有効化する
• ブログのデザインに使っているHTML内のURLを全て http:// から https:// に書き換える
• (大変だけど) 各ブログ記事から張っているリンクのURLを全て http:// から https:// に書き換える

下記で詳しく説明していきます。

手順

はてなブログ設定画面からhttpsを有効化する

はてなブログの管理画面から「設定」をクリックし、そのあと「詳細設定」タブに移動します。

詳細設定の下部の「HTTPS配信」の状態が「無効」であることを確認し、「HTTPS配信の状況を確認する」をクリックします。

「変更する」をクリックして、HTTPSを有効化します。基本的にはこれでhttpsでのアクセスが有効になります。
一度この操作を行うと元には戻せないそうなので、このあとの作業を行う時間を確保して行ってください。

ブログデザイン用のHTML内のhttp://を全てhttps://に置換する

HTTPSは「HTTP Secure」の略ですが、一言でいうと「HTTPでやりとりされている情報は暗号化されておらず誰かが覗き見できる可能性があってセキュリティ的に危険なので、SSL(/TLS)という方法で暗号化する」というものです。なので、HTTPSでやりとりされる暗号化されたWebページの表示のためにHTTPでやりとりされる暗号化されていないWebページの情報が含まれてしまうと、その意味が薄れてしまいます。ChromeをはじめとするブラウザもこうしたHTTPとHTTPSが混在している(Mixed Contentと呼びます)ウェブページを開こうとした際は警告を表示するようになっています。

HTTPS化だけをおこなった私のブログをChromeで開き、Chromeの開発者ツールを開いてみると、この混在している状況が起きていることが分かります。

自身のブログに警告が出ていると信頼が落ちて訪問者数が減ってしまう懸念もあります。
そこで、自身のページに含まれる "http" のURLを全て "https" に書き換えて、警告が出ずに済む状態を作りましょう。
自身でカスタマイズされたHTMLをブログデザインに使用していない人はこの作業を行う必要はありません。

はてなブログの管理画面から、「デザイン」を選び、カスタマイズ（スパナのアイコン）に進みましょう。

そこから「タイトル下」「記事上」「記事下」「フッタ」に記載しているオリジナルのHTMLを編集します。
メモ帳などにコピーして、http://を全てhttps://に置換してしまいましょう。

ただし、https://に置換したあとのURLにブラウザからアクセスしてみてエラーとならないことは事前に確認しておいてください。
モバイル端末から見たデザインに別のHTMLを設定している人は、そちらに含まれるhttp://もhttps://に変更することを忘れないようにしてください。

各ブログ記事から張っているリンクのURLを全て http:// から https:// に書き換える

こちらは必須ではありませんが、せっかくhttps化したブログからhttp://のページにリンクを張ってしまうとちょっとかっこ悪い気もします。
思いつく限りでよいので、自身の書いたブログ記事から張られているリンクのURLも http:// から https:// に置換しておきましょう。

作業後にブログにアクセスしてみる

上記の作業を終えたあとに自身のブログにChromeからアクセスしてみます。

無事警告なしにHTTPS化され、信頼性の高いWebページになりました。

おわりに

エンジニアでない方が「HTTPS化に対応しましょう！」と急に言われても何のことか分からない...別に覗き見られて困るようなブログ書いてないし...と困ってしまう方も多いかとは思いますが、もはやWebページをHTTPS対応することは今必須のセキュリティ対策として広く認識されているのです。
この機会にぜひHTTPS化をしてみてください！