理系頭巾の知見

なんちゃって理系の頭巾が知ったことや考えたことをまとめているブログです。

理系頭巾の知見

半分寝てても出来る!「はてなブログhttps化(常時SSL)」5つの作業まとめ

はじめに

"はてなブログ https"

ウスー♪ 頭巾@rikei_zukin)でっす!

はてなブログ公式で「https配信対応するお!(`・ω・)」と発表されたのが2018年2月下旬

help.hatenablog.com

待てど暮らせど音沙汰はなく、設定ページをいつ見てもhttps配信は「無効」のまま

早くしろよ!」と思う一方で、正直変更作業面倒だしこのままでもいいかな⋯⋯?とか思っていたら

つい先日ついにこのブログもhttps配信に変更できるようになっていた⋯⋯

そして勢いで変更してしまった!

"はてなブログ https"

ド深夜に「もう面倒だしやっちまえ⋯⋯」って感じで変更したので、そこから半分寝ながらパパっと作業しました

はてなブログPro→ドメイン登録に伴うアドレス変更よりは簡単に済みます

最初から終わりまで雑ですが今の所アクセス数が激減したとかはないので多分https化に成功したのではないでしょうか

というわけで今回の記事では僕がはてなブログhttps化作業でやった5つのことをご紹介します!

1. https切り替えのボタンを押す

これ見てる人は恐らく押そうとして迷ってる人がほとんどだと思うので手順は割愛

設定からHTTPS配信を有効にするだけです

ちなみに他のブログを見るとバックアップを取っておいたほうがいいと必ず紹介されているんですが

僕はバックアップを取りませんでした

(httpsに変更するだけで記事のデータが吹っ飛ぶとは思えなかったので)

ちゃんと手順を踏んで安全にやりたい人はバックアップ取っておきましょう

雑な僕はとりあえずhttpsに変更してから諸々考えることにしました!

2. デザインCSSとかチェックする

httpsにして最初のめんどくさい作業がこれ

サイト内で自分で設定したメニューバーとかのリンクは当然httpのままなので、これを全部httpsにする必要がある

とりあえず「デザイン」→「カスタマイズ」と進んで

・ヘッダ→タイトル下
・デザインCSS

それぞれのコードを全部コピーして、適当なテキストエディタで"http://"→"https://"の置換を行う

ヘッダ→タイトル下について

"はてなブログ https"

大抵のブログではナビゲーションバーの設定をこの部分で実装してると思う

おそらく自分で設定したものなので変更しなければいけない箇所はすぐわかるはず

ちなみに僕のブログの場合は上の画像で示してある各カテゴリへのアドレスを変更しました

デザインCSSについて

ヘッダ→タイトル下同様"http://"→"https://"の置換をするんだけど

多分ブログによっては変更箇所がない

僕のブログではこの吹き出し↓

ああああああああ

の画像リンク(はてなフォトライフ)がhttpだったので画像を上げ直してアドレスをhttpsのものに変更した

ブログ内でこの吹き出しを多用してる人はこの作業が少し面倒かもしれない

記事上・記事下やフッタは?

ちなみに同じデザインのカスタマイズページには

・記事→記事上・記事下
・フッタ

の項目もあるんだけど、その部分に関しては自分は変更しなかった

理由は変更しなくても普通に動作したため

自分のブログ内へのhttpリンクではなく、他ページのアドレスが全てだったので変更できない(したら動作しなくなる)

ブログによってはこの箇所にページ内リンクを貼ってるのかもしれない

その場合は変更しておこう

これらの作業が無事終わってブログ内のリンクがそれぞれ普通に動けばとりあえずオッケー!

3. Google アナリティクスのアドレス変える

これ簡単

アナリティクスで「管理」→「プロパティ設定」と進んでアドレスの部分で「https」を選択するだけ

"はてなブログ https"

ちなみにGoogle AdsenseやAmazonアフィリエイトはhttps化に伴う作業は必要ありません(ドメイン名で管理されているため)

A8ネットとかもしもアフィリエイトを使用している場合はアドレスを変更しておきましょう

4. Search Consoleに登録しとく

これも簡単

Google Search Consoleのトップページで「プロパティの追加」からhttps化したアドレスを登録する

"はてなブログ https"

ドメインを変更したことのある人や一度Google Seach Consoleを使用した人なら、サイトマップを送信する必要があることはわかると思います

サイトマップ送信の際に入力するのは「sitemap.xml」ですよ

ちなみにアドレス変更の手続きとかはしなくていいようです

っていうかしようとしても無理でした。ドメイン名が同じなのでhttpsにする前のサイトもした後のサイトも同様に扱われるんでしょうね

5. トップページ開こう

ここまで終わればもうhttps化の作業は終ったも同然

トップページを開いてChromeのアドレスバーに「保護された通信」と出るのを確認しよう

"はてなブログ https"

今まではこんな感じで「このサイトへの接続は保護されていません!」とChromeに言われていたのが⋯⋯

"はてなブログ https"

じゃじゃーん!!「保護された通信」に!!

Googleからのお墨付きがもらえたぞーい\(^o^)/

えっ⋯⋯?

「そんな簡単に終わるわけなかろう⋯⋯。見ろ!もう一度しっかりアドレスバーを⋯⋯!」

な⋯⋯なんだこれ⋯⋯!!!

"はてなブログ https"

アドレスバーの1番右側⋯⋯!表示されてやがる!不吉な盾とバツ印⋯⋯!

「愚か愚か⋯⋯Mixed Content(混在コンテンツ)を知らんのか⋯⋯」

ここで半分寝た状態の僕は怒りで目が覚めました

なんだよMixed Contentって!!ふざけんな!!やっぱりめんどくせーじゃねーか!!

⋯⋯それでも大丈夫。コピペ一発でこの問題は解決しました

Mixed Contentはコピペで直せ

help.hatenablog.com

はてなブログ公式↑のページにあるコードをhead要素に追加すればオッケーです

そしたら僕のブログからも盾マークとバツ印が消えました

"はてなブログ https"

綺麗なアドレスバーだろ⋯⋯?https対応してんだぜ、これ⋯⋯。

その他の難しいことはよくわからない

他のhttps配信に変更したらやること〜みたいな記事を見てるとこの他にも色々やってる人はいるようです

印象に残っているのはjQueryを使用している場合の変更点ですかね

でも僕のブログでは必要がなかったのでスルーしました

その他にも手の混んだブログカスタマイズをしている人はやることがあると思います。頑張ってください

とりあえず僕はこれまでに説明したことを実行したところアクセス数も変動していませんし、ブログ内での不具合も見つかっていません

実際にhttps化する時はいろんなブログを参考にしよう!

おまけ

重要度は低いんですがTwitterとかFacebookにブログのURLを貼ってる人は一応変更しておきましょう

僕は夜中にhttps化の作業をして翌日起きて思い出しました

"はてなブログ https"

おわりに

Mixed Content解決の際に僕はコードコピペで終わらせましたが、はてな公式にも記載がある通りそれで不具合が出ることもあるようです

でもまぁコード貼り付けるだけですし、試してみましょう

ドメイン取得・アドレス変更の時の面倒臭さに比べたらhttps化の作業はだいぶ楽だと思います

これでGoogleさんから安心なサイトだと思っていただけるなら安いもんですね

あ、「はてなブログ https」とかで検索するとたくさん出てくると思うんですがここらへんの記事を見ておくと実際の作業時に参考になると思います

blog.minimal-green.com

parupuntenobu.hatenablog.jp

それでは今回はこのへんで!サヨナラっ!