浪費家ナッツ(@rouhi_nats)です。おはようございます。
長らく待たされた、独自ドメインを利用しているユーザへのhttps対応やっと来ましたね。私も変更しましたので覚え書きとして記録を残しておきたいと思います。
私の場合、ブログ開設が2017年8月と比較的最近です。このためブログ画像は修正不要と変更作業は比較的簡単に済みました。それでも途中つまずいて2時間近くかかりました。
【注意】
あくまで私のブログをhttps化した際のメモです。開始時期やカスタマイズ等の違いにより必ず同じではありません。
参考にしたブログ
基本はこれらのブログで紹介されていた通り変更していけば大丈夫でした。いきなり切替えるのではなく経験者のお話を聞くのは大切ですね。これでバックアップ作業30分、切替え作業は1分未満という感じでした。
過去記事へのリンクを修正するか？
切替え前に心配していたことは、「過去記事へのリンクを全て変更する必要があるのか？」ということ。
しかしこれは杞憂でした。はてなブログではhttpsを有効にしておくと、httpのリンクもhttpsへ転送してくれるようです。勿論はてなブログ内の記事だけです。
ブログ開設後1年経過していませんが300記事もあるので、この修正が不要というのは助かります。
スポンサーリンク
保護された通信と表示されても安心しない
私はブログ編集にはGoogle Chromeを使っています。Chromeの場合、https化出来ているとURL右側が「保護された通信」となります。
httpsに切替え後、ブラウザで確認すると「保護された通信」となっていたこと、記事自体も正常に表示されていたので、「凄く簡単だったじゃないか！」と安心しました。
ところがURL欄右側を見ると見慣れないアイコンが表示されていました。しかも小さく赤×マークが・・・。
赤×の内容を確認するには、検証モード（開発者ツール）を利用。Chromeで開発者ツールを表示するには画面を右クリックです。
開発者ツールを利用すると、どの部分でエラーが発生しているか表示されるので、その部分を修正していきました。
開発者ツールの上側にエラーマーク（赤×）とエラー数が表示される。
エラーマークをクリックすると詳細なメッセージが表示されます。
(メッセージ潰していますが、どこが該当するか表示されます）
つまずいたこと
はてブ数を取得する箇所
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 "http://hatenablog.com/theme
変更後 @import "https://hatenablog.com/theme
こちらはsを追加するだけ。
ただ、これだけではプレビュー表示は直らず色々なポイントをいじっていたのですが、テーマを読み込み直すことで解決しました。
下図は私のデザインテーマの選択画面ですが、Brooklynから他のテーマを選択し再度Brooklynを選択しなおす。他のテーマを選んだ時点で保存は不要で、テーマを読込み直して保存でOKでした。
