うたたねモード

セミリタイア?っぽく生きてみる。

【はてなブログ】独自ドメインをHTTPS化しました

スポンサーリンク

先日、Google Chrome最新版で、HTTPサイトに警告が表示されるようになったというニュースを目にしました。

 

INTERNET Watch/2018年7月25日 より

「Google Chrome 68」公開、HTTPサイトには容赦なく警告を表示する仕様に

はてなブログでも独自ドメインのHTTPS化が対応となり、実際にHTTPS化したブログさまもチラホラ見かけていましたので、これを機に、このブログでもHTTPS化に踏み切ることにしました。

 

備忘録としてHTTPS化の手順をまとめておきたいと思います。

 

 

HTTPS化の手順

①ブログのバックアップ

 まず、ブログをバックアップします(Movable Type形式)。

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

→記事のバックアップと製本サービス

→ダウンロードする 

ダウンロードしたファイル(txtファイル)をローカルに保存します。

 

②デザインのバックアップ

デザイン周りの HTML、JavaScript、CSS などの記述を保存します。

デザイン>カスタマイズ(スパナマーク)>ヘッダ、記事、サイドバー、フッタ、デザインCSS

上記各項目のコードをそれぞれコピペして保存。

 

③ 混在コンテンツ(Mixed Contents)の事前確認・修正

これは、HTTPS化した後に行う作業ですが、このブログはまだ記事数が少ないので、事前に引っかかりそうな部分をチェック、修正します。

 

具体的には、

<img src="http://...">

