あらアラチャンねる

しごと?おかね?30代のなやみを解消!あなたのためになる(かもしれない)雑記ブログ!

はてなブログを独自ドメインで運用しててまだ”HTTPS化”してなかったので今さらながらしてみた!具体的手順など公開!

f:id:ara-channel:20181113141659p:plain

こんにちはアラチャン@aratyan_jpです😆

 

はてなブログ独自ドメインで運用してるのにまだHTTPS化してない人います?

 

はい!僕です!

 

とっくの昔にしなければいけなかったはずなのにすっかり書く方に集中しててカスタマイズを全くしてきてませんでした。

 

もし、僕と同じくまだ「HTTPS化してない」という方がいれば、変更にあたって調べたことや手順などについて書きましたので、ご参照ください。

参考にした記事

正直変更するといっても何の知識もありませんので、はてな公式や諸先輩方の記事を参考にさせて頂きました。

参考にさせてもらった記事一覧

はてな公式

staff.hatenablog.com

 

事前準備としての前提知識

www.notitle-weblog.com

やることリストの確認

blog.minimal-green.com

 

HTTPS化の具体的手順

記事データのバックアップ

万が一データが壊れてしまった時に復元できるようにバックアップをとりましょうとのことなのでバックアップから進めます。

バックアップ手順

・管理画面の「設定」から「詳細設定」にいきます。

f:id:ara-channel:20181113113734p:plain

 詳細設定の画面を下にスクロールしていき、「エクスポート」の欄から「記事のバックアップと製本サービス」をクリック!

f:id:ara-channel:20181113114311p:plain

エクスポートにあたっての注意点が書かれていますので、まとめてみると・・・。

 

・記事内の写真そのほかのコンテンツバックアップできない
記事の件数によってバックアップに時間がかかる場合がある。
・エクスポートデータは再度実行するまでダウンロード可能。エクスポートをやり直すと更新される。

・形式はMT形式でバックアップ

※詳細ははてなヘルプを見てみてください。 

 

あくまでテキスト形式でのバックアップということで丸々記事が同じようにバックアップされるようではないみたい。でも、時間をかけて書いた文そのものが消えるよりは全然マシなのでここはしっかりバックアップとっておきましょう。

 

「エクスポートする」をクリックするとエクスポートが始まりますが、 時間かかるのかなぁと思ってましたが、一瞬でした(ちなみにこの時点で記事数は145記事)。

次に「ダウンロードする」をクリックして保存します。

f:id:ara-channel:20181113115606p:plain

と、ここで問題が・・・。 

f:id:ara-channel:20181113120938p:plain

「このテキストファイル開けませんよ」との忠告が!!

テキストエンコーディング日本語(Shift JIS)には対応していません。このファイルは別のテキストエンコーディングで保存されているか、テキストファイルでない可能性があります。 

困った。

こんなとこでつまづくなんて。

 調べてみると思い当たることがありました。

 

今回のエクスポートファイルは「Shift JIS」という形式。

これだと数字を○で囲んだ文字や株式会社を省略したような文字などが表示されないらしいですね。

 

いやぁ、使ってるわ!!

なんなら半数以上の記事で使ってるかもしれない。

 えっ?これもしかして直すの?145記事も?マジで?無理じゃね?

 

もう、ここで止まっててもしょうがないので進めちゃいますね。

 

 失敗したら失敗したで盛大に記事にします。

(もし同様の事例で進めちゃえ!となった方は事故責任でお願いしますね!)

ブログのテーマが HTTPS化対応しているか確認する

一応、このまま進めるにしてもデザインそのものがグチャグチャになってしまわないかどうか、HTTPS化に対応しているテーマかどうかを確認しておくと安心材料が増えますので、確認しておきましょう。

 

↓こちらの記事で丁寧にまとめていただいてるので確認してみてください。

www.foxism.jp

 

ちなみに現時点での僕のはてなブログでのテーマは「Haruni」です。

 

HTTPS化対応と記載されていましたので、このまま進めてもデザインがグチャグチャになってしまうことはないかなぁ。

 

ということで、もう進めてしまいます。 

(他の方のブログではダミー用のブログを作って非公開設定にして、そちらで先に練習などもしています。慎重を期すならそこまでやった方が無難です。)

