浪費家ナッツの投資日記

浪費家によるインデックス投資の積立・高配当米国ETF・高配当国内株の運用日記です

【はてなブログ】独自ドメインでhttpsを有効にしてみた 保護された通信と出ているだけでは安心できない

スポンサーリンク

f:id:mixnats:20180415005104j:plain

 浪費家ナッツ(@rouhi_nats)です。おはようございます。

 

長らく待たされた、独自ドメインを利用しているユーザへのhttps対応やっと来ましたね。私も変更しましたので覚え書きとして記録を残しておきたいと思います。

 

私の場合、ブログ開設が2017年8月と比較的最近です。このためブログ画像は修正不要と変更作業は比較的簡単に済みました。それでも途中つまずいて2時間近くかかりました。

 

【注意】

あくまで私のブログをhttps化した際のメモです。開始時期やカスタマイズ等の違いにより必ず同じではありません。

 

 

  

参考にしたブログ

基本はこれらのブログで紹介されていた通り変更していけば大丈夫でした。いきなり切替えるのではなく経験者のお話を聞くのは大切ですね。これでバックアップ作業30分、切替え作業は1分未満という感じでした。

 

www.itjigoku.com

 

blog.wackwack.net

 

parupuntenobu.hatenablog.jp

 

 

 

過去記事へのリンクを修正するか?

切替え前に心配していたことは、「過去記事へのリンクを全て変更する必要があるのか?」ということ。

 

しかしこれは杞憂でした。はてなブログではhttpsを有効にしておくと、httpのリンクもhttpsへ転送してくれるようです。勿論はてなブログ内の記事だけです。

 

ブログ開設後1年経過していませんが300記事もあるので、この修正が不要というのは助かります。

 

 

 

保護された通信と表示されても安心しない

私はブログ編集にはGoogle Chromeを使っています。Chromeの場合、https化出来ているとURL右側が「保護された通信」となります。

 

f:id:mixnats:20180624143418p:plain

 

 

httpsに切替え後、ブラウザで確認すると「保護された通信」となっていたこと、記事自体も正常に表示されていたので、「凄く簡単だったじゃないか!」と安心しました。

 

 

ところがURL欄右側を見ると見慣れないアイコンが表示されていました。しかも小さく赤×マークが・・・。このマークも何かしらの不具合を示しているようです。

 

f:id:mixnats:20180624143518p:plain

 

 

赤×の内容を確認するには、検証モード(開発者ツール)を利用。Chromeで開発者ツールを表示するには画面を右クリックです。

 

f:id:mixnats:20180624143539p:plain

 

 

開発者ツールを利用すると、どの部分でエラーが発生しているか表示されるので、その部分を修正していきました。

 

開発者ツールの上側にエラーマーク(赤×)とエラー数が表示される。

f:id:mixnats:20180624143917p:plain

 

エラーマークをクリックすると詳細なメッセージが表示されます。

(メッセージ潰していますが、どこが該当するか表示されます)

f:id:mixnats:20180624144032p:plain

 

 

 

つまずいたこと

はてブ数を取得する箇所

変更前 ttp://api.b.st-hatena.com/entry.count

変更後 ttps://b.hatena.ne.jp/entry.count

先頭のhは補完してください。

 

httpをhttpsに変更して、api.という文字列を削除すれば良いのかと思っていたのですが、他の部分も違いました。(st-hatena → hatena / com → ne.jp)

 

 

はてブのシェアボタンにも罠が

そしてもうひとつ。シェアボタンを表示している部分。ちゃんと表示されているように見えて上手くいっていないこともあるので、ソースを確認してみましょう。

変更前 ttp://b.hatena.ne.jp/entry/

変更後 ttps://b.hatena.ne.jp/entry/

先頭のhは補完してください。

 

 

CSSのimportをしている部分

エラー表示が出ていなかったのですが、プレビュー画面の表示が崩れていたのを見て気がつきました。

 

変更前 @import "ttp://hatenablog.com/theme

変更後 @import "ttps://hatenablog.com/theme

 

こちらはsを追加するだけ。"tの間のhは補完してください。

 

 

テーマを読み直すと改善することも

ただ、これだけではプレビュー表示は直らず色々なポイントをいじっていたのですが、テーマを読み込み直すことで解決しました。

 

下図は私のデザインテーマの選択画面ですが、Brooklynから他のテーマを選択し再度Brooklynを選択しなおす。他のテーマを選んだ時点で保存は不要で、テーマを読込み直して保存でOKでした。

 

f:id:mixnats:20180624144641p:plain