【はてなブログ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化に対応しているか確認する

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

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

本番のブログをバックアップするためにデータをエクスポートする
テスト用のブログを新しく作る
テスト用のブログにバックアップデータをインポートする
テスト用のブログに文章と画像が見えるようになる
本番のブログで自分がカスタマイズした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など４カ所ぐらいをhttpsへ置換
a href="http~"はそのままさわらず、他のhttpは全てhttpsに置き換える
はてなブックマークの数字の取得コードを修正する
他所のブログの更新を管理するブログパーツ「ひとくり」はhttpsに対応していなかったので削除（マロンが好きなので今後対応してほしい）
デザインのくずれなど、大きなエラーがないことを確認する

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

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

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

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

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

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

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

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

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

sitemap_xmlをアドレスに入れてサイトマップを送信しました。（後にsitemap_xmlが間違いであると気が付きました）

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

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

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

2019年4月追記

sitemap_xmlは間違い、サイトマップの送信は取得できていませんでした。

正しくはsitemap.xml、送信をやり直すと成功しました。

ヘッダーにあるグローバルメニューのカテゴリートップのhttpもhttpsに置き換えました。

まとめ

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

みとべのできるかな

インデックス投資（株も）やってます。