今年の4月についに、はてなブログの無料ドメイン(hatenadiary.jp,hateblo.jp.hatenablog.comなど)の全ブログでのHTTPS配信が有効になりましたね。
2018年2月22日以降に新規開設したブログは全てHTTPS配信となっています。
HTTPS化への対応
画像やCSS・JSなどの参照元がHTTPのままでHTTPS化を有効にしてしまうと、混雑コンテンツMixed Contentというエラーが発生します。Mixed Contentのエラーが発生している状態
Mixed Contentが発生しているかどうかはブラウザのアドレスバーを見ればわかります。httpsなのに緑の「保護された通信」や鍵マークが出ていない場合はMixed Contentのエラーが起きています。
Chromeでの表示↓。
Chromeでは保護された通信が出ていればエラーは出ていません。
混在コンテンツへの対処
エラーが発生している場合は修正する必要があります。せっかく安全なHTTPSにしたのに、安全でないHTTP通信が混ざっていてはHTTPS化した意味がないですよね？基本的にははてなブログ公式ヘルプで書かれているやり方で修正すればOKです。
help.hatenablog.com
- 画像
- CSS・JavaScript・デザインテーマ
- 広告のコード、iframe
- はてな記法で呼び出したもの、はてなブログの編集サイドバーで貼り付けたもの
最近はてなブログを始められた方は最初からフォトライフもHTTPS対応しているので特に何もしなくて大丈夫です。多分2016年より前からブログ書かれている方は修正がちょっと面倒かもしれません。（アフィリエイト広告の修正もあるため）
混在コンテンツの見つけ方
Google Chromeの検証ツールを見ると「Mixed Content」というエラーがありますのでそこから探して下さい。
引用：Preventing Mixed Content | Web Fundamentals | Google Developers
タイトル画像、デザインテーマ
タイトル画像がHTTP配信の場合は同じ画像をアップロードし直せばOKです。デザインテーマの@importのurlがhttpの場合はデザインCSS冒頭の
@import url("http://hatenablog.com/theme/hogehoge.css");
この部分をhttp→httpsに修正すればOKです。
上手くいかない場合はカスタマイズコードをバックアップしてから（バックアップしないと消えます）同じテーマを再インストールして下さい。
テーマで問題となるのはほとんど検索ボックスの虫眼鏡画像です。テーマのCSS自体がHTTPS未対応の場合は作者に連絡して対応してもらうか自分で
.hatena-module-search-box .search-module-button{background:transparent url(//blog.hatena.ne.jp/images/theme/search.png)no-repeat right center;}と上書きすればOKです。
参考：www.foxism.jp
オリジナルシェアボタンのカスタマイズをされている方
公式シェアボタンではなくオリジナルのシェアボタンも使っている方は以前のコードだと混在コンテンツになります。
はてなブックマークAPIのURLをHTTPSにする必要があります。私のカスタマイズ記事では修正しました。詳しくは以下の記事をご参照下さい。
blog.hinaloe.net
azulitchi.hatenablog.jp
はてなブックマークをカウントするコードの修正は↑のらいちさんの記事をご参照下さい。
見たままモードのフォトライフ画像のURLを一括置換する
見たままモードの方はフォトライフの画像はHTMLで書かれているので、シロマさんの制作された一括置換ツールを使うのが一番簡単です。
置換例：http://cdn-ak.f.st-hatena.com/→https://cdn-ak.f.st-hatena.com/
Amazonの画像URLの置換
カエレバで作ったAmazonリンクがhttpsに対応されたのは2016年6月です。それ以前のカエレバのAmazon画像URLはhttpなので修正する必要があります。
置換例：http://ecx.→https://images-fe.ssl-
シロマさんのはてなブログ一括置換ツール
www.notitle-weblog.com
私も何度もお世話になっております。ありがとうございます。
はてな記法モードで書いてる場合
はてな記法モードで書かれている場合ははてなフォトライフの画像は記事を更新するだけでOKです。
「編集サイドバー」というのははてなブログ記事編集画面右横のツールバーから貼り付ける「Amazon商品紹介」とか「レストラン紹介」などのことです。
「はてな記法で呼び出したもの」というのははてなフォトライフもそうですがTex記法やrakuten記法などのことです。これらのはてな記法では画像やiframeを呼び出すのですが、httpsに未対応のはてな記法もあります。
（※fotolife記法は記事を更新すればHTTPSになります。）
そのためはてな記法バリバリで書いてる場合やはてなダイアリーからはてなブログへ移行する場合に混在コンテンツの問題の解消が難しくなってきます。
Upgrade Insecure Requestsで一括置換する
リソースをhttpsに修正しきれない場合、Upgrade Insecure Requestsという仕組みでブラウザ側で一括置換する方法があることを知りました。Upgrade Insecure Requests*1を指定することで、閲覧者のブラウザに対してhttp://へのリクエストを機械的にhttps://へ置き換えるように指示できます。
http://help.hatenablog.com/entry/https_faq#f-c9b85add
この件に関しては、はてなブログの公式ヘルプのHTTPS対応のページに最近追加されました。
はてなブログではダッシュボード＞設定＞詳細設定の「headに要素を追加する」に以下のメタタグを追加することで有効に出来ます。
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
とても便利なのですが、例によってInternet ExplorerやMicrosoft Edgeなどのブラウザでは未対応なことに注意して下さい。またHTTPのコンテンツは表示されなくなります。
IEとか気にしないという方にはこれ一発でOKかもしれません。
Upgrade Insecure Requestsははてなブログ以外のWebサイトのHTTPS化対応でももちろん使えます。
laboradian.com
参考：Upgrade Insecure Requests
Upgrade Insecure Requests （日本語訳）
独自ドメインのはてなブログのHTTPS化も6月末には対応予定とのことで、早め早めに準備しておきたいですね。
Google Search Consoleの再登録も忘れずに
【追記】2018/06/12 ついにはてなブログの独自ドメインでもHTTPS配信有効になりました。HTTPSを有効にした後はGoogle Search Consoleの再登録もやっておきましょう。
https://nelog.jp/reentry-google-search-console
https://nelog.jp/reentry-google-search-consolenelog.jp