HTTPS化を行う 

 実はHTTPS化そのもの自体は難しくありません。

 

 先ほどと同じく、管理画面の「設定」から「詳細設定」へと進みます。

次にHTTPS配信」欄の「HTTPS配信の状況を確認する」をクリックします!

f:id:ara-channel:20181113124729p:plain

するとHTTPS配信へと変更するかの確認画面になります。

 

注意書きで

・ 一度、HTTPS化をしたら戻せない

・ 混在コンテンツは修正が必要になる可能性がある

 

警告されますが、ビビらず「変更する」を選択しましょう。

 

ちなみに混在コンテンツとは「HTTPS化」した記事内のリンクに「HTTP」の記事があるとHTTPS化したにも関わらず、「HTTP」のページとして認識(「保護されてないページです」と表示)されてしまうということ。

リンクがいっぱい貼ってある場合は大量の修正が必要になりそうですが、これは後ほど記載します。

f:id:ara-channel:20181113125142p:plain

 さらに

「この操作は取り消すことがでません」との表示も出ますが、もう気にせず「OK」を押しましょう!

f:id:ara-channel:20181113130054p:plain

 10秒もかからない程度。あっという間にHTTPS化「有効」になりました。

 

続いてブログがHTTPS化されているか確認するために「ブログを確認する」を選択します。

f:id:ara-channel:20181113130519p:plain

 GoogleChromeでページにアクセスしてみると・・・。

ちゃんとhttpsになって、「この接続は保護されています」の文字が出ています。

特にページデザインも崩れていませんので、HTTPS化成功です!

f:id:ara-channel:20181113131355p:plain

HTTPS化による問題が出ていないかの確認

各ページを開いてみて、URL欄の左側、右側でそれぞれ下のような図が出ていないかを確認していきます。

出ていれば、ページに何かしら問題がある(HTTPのリンクや画像が混じっている)ということ。

f:id:ara-channel:20181113134353p:plain

 

ちなみに当ブログのトップページもこんな感じで、左側は「保護されている」となっていますが、右側は警告が!

f:id:ara-channel:20181113134659p:plain

修正が必要ということです。

混在ページの修正を行う

混在コンテンツがあるかどうか地道に調べていきましょう。

 

・調べたいページをGoogle Chrome上で右クリックし「検証」をクリック

・キーボードのF12を押す

 

するとページの右端に

 

・ ヘッダ

・ フッタ

・ 記事

・ CSS 

などの中にある「http」を探して「https」へと変更していきます。

 

はてな公式の中にある一括の方法も試してみても良いかもしれませんが、バックアップすら取らなかった(取れなかった)身としては、せっかくHTTPS化成功したのに、グチャグチャになるのも嫌なのでチマチマ変更していくことにします。

Google Analyticsを設定しなおす

これは簡単なのでサクッとやってしまいましょう。

まず、ホーム画面から「管理」を選択。

f:id:ara-channel:20181113141531p:plain

次に「プロパティ設定」を選択

f:id:ara-channel:20181113141418p:plain

「デフォルトのURL設定」欄でhttps://」を選択する。

最後に保存を忘れずにして完了。

f:id:ara-channel:20181113142208p:plain

Google SearchConsoleを設定しなおす

サーチコンソールの場合は、ちょっと変更すれば良いというわけではなく、新たにhttps」を追加登録する形でしか設定ができないという切なさ。

 

「http」の時のデータと別管理になってしまうようなので、それぞれのデータを残しておいた方が良いとのこと。

 

「プロパティを追加」を選択し、「https化したURLを入力」する。

f:id:ara-channel:20181113150209p:plain

「所有権を自動確認しました」と出たら、完了。

f:id:ara-channel:20181113150127p:plain

 これで「https://」のバージョンが追加されました。

f:id:ara-channel:20181113150151p:plain 

メールフォームの動作確認

 僕のブログは大丈夫でしたが、「お問い合わせのメールフォーム」が動作しなくなったという話がありますので、これも確認しておきましょう。 

最後に

はてなブログ使っていてHTTPS化がまだできていない」という方はこの機会にぜひ。

 

GoogleHTTPS化を必須としていますし、遅かれ早かれやる必要はでてきますので記事数が増えすぎる前にやっといた方が楽ですよ♫

 

ということで今回も読んでいただきありがとうございました。

 

オシマイィィィィです😄