はてなブログの独自ドメインのHTTPS配信がついに有効になりました。
staff.hatenablog.com
ていうかはてなブログの開発ブログがまだHTTPS化されてない(´・ω・`)最近WordPress移転する方が多くて寂しいです。
どうすれば良いか困ってる方も多いようなので、ここではやるべきことを簡潔にまとめます。出来ればHTTPSを有効にする前に画像や広告のコードをなどのソースをhttp→httpsに修正しておいた方が良いと思います。
HTTPS化の手順・やることリスト
- ①記事のバックアップを取る
- ②2016年以前の記事の画像のURLや広告コードをhttpsへ
- ③CSSや記事上記事下、サイドバーなどカスタマイズした箇所の画像やJavascriptソースをhttpsへ
- ④HTTPSを有効にする
- ⑤Mixed Contentが発生していないか確認
- ⑥Upgrade Insecure Requestsのメタタグをheadに入れる（⑤で問題ない場合はやらなくてもOK）
- ⑥Google Search Consoleやアナリティクスの再設定
面倒な人は
④HTTPSを有効にする
⑤Mixed Contentが発生していないか確認
⑥Upgrade Insecure Requestsのメタタグをheadに入れる
の後に画像やソースを修正していっても良いと思います。
修正すべき記事を検索
img src="http://
@import url('http://
<script src="http://
background:url('http://
<iframe src="http://などで記事検索して引っかかる記事を修正していきます。
www.foxism.jp
置換ツール
シロマさんの一括置換ツールを使う方法もあります。置換ワードは慎重に！
www.notitle-weblog.com
Upgrade Insecure Requestsのメタタグをheadに入れる
ブラウザ側でリソースをhttpsへ一括置換するUpgrade Insecure Requestsという仕組みがあります。（Internet ExploreやMicrosoft Edgeは未対応）
ダッシュボード＞設定＞詳細設定の「headに要素を追加する」に以下のメタタグを追加することで有効に出来ます。
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
面倒な場合はこれだけでも良いかもしれませんが、広告や画像が表示されないところが出てくると思うので、全ソースをhttpsに修正した方が良いと思います。
忘れやすいポイント
はてなブックマークのシェアボタンをカスタマイズしている場合
→ブックマーク数をカウントするコードの
http://api.b.st-hatena.com/entry.count
ここを以下に差し替えて下さい。
https://b.hatena.ne.jp/entry.count
jQueryを使ったカスタマイズをしている場合
jQueryを使ったカスタマイズ（グローバルメニュー・シェアボタンなど）をしている場合はJQueryのライブラリ読み込み元をhttp→httpsにして下さい。
<!--jQueryを使用--> <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
↓
<!--jQueryを使用--> <script src="https://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
管理画面（デザイン＞カスタマイズの画面）が崩れている・混在コンテンツになっている場合
管理画面のデザインビュー画面が崩れていたり、アドレスバーが緑になっていない場合（Mixed Content）はタイトル画像や背景画像、デザインテーマの@importを修正してみてください。
タイトル画像などは再アップロードすればOKです。デザインテーマも再インストールすればOKですが、再インストール前に必ずCSSのバックアップを取って後で戻してください。
blog.minimal-green.com
