nlog

とめどなく流れるよだれ

はてなブログをHTTPSにした

今朝開いたら利用できるようになってたので。

f:id:namikuguri:20180321080635p:plain

「設定 > 詳細設定 > HTTPS 配信」から有効に切り替え。切り換え後にいくつか対応。

ブログテーマの読み込み先を変更

なんかデザインの管理画面でスタイルが思いっきり飛ぶ。

f:id:namikuguri:20180321083048p:plain

実際の見た目に影響はなかったのだけど、プレビューできないのは困るので変更。@import のリンク先を、変更前のリンクのリダイレクト先CSSファイルにした。

// 変更前
@import url("http://hatenablog.com/theme/8599973812294768939.css");

// 変更後
@import url("https://blog.hatena.ne.jp/-/theme/8599973812294768939.css");

ソーシャルボタンのカウントに使ってるスクリプトの修正

利用してるブログテーマのオプションで「カウント付きソーシャルボタンを配置」というのを使ってる。このオプションはjQueryをhttpで読み込んでる箇所があるので、ブログの設定をhttps切り換えた後にMixed Contentエラーがでてた。jQueryhttpsでも配信されてるから、https://code.jquery.com/jquery-1.9.1.min.js に変更した。...けどこれだけではダメで、変更後また別のMixed Contentエラーがでた。

Mixed Content: The page at 'https://namikuguri.hatenablog.com/entry/2018/03/20/132848' was loaded over HTTPS, but requested an insecure script 'http://api.b.st-hatena.com/entry.count?url=https%3A%2F%2Fnamikuguri.hatenablog.com%2Fentry%2F2018%2F03%2F20%2F132848&callback=jQuery112405437796937248054_1521585627067&_=1521585627068'. This request has been blocked; the content must be served over HTTPS.

エラー内容で検索して、以下のブログ記事にたどり着いた。

はてなブックマークのカウントを取得するために http://api.b.st-hatena.com/entry.count (http)を使ってるのが原因だったので、https対応のものに変更。エラーも出なくなり、はてなブックマークのカウントも表示された。

// 変更前(http)
entryUrl = 'http://api.b.st-hatena.com/entry.count?url=' + encodeURIComponent(entryUrl)

// 変更後(https)
entryUrl = 'https://b.hatena.ne.jp/entry.count?url=' + encodeURIComponent(entryUrl)

利用してるブログテーマのオプションは自作のテーマだったので、このオプションについて紹介サイトで書いてる箇所も今回の変更内容に合わせて修正した。

あと、そもそもこのカウント付きソーシャルボタンをつくるのに以下のブログ記事を参考にしているので、もし同じようなコードをブログに配置してる人は注意が必要かも。