はてなブログでHTTPS化した場合のGoogleアナリティクスの設定についてのメモ。
HTTPSの設定を行ったら色々と合わせて変えなければダメな部分がありました。
当記事ははてなブログでHTTP運用していた方向けの内容になります。
はてなブログでHTTPS設定を行った
最近、はてなブログでHTTPS（SSL）設定が行えるようになったので、このブログでもその設定を行いました。 SSLについてここで詳しくは書きませんが、HTTPの通信と比べてHTTPSでの通信はその安全性が高まります。
▼はてなブログのヘルプ help.hatenablog.com
HTTPS化に合わせた設定の見直し
HTTPS化を行うと自サイトのURLがhttp://～からhttps://～に変わります。
つまり、設定などでhttpで指定されている箇所があればhttpsに修正する必要があるということです。
また、画像等のコンテンツについてhttp指定のURLが含まれている場合も混在コンテンツとして警告が出てしまいますので、それも修正する必要があります。
当ブログでもこれらの修正は行いましたので、それぞれの修正方法について書きます。
Googleアナリティクスの修正箇所
Googleアナリティクスはプロパティとビューの２箇所を修正しなければなりません。 まずはGoogleアナリティクスの左バーより管理を選択して管理画面を開きます。
まずはプロパティの設定から。
管理画面のプロパティからプロパティ設定を選択し、デフォルトのURLの設定をhttp://からhttps://に変更します。
デフォルトのビューが外れてしまった場合は、すべてのウェブサイトのデータを選択します。
以上２点の選択が完了したら保存して設定を適用します。
次はビューの設定です。
管理画面のビューからビューの設定を選択し、ウェブサイトのURLの設定をhttp://からhttps://に変更します。
完了したら保存して設定を適用します。
Googleアナリティクスの設定は以上で完了になります。
この設定は行わなくても分析自体はされるそうですが、不都合が生じることもあるそうです。
httpのままの設定にしているのは実態に合っていない上にメリットもないので変更は行ったほうが良いです。
はてなブログの設定
はてなブログの設定も変更する必要があります。 HTTP化を行った場合、混在コンテンツとしてブラウザの警告が出る場合があるためです。
最初の HTML が安全な HTTPS 接続で読み込まれ、その他のリソース（画像、動画、スタイルシート、スクリプトなど）が安全ではない HTTP 接続で読み込まれると、混合コンテンツが発生します。 これが混合コンテンツと呼ばれるのは、同じページを表示するために HTTP と HTTPS 両方のコンテンツが読み込まれているためで、最初のリクエストは HTTPS で保護されています。 最新のブラウザでは、この種のコンテンツに関する警告が表示され、このページに安全でないリソースが含まれていることがユーザーに示されます。
混合コンテンツとは | Web | Google Developersより引用
要はHTTPのURLが含まれた記述がある場合には安全性が低くなるため警告が出るということですね。
混在コンテンツがある場合、Chromeでどう表示されるか？
混在コンテンツが存在する場合、図の赤枠部分のように警告マークが表示されます。 マークをクリックするとメッセージが表示されます。
ここで安全でないスクリプトを読み込むを選択すると次のように表示されます。
やはり混在コンテンツを無くさない限りはダメなようです。
混在コンテンツを解消する
当ブログの場合、ブログデザインのCSSに含まれるURLが混在コンテンツの原因となっていました。
赤枠で囲った部分にhttp://となっている部分があります。
はてなブログを使っている多くの方が対象となりそうなのはブログテーマですね。
テーマによってはHTTPS対応していないものもあるそうですが、私の使っているInnocentテーマは大丈夫のようでした。
対応しているテーマでもデザインCSSに記述されているURLを以下の通り変更する必要があります。
@import url("http://hatenablog.com/theme/～～～～～～"); ↓ @import url("https://hatenablog.com/theme/～～～～～～");
基本はGoogleアナリティクスの時と同じくhttp://をhttps://に変更するだけです。 当ブログの場合、記事下にもhttp://の記述があったので同時に修正を行いました。
URLを書き換える時にhttps://で相手方が存在するかは確認しておいた方が良いと思います。 存在しなければ当然ながらそのURLは使えませんので…
混在コンテンツが解消された時、どう表示されるか
設定が完了したらブログの表示を確認します。 画像の様に鍵マークと保護された通信という文字が表示されていればOKです。 また、警告マークが表示されていた部分に何も表示されていないことも確認しましょう。
HTTPS化するにあたって行った設定は以上になります。
Googleアナリティクスの設定はポチポチマウスで完了するので簡単ですね。
はてなブログの設定については一人一人違うので応用は必要ですが、作業自体はURLの書き換え作業なので単純だと思います。
ただし、上にも書きましたが、URLのhttp://をhttps://に単に変えれば良いというわけではなく、リンク先がHTTPSに対応しているかどうかの確認が必須になります。 そこらへんは事前に確認した上でHTTPS化すれば、サクッと終わるなという印象でした。
