はてなブログ 独自ドメイン HTTPS化！
はてなブログの独自ドメインHTTPS化が開始
去年からはてなブログのHTTPS化は始まっていたみたいですが、独自ドメインにしているサイトは後回しになっていましたが、6/13に対応が開始されました。
HTTPS化方法
上記のはてなブログ開発ブログに載っている通り進めますが、設定画面からHTTPS配信を無効から変更すれば完了です。
以上で終わりですが、その次に出てくる混在コンテンツ（Mixed Content）の対応が少々面倒な様です。
Mixed Content確認手順
Mixed Contentとは何かと言うとHTTPSのサイト内にHTTPのサイトが混在している状態のことを言うらしいです。
簡易確認手順
ブラウザのURLの左側に鍵マークが有ればMixed Contentは無いということです。
鍵マークが無い場合は、HTTPのコンテンツが混ざっている可能性があります。
※記事によっても変わります
詳細確認手順
MacならSafariを開いて、ご自身のブログを表示。
開発→Webインスペクタを表示→コンソール→Command+Fで「mixed」を検索。
※記事によっても変わります
あれば対応が必要で、無ければ対応不要。
これをブログの記事毎にやる必要があります。
そして結果ですが、本記事執筆時点で修正中ではありますが、以下がHTTPでした。
- Amazon商品の画像
- アップロードした一部画像
- サイドバーに追加したFeedlyの登録アイコン
Feedlyは本記事の下の方で修正します。
Amazon商品の画像とアップロードした一部画像に関しては、はてなブログの機能で貼り付けたものですが、これも本記事の下の方で修正します。
アフィリエイト関連の設定変更
私の場合は、Googleアドセンス、Googleアナリティクス、Googleサーチコンソール
それからAmazonアソシエイト、iTunesアフィリエイトを設定していたので修正します。
私の場合は結論から言うと
- はてなブログ側は設定不要
- Googleアドセンスは設定不要
- Googleアナリティクスは設定必要
- Googleサーチコンソールは設定必要
- Amazonアソシエイトは設定不要
- iTunesアフィリエイトは設定必要
でした。
GoogleアドセンスとAmazonアソシエイトはサイトのhttp、httpsを区別していなかったので不要でした。
Googleアナリティクス設定変更
以下のブログを参考にさせて頂きました。
アナリティクスのサイトの管理画面から「プロパティ設定」と「ビューの設定」で登録されているhttpをhttpsに変更するだけです。
Googleサーチコンソールの設定
以下のブログを参考にさせて頂きました。
既存のhttpサイトとは別に新規にhttpsサイトを登録すれば良い様です。
なお、手順の中でサイトの確認をする必要がありますが、はてな側で既に設定されている（サーチコンソールのIDを入力していればOK）のであれば、「HTMLタグ」を選択してはてなブログ側の設定は変えずに確認すれば通ると思います。
Googleアナリティクスとサーチコンソールの修正後
再びGoogleアナリティクスの設定画面にて
サーチコンソールで登録したhttpsの方と連携しなおします。
以下のブログを参考にさせて頂きました。
Googleアナリティクスとサーチコンソールは以上で完了です。
iTunesアフィリエイト
以下のブログを参考にさせて頂きました。
設定→パブリッシャー→ウェブサイト→クリックして編集
にて、httpsのサイトを追加すればOKの様です。
追加と表記された部分をクリックすると以前に登録したウェブサイトが見れますので必要に応じて削除。
Feedlyボタン再作成
Feedlyボタンを再作成しました。
以下のFeedlyのサイトから作成します。
ボタン作成サイト
Step1,2,3と進んでいけば良いですが、URLにはご自身のhttps:からのURLに加えて/feedを追記します。
本サイトの場合はhttps://www.hattotech.com/feed になります。
/feed/にするとなぜかうまくいきませんでした。
そしてコードが作成されますが、このコードないのFeedlyボタン用画像がHTTPなので、手動でhttpからhttpsに書き換えたものをはてなブログに登録しておきます。
Step1で選んだボタン画像によって違いますが、私の場合は、
src='http://s3.feedly.com/img/follows/feedly-follow-rectangle-flat-big_2x.png'
を
src='https://s3.feedly.com/img/follows/feedly-follow-rectangle-flat-big_2x.png'
に修正しました。
はてなブログへの登録場所ですが、私の場合は、設定→デザイン→サイドバーに登録していたので、そこに手動でコードを再登録して完了。
※最初、/feedをつけていなかったのでうまく動作していなかった様ですが解決！
Amazon商品の画像のURL修正
一括変換ツールがあるようですが、面倒くさくなったので、手動で直しました（笑）
各記事を編集モードにしてHTML編集画面にして、Amazonの商品画像のsrcの以下を変更
変更前：http://ecx.
Amazonアソシエイト等で画像を貼ったと思われる記事を編集して直したらブラウザで読み直してブラウザのURLの左側に鍵マークがつけば完了！
という様に直します！
修正漏れは無いと思いたいですがあるかもしれませんね。。
そして共有しておきたい情報ですがあります！
どうも2017年6月以降はAmazon画像URLはHTTPSになっている様に見えます！
あくまでも私の場合だけなのでご参考までに。
アップロードした一部画像のURL修正
はてなブログの機能でアップロードした一部の画像がHTTPでMixedにひっかかってしまったので、srcのURLをhttpからhttpsに修正しました。
普通に表示されているので問題なさそうです。
よく分からないのが、httpのままでもMixedにひっかからない画像もある点ですが、2016年あたりにアップロードしたものがひっかかっている様に見えます。が、とりあえず良しとしましょう。
さいごに
HTTPS化しましたが問題が起こるかどうか少し様子見してみます。
とはいえHTTPに戻せない仕様みたいですけどね！
ではまた！
