みとべのできるかな

自分と家族を大事にしつつ、そこそこ仕事しながら、わくわく英語を学んで、たまにもやっとして、あまった時間で貯金と投資するブログ

【はてなブログproのHTTPS化】手動でhttpsに置換、数時間放置したら「保護された通信」が表示された

はてなブログproで独自ドメインを使用しているので、自分でhttpからhttps(Hyper Text Transfer Protocol Secure)に移行しました。

はてなブログに来たのが2017年4月で、画像やブログカードはhttpsに既に対応しており、カスタマイズは少なく、記事は270ぐらいなので、かなり作業としては楽でした。

2017年より前にブログを始めた人や記事が多い人はけっこう大変だと思います。

忘備録としてHTTPS化の流れをまとめました。

始めに先人の記事をよく読むのが重要

先にHTTPS化の作業をしたブログをはてなブックマークのタグで「HTTPS」で検索してよく読みます。

とくにブログを始めたタイミングが自分に近い人の記事が参考になります。

blog.minimal-green.com

www.foxism.jp

happylife-tsubuyaki.hatenablog.com

育児や他の用事があるので手の空いた合間に、数日かけて7つぐらい記事を読みました。

  • src="http~"やurl('http://~で呼び出している場合のみ修正が必要です。a href="http~"のリンクは修正する必要がありません(重要!!)
  • はてなブログで使用しているデザインのテーマがHTTPS化に対応しているか確認する

はてなブログで人気のテーマ20種類のHTTPS化対応状況を調べてみる - FOXISM

バックアップしてテスト用ブログを作る

公開しているブログ=本番のブログをいきなり変更するのはダメ!!とみんな書いているので、本番ブログのバックアップとテスト用のブログを作りました。

  • 本番のブログをバックアップするためにデータをエクスポートする
  • テスト用のブログを新しく作る
  • テスト用のブログにバックアップデータをインポートする
  • テスト用のブログに文章と画像が見えるようになる
  • 本番のブログで自分がカスタマイズしたHTMLとCSSをコピーしてテスト用のブログにペーストする

テスト用ブログでHTTPSの確認

テスト用のブログを初めて作りました。バックアップも始めてでした。

www.tamashii-yusaburuyo.work

  • テスト用のブログなので、設定:公開設定で自分のだけに公開
  • 詳細設定:検索エンジンの最適化で、検索されないように設定
  • テスト用ブログはすでにHTTPSが有効になっており、「保護された通信」の表示がでる
  • デザイン、記事の文章と画像、ツイッター、すべて表示されることを確認する
  • カスタマイズしたシェアボタンのはてなブックマークの数字がグルグルして表示されない、これはHTTPSに対応していないから
  • アドセンスは表示されない
  • ブログカード、グローバルメニュー、内部へのリンク、外部へのリンク、フォローボタン、ヨメレバなどのリンクは全て有効

一括置換ツールもありますが、私はわけがわからないので、一つ一つ確認して手動で置き換えました

テスト用ブログでhttpからhttpsへ置き換え

aniota-alvarado.hatenablog.com

  • テスト用ブログのHTMLとCSSをhttpからhttpsへ置き換える
  • 検索しながら一つ一つ確認しながら手作業で置き換えた
  • 「デザイン」のタイトル下、フッター、CSSデザインのsrc="https:、@import url("httpsなど4カ所ぐらいをhttpsへ置換
  • a href="http~"はそのままさわらず、他のhttpは全てhttpsに置き換える
  • はてなブックマークの数字の取得コードを修正する
  • 他所のブログの更新を管理するブログパーツ「ひとくり」はhttpsに対応していなかったので削除(マロンが好きなので今後対応してほしい)
  • デザインのくずれなど、大きなエラーがないことを確認する

テスト用ブログでやってみた後、本番のブログを同じように修正

他の用事の合間に、慌てずゆっくり作業を進めました。

テスト用ブログでやったhttpsへの置き換えを、メモを見ながら、本番のブログで同じところを修正しました。

  • テスト用ブログと同じところを本番ブログでも置換する
  • 本番ブログの設定からHTTPSを有効にする(元に戻せないので注意)
  • 「保護された通信」の表示がでない、HTTPS化されていない
  • 右クリック、検索で、画面右に呪文のようなコードがでる
  • 右上のエラー赤丸をクリックすると、エラーの詳しい場所が表示される
  • Mixed Contentはヘッダー画像と、未修正のフッターのhttpの2つだったので、修正する
  • ヘッダーの画像はパソコンで保存していた元ファイルから再度読み込み
  • 午後にブログを見たら、「保護された通信」の表示がでていた。トップページのHTTPS化は完了
  • 最近の記事を確認してもHTTPS化されている
  • 全ての記事がHTTPS化されているかどうかは、これから確認する

修正を終わった直後は、まだ「保護された通信」の表示はでておらず、まあそんな簡単には終わらないよね、と思って、数時間後にブラウザを立ち上げたら「保護された通信」の表示がでてビックリしました。

「保護された通信」の表示がでるまで、時間がかかることがあるのかしら?

Googleさんへの対応が完了なのかは自信がない

Google アナリティクスへは管理、プロパティ設定で、「デフォルトのURL」をプルダウンでhttpsを選びます。

Google Search Consoleは「プロパティを追加」でhttpsのブログアドレスを新しく追加しました。サイトマップを忘れず送った方がいい、と書かれていましたが、サイトマップはないので送れないから、これで完了なのかと思います。

sitemap_xmlをアドレスに入れてサイトマップを送信しました。

永久保存版!はてなブログのサイトマップはこれだ!|いまいちど.ログ

Google アドセンスは何もしていません、何もしなくていいのか??、もうちょっと調べます。

Googleさん、よくわかりません。

まとめ

  • 2017年の4月からはてなブログに移動したのでHTTPS化の作業は楽だった
  • 先人の記事を読むのに数日
  • テストブログの作成に1時間
  • テストブログでhttpsへ置換して、本番のブログで同じことをして1時間
  • a href="http~"はそのままさわらず、他のhttpは全てhttpsに置き換える
  • そのあと、数時間放置したら「保護された通信」が表示された
  • Googleさんへの対応は、作業が残っているかもしれない