こんにちは、ちうぱんです。
はてなブログが常時SSL（HTTPS）に完全対応しました！
そこで当記事では、「独自ドメインで運用中のブログサイトをSSL設定するための全手順」を掲載したいと思います。
はてなブログ 常時SSL化への道
はてなブログの常時SSL対応がようやく完了しました。
常時SSL対応は2017年9月に公式開発ブログで発表され、3段階の工程で進められてきました。
そしてこの度、当初の予定より半年ほど遅れましたが、第3段階であった「独自ドメインでのSSL対応」を含め、完全なるSSL化（HTTPS化）が完了しました！
- 第1段階：管理画面をSSL化（2017年11月）
- 第2段階：はてな提供のドメインでSSL対応（2018年4月）
- 第3段階：独自ドメインでもSSL対応（2018年6月）
はてなブログさん、お疲れ様でした！
SSL対応はブロガーにとって死活問題でしたからね。
というのも、SEOに関心のある人はご存知のとおり、Googleは2017年10月からセキュリティ強化の一環として、SSL対応の有無を評価し始めました。さらに、Chromeブラウザでは、SSL非対応のサイトに対して、アドレスバーに警告を出しています。
Chromeに表示される警告
お付き合いのあったブロガーさんでも、はてなブログのSSL対応を待てずに、Wordpressに引っ越していった方が何人もいます。
はてなブログさんには感謝しかないけど
でもちょっと時間がかかった印象です。
常時SSLへの移行作業
では本題に移ります。
はてなブログでのSSL移行手順は以下のとおりです。
1) まず、ダッシュボード＞設定＞詳細設定を開きます。
2) 「HTTPS配信」の設定項目で「HTTPS配信の状況を確認する」をクリック。
3）下画像のページに遷移するので、「変更する」ボタンをクリック。
お疲れ様でした、以上で完了です。
WordpressのSSL化とは違い、ドメイン側での操作が無いので簡単です。
無事にアドレスが「https」になりました。
「混在コンテンツ」に注意しよう
上でも書いたように、はてなブログのSSL化作業そのものは簡単ですが、「混在コンテンツ」には注意してくださいね。
混在コンテンツとは？
HTTPSで保護されたページ内に「HTTP」によるコンテンツが含まれるもの
具体的な例で説明すると、SSL非対応のサプライヤーが提供するブログパーツを掲載している場合などが混在コンテンツとなります。（このようなブログパーツは攻撃者により不適切な画像などに置き換えられる可能性があります）
同様に、SSL非対応のサーバーに保存された画像等の表示も「混在コンテンツ」となります。
例えば、以下のタグ内のURLに「HTTP」が含まれていないか注意してください。
- 画像：<img>タグ
- 動画：<video>タグ
- 音声：<audio>タグ
混在コンテンツの削除は人海戦術で取り組むしかないので、歴史の長いサイトほど作業負担は増します。
デベロッパーツールで混在コンテンツの有無を確認する
ブラウザ標準の機能を使えば、表示しているページに混在コンテンツが含まれているかを確認することができます。
Chromeブラウザの場合、設定（ブラウザ右肩の3つの丸印）＞その他ツール＞デベロッパーツールを選択し、Securityタブをクリックします。
以下のメッセージが表示されれば混在コンテンツは含まれていません。
This page is secure (valid HTTPS).
※このページは安全です（有効なHTTPS）
パンくずリスト、関連記事に注意
本記事掲載後、阿豆らいち (id:AzuLitchi)さんから、「カスタマイズ部分に混在コンテンツが載ってるよ！」というコメントをいただきました。
調べてみたところ、池田仮名 (id:bulldra)さんのブログを参考に設置した「パンくずリスト」と「あわせて読みたいG（関連記事）」が、混在コンテンツとしてブラウザにブロックされていることがわかりました。
はてな界隈ではかなり有名なカスタマイズだと思うので、SSL化される際にはご注意いただければと思います。
というわけで以上ですっ！
SSL対応でサイト運営をご安全に～