@import url('http://...' .....

<script src="http://..." ...>

のような記述が引っかかるようなので、

 

「記事の管理」>右上の検索窓の中に

src="http://

@import url('http://

といった文字列を入れ、すべての記事(一括)で検索をかけます。

 

そこでヒットした文字列がある記事について、編集画面に入り、

http → https

と修正します。

 

リンク先が正しいかどうかなど、プレビューで確認してください。

 

④デザインのHTML・CSSの修正

 デザイン周りの HTML、JavaScript、CSS などの記述を修正します。

デザイン>カスタマイズ(スパナマーク)>ヘッダ、記事、サイドバー、フッタ、デザインCSS

上記各項目のコードにおいて、

http → https

と修正します。

ここで再びバックアップ。

 

⑤HTTPS化 

 いよいよ、HTTPS化を行います。

HTTPS化は一度行うと、元には戻せません。しっかりと事前準備を。

 

「設定」>「詳細設定」>「HTTPS配信」

→HTTPS配信の状況を確認する

→「変更する」ボタン

→「この操作は取り消すことができません。HTTPS配信を有効にしますか?」

→「OK」ボタン

 

以上で、HTTPS化は完了です。

 

⑥ブログ表示の確認

ブラウザで自分のブログにアクセスして表示を確認します。

ブログにアクセスすることができ、アドレスバーのブログURL左側に、「(鍵マーク)保護された通信」と表示されていればOKです。

 

⑦Upgrade Insecure Requestsの設定

これは、記事内に http:// の記述が残っていた場合、ブラウザ側で強制的に https:// に修正する機能だそうです。

念のため、設定しておきます。

 

「設定」>「詳細設定」>「headに要素を追加」に、

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

このスクリプトを入れます。

 

⑧Googleアナリティクスの設定

Googleアナリティクスで、ブログURLを変更します。

a.プロパティ設定

「ホーム」>「管理」

>(中央の列/自分のブログ)「プロパティ設定」

>「デフォルトのURL」

→ http:// → https:// に変更

→「保存」ボタン

 

b.ビューの設定 

「ホーム」>「管理」

>(右の列/すべてのウェブサイトのデータ)「ビューの設定」

>「ウェブサイトのURL」

→ http:// → https:// に変更

→「保存」ボタン

 

⑨Google Search Consoleの設定

a.HTTPS化したアドレスの追加

新規にHTTPS化したアドレスを追加します。

「プロパティを追加」

→(ウェブサイト)https://〇〇〇~

→「追加」ボタン

→所有権の確認画面

→「おすすめの方法」または「別の方法」

→(ラジオボタン)「HTMLタグ」を選択

→<meta>タグをコピー

→はてなブログ「設定」>「詳細設定」>「headに要素を追加」に<meta>タグを貼り付け

→「確認」ボタン

→「所有権が確認されました」

これで、プロパティが追加されました。

 

先人によると、ドメインが同じなので所有権の確認の必要はなく、特に何も作業せずに「DNS」なんちゃらの画面で確認ボタンを押すと、所有権が確認される、という報告もありましたが、わたしの場合、その方法だと「確認できません」が出てしまってうまくいかなかったような気がします・・・。

よくわかりませんが、HTMLタグによる確認方法であれば確認OKとなることは確かです。

 

b.ウェブサイトのリンクを変更

次に、ウェブサイトのリンクを変更します。

新旧のプロパティにおいて、「ウェブサイトのリンクを変更」から

古いプロパティ(http://〇〇〇~)→リンクを解除

新しいプロパティ(https://〇〇〇~)→リンクを設定

これで、HTTPS化した新しいプロパティにリンクが設定されました。

 

c.サイトマップの送信

最後に、サイトマップを送信します。

新しいプロパティ(https://〇〇〇~)

「クロール」→「サイトマップ」→「サイトマップの追加テスト」

→https://〇〇〇~/sitemap.xml

→送信

直後には「保留」状態となりますが、しばらく時間を置くと(一時間くらい?)処理されて、サイトマップがインデックスされます。

 

これらは、Search Consoleから「検索パフォーマンスを改善します」というタイトルの G-mail が届いて作業をうながされますので、一つ一つ行ってください。

 

⑩ 混在コンテンツ(Mixed Contents)の確認・修正

HTTPS化の前に行った確認・修正ですが、HTTPS化の後にもう一度行います。

ブラウザ(Chrome)の検証で、「Mixed Contents」エラーが出ていないか、過去記事をチェックしていきます。

記事を一つ一つチェックしていく作業は時間がかかりそうなので、今後ゆっくり確認を進めることにします。

 

参考リンク:

help.hatenablog.com

 

※Amazon・楽天などアフィリエイトリンクについて

古い記事だとリンク修正が必要な場合があるということですが、このブログは比較的新しいので、たぶん大丈夫なのではないか、と勝手に思っています。

今後、一応リンクは確認してみますが、修正が必要な場合の手順については、ここでは割愛いたします。

  

トラブル発生と対処法

HTTPS化によって、いくつかのトラブルが発生しました。

トラブル内容と対処法についてです。

 

①HTTPS化後、プレビューでデザインが崩れてしまった

HTTPS化を実行したら、プレビュー画面でデザインが崩れてしまいました。

まったく、デザインCSSが効いていない感じです。

これは、システムがHTTPS化したものの、古いブログテーマとの整合性がとれていないためと思われました。

それゆえ、再度テーマをインストールし直すことにしました。

テーマをインストールし直すと、「デザインCSS」の記述がリセットされてしまうため、バックアップしておきます。

HTTPS化に備えて、すでにこれらはバックアップしてありますので、OK。

再インストールの実行で、プレビュー画面はほぼ復活しました。

細部のデザインは、「デザインCSS」のバックアップをコピペすることで整えられました。

 

②Google AdSenseが一部表示されない

HTTPS化を実行後、一部のアドセンス広告が表示されなくなりました。

具体的には、トップのグローバルナビ下、サイドバーのプロフィール下に手動で入れていた広告が非表示となりました(PC環境において)。

 

この問題については現在調査中ですので、また別の機会にご報告したいと思います。

 

さいごに

以上、はてなブログ独自ドメインでのHTTPS化について、備忘録的まとめでした。

ちょっと面倒といえばめんどうですが、HTTPS化自体はボタンひとつで簡単に終えることができました。

一応、スタンダードになりつつある保護された通信ブログになったということで、ホッとしています。

 

最近、なかなかブログを書くことができずにいますが、やめたというわけではないので、書きたくなったら書く、というスタンスでゆるりと続けていきたいと思っています。

今後とも、よろしくお願いいたします。