飛ぶテノリ

アニメオタクの雑記ブログ

“飛ぶテノリ”

【はてなブログ】独自ドメインをSSL化した後のヘッダ画像設定変更について

スポンサーリンク

f:id:tetetenori:20180616112809p:plain

 

こんにちはテノリです!

 

ついにはてなブログの独自ドメインでもSSL化対応!!


ずっと「保護されていない通信」マークが出るのが嫌だったんですよね…。

 

f:id:tetetenori:20180616095700p:plain

 

保護されていない通信のままだと2018年7月からグーグルさんから警告文が出るようになるとのことで、proでお金払ってるんやから早く対応してくれー!!と思っていました。

 

ブログのセキュリティが上がったところで特に何もないとは思います。笑

 

早速導入したのですが、ちょっと手こずったのでメモ書きします。

 

 

SSL化対応の方法

 

SSL化の方法自体は簡単でした。

 

設定>詳細設定>HTTPS配信から変更できました。

 

脅されるのでちょっとためらいました。

f:id:tetetenori:20180616101755p:plain

 

Googleアナリティクス、Google Search Consoleの変更についてはこちらの記事を参考にしました。いつもありがとうございます。


SSL化が完了しない問題が発生

 

サイトに飛んでみると、なんか出ました

 

f:id:tetetenori:20180616101954p:plain

 

なんで!?

 

サイトに飛んで確認してみると、まだ対応できていないじゃありませんか。

 

 が出たまま)

 

原因を調べてみると、ヘッダ画像のURLがhttpのままだと反映されないらしい。

help.hatenablog.com

 

検証してみると、たしかにヘッダ画像のところがhttpのまま!

 

f:id:tetetenori:20180616103524p:plain

 

ふーんなるほどヘッダ画像の変更をするのね。

 

もうどうやってやったかなんて忘れた〜〜〜〜

 

 

ってなりましたけど、頑張って設定し直しました。

 

ヘッダ画像変更の手順

はてなフォトライフから新しくhttpsのimgタグを取得する

 

まずは「はてなフォトライフ」に飛びます。

はてなフォトライフ - 無料・大容量、写真を共有できるウェブアルバム

 

「マイフォト」をクリックし、「フォルダを編集」を選択します。

 

f:id:tetetenori:20180616104704p:plain

 

ヘッダ画像を選択して、「ブログに貼り付ける」をクリックします。

 

 

f:id:tetetenori:20180616105233p:plain

 

HTMLタグが表示されます。

 

”img src”の後ろ、https〜からjpgまでをコピーします。全体コピーになってしまうので、一度メモ帳などに貼り付けてからコピーするとやりやすいです。

 

f:id:tetetenori:20180616110032p:plain

 

現行と同じものでよければ、新しく画像をアップロードする必要はありません。

 

はてなブログのヘッダを更新する

 

はてなブログの編集画面から、デザイン>スパナマーク>ヘッダ>タイトル下のHTMLを選んで、先ほどコピーしたものを貼り付けて置き換えます。

 

f:id:tetetenori:20180616111011p:plain

 

変更を保存して(ここ重要)ブログを確認すると、「保護された通信」になりました!!

 

f:id:tetetenori:20180616111235p:plain

 

めでたしめでたし。

 

追記:実は目次が消えてた

 

記事を周回していると、なんと「目次」が消えていることに気付きました。

 

超焦った。

 

http: になっているところを片っ端からhttps: に修正すると、回復しました。

 

www.moelogue.com

 

参考にさせていただきました。ありがとうございます!

 

 

さいごに

 

これで安心してブログ運営ができます。

 

同じように困っている方がいれば、参考にしていただけると嬉しいです。

 

 

ではまた〜!