明日も無色

新社会人が世の中の気になることを書くブログ

【はてなブログ】200記事を一括でhttps化する簡単な方法をまとめてみた【ssl化できたぞ】

f:id:arufred45Hoo:20180629173345j:plain

こんにちは、青色申告です。

 

今回は、200記事を一気にhttps化できたよって話を書きます。

 

あくまで僕の場合はできたので、参考になれば嬉しいです。

 

【目次】

 

はじめに

以前こんな記事を書きました。

 

www.ashitamomusyoku777.com

 

 

ここでは、記事数が少ない場合、初期状態でのhttps化について書きました。

 

しかし、最近お名前.comからこんなメールが。

 

 

f:id:arufred45Hoo:20180629173829p:plain

 

 

「いや、してねけど」と思った僕は、なんとなくhttps化(SSL化)するかあと思ったのでした。

 

https化にする手順まとめ

 

以下は試行錯誤して3時間位かかってしまったけど、作業自体は2時間以下ぐらいで終わると思います。※個人のケースによって異なります。

 

こちらの記事を参照されてから進むとスムーズかなと思います。

 

www.ashitamomusyoku777.com

 

①バックアップ

はてなブログ-設定-詳細設定-エクスポート

以上から、ダウンロードし直して任意のフォルダに記事データを保存

 

②HTTPS配信、オン

はてなブログ-設定-詳細設定-HTTPS配信-OK

これをするともう戻れないので注意

 

③デザインにあるカスタマイズ項目のコードを確認

http→httpsに置き換える作業。とりあえず、「s」をつけていく作業になります。10分ぐらいで終わると思います。以下確認項目です。

 

・デザイン

・設定-head

 

※僕のケースなので、個別に異なる場合もあります。

 

④ ③のコードをメモ帳などに全部コピペ(バックアップ)

 

⑤テーマの張替え

今までのテーマだと、書式が壊れていることもあるので、僕はダウンロードし直しました。

※ここで④が生きます。ダンロードし直すとCSS等が消えてしまうからです。

 

⑥ヘッダーの画像

下記記事も参考にしましたが、僕の場合問題はヘッダーの画像だけでした。

よって、単純に画像を改めて差し替えました。心機一転、今までと別画像にしました。

 

【参考記事】

【はてなブログ】独自ドメインをSSL化した後のヘッダ画像設定変更について - 飛ぶテノリ

 

⑦feedly、お問い合わせフォームの作り直し

これは作り直したほうが早いです。僕はGoogleフォームをすでに使用していたので、feedlyだけで済みました。

 

【参考記事】

https(SSL対応)にしたときに必要になるFeedlyボタンの対応方法 | WEBマスターの手帳

 

⑧CSSコードなどを貼り直す

テーマの張替えで失ったコードを④でとってバックアップからコピペで貼り直してください。

 

⑨Google Analyticsとコンソールの再設定

以下参照

 

【参考記事】

【はてなブログ】HTTPS化(SSL化)するならもっと最初にやれば30分で終わるぞって話【簡単】 - 明日も無色

 

これで一通りのことは終了です。

 

過去記事のリンク(カード形式)の画像が見えない問題

しかし、僕には問題が起きました。

 

過去記事のリンク(カード形式)の画像が見えないという状態に。独自ドメインの前は勝手にHTTPS化してくれないみたい。

 

これは膨大な記事一つ一つをみなければなりません。そして、100記事くらいにsをつける作業が。想像しただけでも嫌になります。

 

正直見えなくてもリンクは正常に機能しているので、別にいいかなと思いましたが、気に入らない。

 

ということで、一括でやる方法を見つけたので書きます。いろいろ調べると、なんか難しそうなコードソフトとか使います!とかあったのですが、記事を一回全て削除とか怖すぎたので無理!と思いました。

 

以下で紹介する方法は、ソフトダウンロード不要、記事削除不要の方法です。(リスクは常にあるのであしからず)

 

一括で解決するメリットとデメリット

 

僕の場合、問題は100記事ほどありました。その記事すべて見て「s」をつけていく作業をすることを考えて、メリットを思いつきました。

 

・sのつけ間違いを防げる

リンクによってはhttps化していないリンクもあるので、それを判断する手間を防げる。また手作業だと、sを大文字で打ち込んでしまうリスクもあります。

 

・すべての記事を確認しなくて済む

 

デメリットは、置き換えを間違うとすべてのリンクが終わるということです。

 

一括で解決する方法

この方のツールを僕は使用しました。使い方が具体的ではなくて、むむ!と思いましたが、自分なりに使ってみました。

 

www.notitle-weblog.com

 

①ログイン

所定のはてなID、ブログURL、APIキー、編集方法を入力、送信(ログイン)。入力方法は書いてあります。

 

②置き換える

僕の場合、独自ドメインに変える前の【hatenablog】ドメイン時代の記事リンクが問題を起こしていたので、そのリンクを新規リンクに置き換えることにしました。

 

一回テスト的に記事を作ってそれでテストすると良いです。一気に置き換わるので。

 

【具体例】

検索する文字(『』は不要)

http://ashitamomusyoku777.hatenablog.com

 

置き換える文字(『』は不要)

https://www.ashitamomusyoku777.com

 

これによって、つけなくても平気なリンクにsをつけなくて済みます。なるべく具体的に置き換えていったほうがリスクが少なく、問題点がわかりやすくなります。

 

僕の場合はこれで一括で解決しました。

 

しかし、置き換えされなかったサイトが「置換えされたサイト」として出てきたので、そこはエラー?かなと思い、コピペで置き換えました。

 

 その他にしたこと

①カエレバの確認

僕は2017年からカエレバを使用していたので、問題はありませんでした。

 

②リンク切れの確認

これはhttps化とは関係ないのですが、「見られている記事」を中心にリンク切れがないか確認し、置き換えました。更新作業ですね。

 

③いらなそうなデザインコードを消す

はてなブログ標準搭載の機能が増えてきて、要らなくなったデザインのコードを消しました。理由は、シンプル性と問題の把握です。

 

今後も様々な問題が起きたときに備えて、これはどういった機能のコードなのだろうかとメモ、バックアップしておきました。 

 

最後に

以上僕なりにやったことでした。

 

不思議なことに記事カードが見えない状態(混在コンテンツ)があっても鍵マークがつきました。

 

不思議。

 

でもカードが見えないのはエラーなので、えいやーとやってみました。

 

あと、独自ドメインにした後の記事は勝手にsがついてくれる(錯覚?)んだから、はてなブログやっぱりいいなと思いました。

 

以上すべての人のケースには当てはまらないかもしれないけど、参考になったら嬉しいです。

 

【関連記事】 

www.ashitamomusyoku777.com

 

 

www.ashitamomusyoku777.com

 

 

www.ashitamomusyoku777.com