アメリカ生活いろはのい〜テキサスからカリフォルニアへ移住〜

国際結婚した主婦のゆる〜りアメリカ生活

はてなブログで独自ドメインのHTTPS配信を有効にする方法

f:id:americanlife:20180823064257j:plain


ついに当ブログ『 アメリカ生活いろはのい 』もHTTPS配信を有効にしました。以前から気になってはいたのですが、やるべきことが多くて面倒そうだったので、そのままにしていました。でもこのままだと何かと不都合が出てくるかもしれないと思い、HTTPS化することにしました。


でも終わってみると難しいこともなく、意外と簡単にできました。それもこれも「 するべきこと 」「 HTTPS化の手順 」をわかり易く説明しているサイトのお陰です。本当にありがとうございます。


HTTPS化のために「 するべきこと 」と「 手順 」

HTTPS配信を有効にするために、参考にしたサイトはこちらです。

blog.minimal-green.com


とても説明がわかり易く、面倒なことが苦手な私にもこれならできると思えました。(笑)というのもHTTPS化をするために、事前にするべきことが多いと勝手に思っていましたが、そうではないことが分かったからです。


HTTPS化対応チェックリスト
①記事のバックアップを取る
②2016年以前の記事の画像のURLや広告コードをhttpsへ
③CSSや記事上記事下、サイドバーなどカスタマイズした箇所の画像やJavascriptソースをhttpsへ

④HTTPSを有効にする
⑤Mixed Contentが発生していないか確認
⑥Upgrade Insecure Requestsのメタタグをheadに入れる(⑤で問題ない場合はやらなくてもOK)
⑦Google Search Consoleやアナリティクスの再設定

面倒な人は
④HTTPSを有効にする
⑤Mixed Contentが発生していないか確認
⑥Upgrade Insecure Requestsのメタタグをheadに入れる
の後に画像やソースを修正していっても良いと思います。

はてなブログのHTTPS化の対応やることリスト【独自ドメイン・はてなドメイン】 - Hatena Blog Theme Custom



特に嬉しかったのは、面倒な人は④~⑥を先にしても大丈夫なのが分かったことです。でも結局は後回しにするだけで、すべきことが減るわけでは無いので、順番どおりにしましたが。。。


なお、②と③が一番面倒で時間のかかる作業になりますが、②は2016年以前の記事がないのでする必要がなく、③は思った以上に修正箇所が少なかったので短時間で終わりました。


また、忘れてしまいがちなはてなブックマーク数をカウントするコードの差し替えについても書かれていて助かりました。これを忘れるとブックマーク数が表示されなくなりますよ。


はてなブログでHTTPS配信を有効にする

はてなブログでHTTPS化をするためには、HTTPS配信を有効にする必要があります。その方法はとても簡単です。「 ダッシュボード 」→ 「 設定 」→ 「 詳細設定 」の画面にある、HTTPS配信を『 有効 』設定にするだけです。


f:id:americanlife:20180825091004j:plain



初めは『 無効 』設定になっているので、「 HTTPS配信の状況を確認する 」をクリックして有効にします。



f:id:americanlife:20180825092046j:plain


そして「 設定を変更しました 」と画面表示されれば、完了です。


HTTPS化によって起こった不具合について

調べたところによると、サイトによってはデザインが崩れてしまうことがあるそうですが、当サイトではありませんでした。その場合には、デザインを再インストールすると直ったりするようです。


ひとつ不具合があったのは、スマホのプロフィール画像が表示されなくなったことです。念のためと思い、画像のURLをHTTPS化の前と後で比較してみると一部が変わっていることに気がつきました。そのため、画像のURLを書き換えることで問題は解決できました。


「 はてなブログで画像のURLを取得 」する方法については、こちらの記事にあります。
www.americalife.net


まとめ

はてなブログでの独自ドメインのHTTPS配信が始まってから、2ヶ月以上が過ぎてしまいましたが、ようやくHTTPS化することができました。相変わらず行動に移すのが遅いですが、とりあえずこれで一安心です。