はてなブログでは、開設したブログをHTTPSで配信できます。HTTPSで配信する場合に必要なMixed Contentの解消について、よくある質問をまとめました。
- HTTPで参照されているコンテンツを一括でHTTPSに置換する
- デザイン設定画面からアップロードしたヘッダ画像・背景画像
- はてなフォトライフにアップロードした画像
- レストラン紹介から貼り付けた画像
- デザインテーマの画像
- はてなブックマーク件数取得API
HTTPで参照されているコンテンツを一括でHTTPSに置換する
Upgrade Insecure Requests*1を指定することで、閲覧者のブラウザに対してhttp://へのリクエストを機械的にhttps://へ置き換えるように指示できます。
例えば、記事の本文やカスタムCSSからhttp://example.com/sample.pngを参照していた場合、https://example.com/sample.pngのように、ドメイン名はそのままでHTTPからHTTPSの通信になります。
Upgrade Insecure Requestsは、あくまで閲覧者のブラウザでHTTPへのリクエストをHTTPSに置き換える仕組みで、HTTPのみで配信されているコンテンツは表示されなくなることにご注意ください。
・本件に関するサポートは行なっておりませんので、ご理解の上でご利用ください。
Upgrade Insecure Requestsを指定する方法
HTTPのみで配信されているコンテンツは表示されなくなることを理解した上で、Upgrade Insecure Requestsを指定する場合は、ブログの詳細設定の「headに要素を追加」に以下の内容を貼り付けてください。
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
デザイン設定画面からアップロードしたヘッダ画像・背景画像
ブログのヘッダをカスタマイズしている方で、ヘッダ画像や背景画像がHTTPで配信されている場合があります。再度同じ画像をアップロードし直すことで解消します。
はてなフォトライフにアップロードした画像
「はてなフォトライフ」にアップロードした画像がHTTPで配信されている場合、一部を除き、記事を再度「更新する」ことで解消します。
はてな記法で書かれている場合
編集画面を「はてな記法モード」や「Markdownモード」でご利用で、[f:id:sample:20180308000000j:plain]というような記載で画像を貼り付けている方は、記事を再度「更新する」ことで解消します。
URLを直接埋め込んでいる場合
見たままモードでご利用、あるいはimgタグでURLを直接埋め込みしている場合、https://cdn-ak.f.st-hatena.comで始まるURLであれば、URLのスキームをhttpsに書き換えhttps://cdn-ak.f.st-hatena.comにしてください。これ以外のURLをご利用の場合は、再度同じ画像を、はてなフォトライフにアップロードし直してください。
レストラン紹介から貼り付けた画像
編集サイドバーのレストラン紹介から貼り付けたぐるなびや食べログの画像は、記事を再度「更新する」ことで解消します。
デザインテーマの画像
テーマストアで公開されているテーマのうち、一部URLが含まれるものを機械的に置換し、混在コンテンツへの対応を行いました。
はてなブログユーザーが投稿したテーマの場合、上記のみでは対応が不完全なことがあります。その場合はテーマが修正されるのをお待ちください。公式テーマでは、HTTPSへの対応を完了しています。
ご自身でデザインCSSを書いている方・テーマ制作者の方
デザインCSSやテーマ内の画像を、以下のいずれかの方法でHTTPSで指定し直すことをおすすめします。
代替画像を用意し、はてなフォトライフにアップロードする
代替となる画像を用意し、はてなフォトライフにアップロードした上で、CSS内でURLを指定してください。テーマで使う画像のホスティングには、はてなフォトライフの利用を推奨*2しています。
Boilerplateテーマ最新版のソースコードをダウンロードし、必要な部分を差し替える
Boilerplateテーマ最新版では、インラインSVGによりCSS内に虫眼鏡アイコンを含めています。Boilerplateテーマについては、はてなブログヘルプはてなブログテーマ制作の手引き内のサンプルテーマ「Boilerplate」ご確認ください。
はてなブックマーク件数取得API
はてなブックマーク件数取得APIは、現状HTTPでのみご利用いただけます。
※デザイン設定画面のソーシャルパーツから設定できる「はてなブックマークボタン」や「はてなブックマークコメント」はHTTPSでもご利用いただけます。
