Hatena Blog Theme Custom

はてなブログテーマ『Minimal Green』のデモブログ。はてなブログカスタマイズや、HTML、CSSなどについて書いています。

はてなブログの独自ドメインのHTTPS配信を有効にするときやることリスト

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

 

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

どうすれば良いか困ってる方も多いようなので、ここではやるべきことを簡潔にまとめます。出来れば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のバックアップを取って後で戻してください。
blog.minimal-green.com

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

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

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

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

blog.minimal-green.com


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