はてなブログのHTTPS化の対応やることリスト【独自ドメイン・はてなドメイン】

f:id:minimalgreen:20180613214223j:plain
はてなブログの独自ドメインのHTTPS配信がついに有効になりました。
staff.hatenablog.com

ていうかはてなブログの開発ブログがまだHTTPS化されてない(´・ω・`)最近WordPress移転する方が多くて寂しいです。

HTTPS化の手順・やることリスト
忘れやすいポイント
画像の置換のやり方の詳細
Google Search ConsoleとGoogleアナリティクスの再設定
Let's Encryptへの寄付
有料でのHTTPS化対応

どうすれば良いか困ってる方も多いようなので、ここではやるべきことを簡潔にまとめます。出来ればHTTPSを有効にする前に画像や広告のコードをなどのソースをhttp→httpsに修正しておいた方が良いと思います。

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に入れる
の後に画像やソースを修正していっても良いと思います。

修正すべき記事を検索

src＝"http~"やurl('http://~で呼び出している場合のみ修正が必要です。a href="http~"のリンクは修正する必要がありません。
2017年以降にはてなブログを始めた方は既にはてなフォトライフ（写真）はhttps化されていると思うので、フォトライフの対応は不要です。

img src="http://
@import url('http://
<script src="http://
background:url('http://
<iframe src="http://

などで記事検索して引っかかる記事を修正していきます。
www.foxism.jp

置換ツール

シロマさんの一括置換ツールを使う方法もあります。置換ワードは慎重に！
www.notitle-weblog.com
置換ワードの例：

img src="http:// →img src="https://
http://ecx. → https://images-fe.ssl-

Upgrade Insecure Requestsのメタタグをheadに入れる

ブラウザ側でリソースをhttpsへ一括置換するUpgrade Insecure Requestsという仕組みがあります。（Internet ExploreやMicrosoft Edgeは未対応）
ダッシュボード＞設定＞詳細設定の「headに要素を追加する」に以下のメタタグを追加することで有効に出来ます。

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

面倒な場合はこれだけでも良いかもしれませんが、広告や画像が表示されないところが出てくると思うので、全ソースをhttpsに修正した方が良いと思います。

Mixed Content（混在コンテンツ）の確認

Mixed Contentが発生しているかどうかはブラウザのアドレスバーを見ればわかります。httpsなのに緑の「保護された通信」や鍵マークが出ていない場合はMixed Contentのエラーが起きています。
Chromeでの表示↓。
f:id:minimalgreen:20180514103147p:plain
Chromeでは緑の保護された通信が出ていればエラーは出ていません。(2018/06のChromeでは）
f:id:minimalgreen:20180514103240p:plain

忘れやすいポイント

はてなブックマークのシェアボタンをカスタマイズしている場合

→ブックマーク数をカウントするコードの

http://api.b.st-hatena.com/entry.count

ここを以下に差し替えて下さい。

https://b.hatena.ne.jp/entry.count

参考：
azulitchi.hatenablog.jp

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>

管理画面（デザイン＞カスタマイズの画面）が崩れている・混在コンテンツになっている場合

f:id:minimalgreen:20180614091454j:plain
管理画面のデザインビュー画面が崩れていたり、アドレスバーが緑になっていない場合（Mixed Content）はタイトル画像や背景画像、デザインテーマの@importを修正してみてください。
タイトル画像などは再アップロードすればOKです。デザインテーマも再インストールすればOKですが、再インストール前に必ずCSSのバックアップを取って後で戻してください。
テーマの再インストールが面倒な場合はデザインCSS冒頭の@import url("テーマURL");のテーマURLをブラウザに貼り付けてリダイレクトされたhttpsのテーマURLに差し替えて下さい。（わからない場合はデザインCSSをバックアップしてからテーマ再インストールしてみてください。）
blog.minimal-green.com

【追記】2016年12月以前のブログカード

古い記事のブログカードと現在のブログカードは構造が違います。リンク先がhttpsに対応済みならsrc="https://~にすればOKですが、未対応の場合表示されません。
この場合はリンクを貼り直せば解決できます。
www.watto.nagoya

画像の置換のやり方の詳細

はてなフォトライフの画像やAmazonなどの広告コードの置換の具体的なやり方は別記事をご参照下さい。

blog.minimal-green.com

Google Search ConsoleとGoogleアナリティクスの再設定

Google Search ConsoleとGoogleアナリティクスを利用されている方は、それぞれ再登録と再設定が必要です。
サイトのHTTPS化で必要となるGoogleサーチコンソールの再登録方法

Let's Encryptへの寄付

無料でHTTPSが実現できるのは非営利団体Internet Security Research Group(ISRG)が運営するLet's Encryptのおかげです。ISRGのサイトから寄付できるのでお志のある方は是非。私も少額ですがさせていただきました。
（日本のpaypalアカウントからは寄付出来ませんでした。）
developer.hatenastaff.com

Donate - Let's Encrypt - Free SSL/TLS Certificates

有料でのHTTPS化対応

基本的にはこの記事や他の参照記事をご覧いただければご自身で対応可能だと思います。どうしても作業に不安がある場合や作業時間を時短したい方は有料でHTTPS化の代行作業をさせていただきます。
お申込みは直接以下のフォームからお問い合わせいただくか、ココナラで受け付けております。（受けられる範囲で）
これはどうしても自分で作業ができないという方のためのサービスなので、出来る方はご自身でして下さい。ここにお金をかけるのはもったいないと思っています。

料金（ココナラ経由より直接のお申込みの方がお安くさせていただきます。）：
直接のお申込み（599記事以内）: 5500円（税込み）
直接のお申込み（600記事以上）: 6600円（税込み）
直接のお申込み（700記事以上）: 7700円（税込み）
直接のお申込み（900記事以上）: 8800円（税込み）
1000記事以上は随時お見積もり

ブログのAPIキーが必要となります。
はてなブログ管理画面→ 設定→詳細設定→ AtomPubと進んでいただき APIキーをご確認下さい。

はてなブログURL：
APIキー：

お申込み