はてなブログをHTTPS(保護された通信)へ変更して調整したこと

はてなブログをHTTPSに変更

f:id:CloverS:20180907053530j:plain

はてなブログが2018年6月11日からHTTPSに対応していたのを知ったので、このブログもHTTPSに対応させました。気付くのが遅かったです…。

2018年7月からGoogleは暗号化していないページに、Chromeでアクセスすると警告を出すようになったそうです。警告が出てきたら怖くなってすぐ閉じてしまいますよね。ちなみに、2018年2月22日以降にはてなブログをはじめた人は最初からHTTPSに設定されているとのこと。

 

HTTPSのメリット

f:id:CloverS:20180907053538j:plain

httpからhttpsに変更すると、SSLによる暗号化通信になります。以下のようなメリットがあるらしい。

  • セキュリティアップ
  • 信頼性アップ
  • SEOにちょっとだけ有利
  • HTTP/2対応ブラウザで表示速度が上がる
  • ログ解析の精度が上がる

メリットが多いですね。ブログを開いたら警告が出るのはよろしくないので、それを回避するだけでも十分なメリットかなと思います。

 

HTTPSのデメリット

f:id:CloverS:20180907053544j:plain

長くブログを書いている人の方がデメリットがあるみたいです。

  • Facebook「いいね!」のカウントがリセットされる
  • 検索順位が一時的に下がる
  • HTTPSへの対応が必要(過去記事とか)

私の場合は残念なことにFacebookの「いいね!」は、されたことがないので問題なし。またHTTPSへの流れが主流になってきているので、将来的に暗号化された通信がデフォルトになると思いました。

 

HTTPSへ変更

f:id:CloverS:20180906062924j:plain

設定 ⇒ 詳細設定 ⇒ エクスポート

始める前に念のため、バックアップを取っておくと良いとありました。私はすっかり忘れてしてませんでしたが…。

 

HTTPS化のボタンを押す

f:id:CloverS:20180906063839j:plain

設定 ⇒ 詳細設定 ⇒ HTTPS配信

画像は有効後ですが、有効にする前は「無効」になっています。「~配信の状況を確認する」を押して、有効にするボタンを押すとすぐにHTTPSへ切り替わります。ここからが大変。

 

HTTPS変更でのエラーを確認

f:id:CloverS:20180906060545j:plain

「保護されていません」とか「保護されていない通信」になってないかを確認。だいたいが、スタイルシートやヘッダーに設定したコードがエラーになってます。

f:id:CloverS:20180907042127j:plain

Chromeだと「F12」でエラーがあるか確認できます。右下の黄色と赤で表示されているところがエラーです。

 

HTTPSへ対応させる

こちらの記事を参考にさせていただきました。

http://www.idea-iroiro.com/ ⇒ //www.idea-iroiro.com/

「http:」を削除することで「http」「https」どちらにも対応できるとのこと。すでに「https」に設定されているリンクを除いて、ブログ全体から「http」を削除しました。

 

全体設定を変更していく

f:id:CloverS:20180906064958j:plain

修正する場所は、カスタマイズ設定をしているところ。私の場合は、記事上・下、サイドバー、デザインCSSを変更しました。

設定 ⇒ 詳細設定 ⇒ 検索エンジン最適化 ⇒ headに要素を追加

他にheadで読み込んでいる設定があるので、ここも変更しました。

 

はてなブックマークのカウンターを変更 

f:id:CloverS:20180907042934j:plain

参考にさせていただいた記事はこちら。

api.b.st-hatena.com ⇒ b.hatena.ne.jp

はてなブックマークの登録数がクルクル回った状態のまま表示されなくなりました。はてなブログが提供しているデフォルトのカウンターではなかったのが原因かもしれません。なので、集計しているリンクを変更しています。Facebookは上に書いた通りリセットされます。

 

過去記事を変更

面倒なのは過去記事の調整。HTTPでリンクや画像が貼られているので、修正しないといけません。「はてなフォトライフ」にアップロードされている画像は、記事を更新し直すだけで自動的に修正されるとのこと。私の場合やってみたんですが、うまくいかなかったので手作業で全記事変更しました。

 

「Analytics」「Search Console」の再設定

こちらの記事を参考にさせていただきました。はてなブログの設定ではないですが、「Analytics」と「Search Console」を使用しているので再設定しました。

f:id:CloverS:20180907051844j:plain

「Analytics」は設定から、「プロパティ設定」「ビュー設定」の設定を変更。

f:id:CloverS:20180907051855j:plain

変更したのは「デフォルトの URL」で「https://」を選択。

 

f:id:CloverS:20180907052417j:plain

「Search Console」は「https://」で登録が必要です。「プロパティを追加」から、サイトを新規で登録します。

 

あとがき

全て変更するのにかなり時間がかかりました。調べながらの作業になったので、必要以上に時間がかかったような気がします。事前にある程度調べておけばよかった…。これから変更しようと考えている方は、まとまった時間が取れるときに作業したほうが良いと思います。