Colorful Days

様々な事に興味がある筆者の日々

今更はてなブログをSSL化(https://)にしてみた

f:id:cristarin1120biz:20180730123625p:plain

今更ですが、このブログ。はてなブログSSL化することにしました。
なかなか大変という噂もあるので備忘録として活用し
同じようにまだSSL化していない方への後押しになれるよう記事にしますね。

 

 

 

きっかけ

 

SSL…? https://…?
といった状態で放置していましたがドメインの取得先からメールが来ました。

 

■「Google Chrome」の仕様変更による影響
----------------------------------------
今月(2018年7月)にGoogleからリリースされるWebブラウザ「Chrome68」では、
SSL対応を行っていないWebサイト(httpサイト)を開くと、アドレスバーに

【保護されていません】(=安全ではないページ)

と警告が表示されるようになります。

警告が表示されないようにするために、
Webブラウザ「Chrome68」リリース前にWebサイトの常時SSL対応を行うことを
お勧めいたします。

 

 んーそうかぁ

やらないとか。

 

 

ということで情報収集。
なんとなく調べながらやれば行けるかなと思い、やってみることにしました。

 

情報収集先

 

こちらがとてもわかりやすそうな感じだったので参考にさせて頂きました。

happylife-tsubuyaki.hatenablog.com

 

実行します!

 

の前に。万が一ってことがあるそうで、失敗しても元に戻すことができないようなのでブログのバックアップを取っておきましょう。

 

バックアップ方法

管理画面の設定>詳細設定の下の方

エクスポート>記事のバックアップと製本サービス

からエクスポートされたものをダウンロードしてPCに保存します。

 

メモに表示されるテキストを大事に保存しておきます。
何も問題が起きなければいいんですが…

 

SSL化(https://)する

こちらはめちゃくちゃ簡単。
けれど、その後の後始末が大変みたい。

管理画面から、設定>詳細設定の上の方に、HTTPS配信という項目があります。

こちらを選択。そして変更するを押す。

 

できた、めちゃかんたーん!

すると、HPのURLが変わります。

f:id:cristarin1120biz:20180712170743p:plain

 

このように保護された通信という表示に変われば無事SSL化が完了です。
あとは細かいことをやっていく必要があります。

 

全てのページをチェックする

記事が多い人は大変だと思いますが、全てのページがきちんと開けるかテストをしましょう。

 

過去記事のツイートbotのURLを変更する

これはやってる人限定です。
http://~になっているのをhttps://に変更するだけ。

つまりsを入れるだけの作業。

眠くなる…

 

Google Analyticsの設定

 

Google Analyticsを開き、アナリティクスの管理>プロパティ設定を開くと、『デフォルトのURL』という項目があります。

プルダウンを押すと、http→httpsに変更できます。
これでOK。

 

Google Search Consoleに追加

これにはちょっとつまづきました。

 

 

まずはプロパティを追加にして、今までのhttp版を消さないようにします。

すると、確認ができません!みたいな画面になるかと思います。

 

 

ふっざけんな! なんだそれ! って思いましたがこういうときこそブロガーは冷静に検索です…

 

 

すると、ありました。

別の方法というところのHTMLタグを選択。
metaタグというものがでます。
これを一旦、メモ帳に貼り付けします。

 

 

貼り付けたメタタグ内の『content="~~~"/>』の~~~の部分をコピーします。

 

 

はてなブログの設定>詳細設定>解析ツール>Google Search Consoleに貼り付けします。
その後、Google Search Consoleで確認を行うと無事クリアとなります。

 

ブログのカスマイズがぶっ壊れる

SSL化のせいですかね…見た目がぶっ壊れましたw
相当なぶっ壊れ方したので画像を収めるどころの精神状態ではなかったですw


一応全部消し飛んでしまうと思ったので、デザインCSSやら設定を全部メモに入れました。

 

その後、元々使っていたZENO-TEALを再度インストールし直しました。

 

ですが、ZENO-TEALは生きているのに、カラー設定が反映しない!
一体何故だ…

 

こんなところで躓いていたらいつまで立ってもブログが書けなくなってしまうと思ったので一旦この深緑? みたいな色で行こうと思います。

 

おまけにスマホ版のトップメニューがスクロールができなくなりました…

 

 

これに関してはまた後ほど色々試していきます。

 

 

 

最後に

 

とりあえずブログがまともに使えるようになったのでよかったです。

 

よくPVが落ち込むという記載を見ましたが、自分の場合は元々2桁PVぐらいなので変化はあまりわかりませんでしたw

 

また、なにかわかりましたら追記していきます。