GoogleさんがWeb通信の暗号化通信を推奨してしばらく立ちますが、今年のChromeの更新で検索バーの表示ではっきり区別するようになりました。
こんなかんじ。上がHTTPS、下がHTTP です。
うちのエマの日記も、HTTPS化しないとなんだろうな。。。とおもいながら、手間だししばらくアクセス数がさがるっていうし、ってことで放置してました。
が、サイトの不具合があって、どうせならってことで、おもいつきでHTTPS化に踏み切りました。
以降、HTTPS化のステップや気をつけることをまとめます。
はてなブログをHTTPS化する
はてなブログをHTTPS化するのはとっても簡単です。管理画面の設定欄を２回ほどクリックするだけで、完了してしまいます。
まだ記事数も少ない新しいブログやこれから始める方（いまブログを作成すると最初からhttps:// なんですね）は、気にすることないとおもいますが、うちの「黒シュナエマの日記」みたいに３年も経っているとやっておくことがいろいろあるみたいなのでリストアップしました。
HTTPS化の前にリンクやカスタマイズ箇所をチェック
”デザインテーマについて
デザインテーマのうち、はてなブログの提供する公式テーマは、混在コンテンツ（Mixed Content）が起きないよう修正を完了しています。それ以外のテーマをご利用の方、ご自身でカスタマイズしている方は、以下の方法でご確認ください。デザインテーマで、混在コンテンツが発生すると、表示が大きく崩れることがあるのでご注意ください。”
はてなが提供するドメインのブログで、HTTPSで配信できる仕組みの提供を開始しました（追記あり） - はてなブログ開発ブログ
ということで、公式テーマは比較的安心してhttps化できそうです。が、カスタマイズしていたり、古い画像リンクを貼っていたりして、http:// になっていると、自動的にhttps://にならないから自分で置き換えてね、っていうことらしい。
たしかに、ナビゲーションバーのカテゴリーや、JQueryを読み込んでいるところとか、http:// 直書きの部分を見つけましたので事前にhttps://に修正します。
チェックがおわったらHTTPS化
準備が終わるといよいよHTTPS化です。
管理画面から 設定 ＞ 詳細設定 を選択し、HTTPS配信 の項目に行きます。
「HTTPS配信状況を確認する」をクリックすると下の画面に。
あとに戻れないって。。。 どきどきしますが、もう覚悟はできてるはず。
勢いよくクリックしましょう。
そして検索バーが前述の「保護された通信」になっていることを確認しますと...。
えぇぇ...
これからが大変 ページごとに検証を繰り返す
事前準備でもありましたが、HTTPリンクなど混在コンテンツだと「保護された通信」とならないので、いちいちページごとにhttp:// 系が残ってないか確認します。
混在コンテンツの調べ方
Chromeでチェックするページを右クリックし、「検証」をクリックすると右側にこんなのが表示されます。
１つ目は、fotolifeの画像がhttpになっているらしい。トップページの画像だからヘッダーのエマですかね。
２つ目のjqueryは、調べてみるとブログ村のランキングバナーでした。
どちらも、貼り替えてみます。すると...
できましたっ！
無事に「保護された通信」になりました！
ついでにヘッダーの画像も変えといた。
この検証チェックで気づいたのですが、「ブログ村」に登録している「黒シュナエマの日記」のURLも、httpからhttpsに変えとかないと、でした。
検証していてわかったことが１つ。確実にサムネイル画像がhttpsになってない...。
Google Analyticsの設定
アナリティクスの管理 ＞ プロパティ設定に、「デフォルトのURL」という項目があります。
赤枠部分がプルダウンになっているので、https://に変更し、画面したの保存ボタンを押します。
Google Search Consoleは新規追加
サーチコンソールは、プロパティの追加をクリックして新たなサイトを登録するイメージです。
まとめ
- 事前チェックして予めhttp → https 変更
- はてなブログの設定で、https化 （後戻り不可！）
- ページ表示し検索バーでチェック
- 検証ツールでエラー内容を確認し対策
- ブログ村のURL登録変更
- Google Analytics登録変更
- Google Search Console 新規追加
- "3"と"4"のループ（終わるまで）
HTTPSへの変更は調子いいんですが、８番が気が遠くなる.....。
まぁ、記事整理のつもりで気長にやっていきます。
