嫁を迎えるまで淡々と

築37年の中古戸建てを購入した独身アラフォー備忘録

はてなブログをHTTPS化したよ簡単だったよ(問題がなかったとは言ってない

アイリ…僕はねレーシック関係の報酬を一度でも手にしたアフィリエイターを駆逐したいんだ…

レーシック業界へのWeb2.0こと染井ブラックRXです。こんばんわ。
邪悪を滅ぼすために俺は神にも悪魔にもなる。俺はいったい何と戦う気だ。

えぇと今日ははてなブログをHTTPS化したのでその話。

HTTPS化(常時SSL)ってなんなの?

簡単に言えばいままでの"http://~"からhttps://~と表示が変わることのようです。間にsが入っておりますね。

んで、それで何が変わるのってセキュリティがあがってGoogle神への評判が良くなるのだとか。

将来的に検索結果に影響を与えるかもしれないので一部のアフィ収入に必死なお人達は対応するためにさっさとはてなブログを捨ててWordPressに移行したり、やっぱ駄目だ!助けてはてな!と戻ってきたりこなかったりしてるそうです。イナゴか。

自分はうちでやってもなあ…と設定するのを無視し続けていましたが、先日、独自ドメインでも対応になったと界隈で話題になってるのをみて思い出したように便乗してすることにしました。

独自ドメインじゃないんだけどもね。まあやっとこさ眼も楽になってきたしやれることはやろうって。

ところでHTTPS化されたはてなFAQページが「保護された通信」になってないのは良いのですかね?

はてな公式より引用

ド素人の説明よりもはてな公式のほうが信頼できると思われるので文章を引っ張ってきます。

staff.hatenablog.com

ブログ全体のHTTPS化について

はてなブログではこれまで、はてなブログProの決済など個人情報や機密性の高い情報を扱うページに限り、通信を暗号化する方法としてHTTPS(SSL/TLS暗号化通信)を利用してきました。このように限定されたHTTPSの利用から、サービス全体に拡大していくことを完全HTTPS化と呼びます。

説明おつ。

HTTPSを利用すると、通信を暗号化できます。最近では、公衆無線LAN(Wi-Fiスポット)などオープンなネットワークの広がりで、屋外でも手軽にインターネットサービスを利用できるようになりました。オープンなネットワークを利用した通信は、送受信中のデータを第三者に覗き見されるリスクが高いため、常にデータを暗号化した上で送受信する必要があります。

公衆無線LANって使わないけどもねえ。

「書き残そう、あなたの人生の物語」というキャッチコピーを掲げるサービスとして、さまざまな人生の情報を扱うには、すべての通信が暗号化されていることも必要と考えました。

いじょーう。

名前が増えれば強くなるんだって認識で間違いなさそうです。ブラックからブラックRXみたいなもんだ。

HTTPS化の前にバックアップ

かつては眼球をノリで捧げる程度にウェーイ!だった俺も今では溺れてる眼科医を棒で叩いて沈むのを確認するほどに慎重な男…

HTTPSしたとしても表示が多少狂うぐらいでログが吹っ飛ぶなんてことは滅多にないだろうと思いましたが、そこはレーシックでハズレくじを引く程度の運命力を発揮する俺。

予期せぬ何かがあっては遅いので一応ブログのバックアップは保存しておきました。(※結局出番はなかったです)

バックアップのやり方

時間にして1分くらい。

下記の順番にクリック。

  1. ダッシュボード
  2. 設定
  3. 詳細設定
  4. 詳細設定の下の方にあるエクスポート「記事のバックアップと製本サービス」
  5. ダウンロード

カスタマイズしたHTMLやCSSも一緒にされてるか分からなかったので一応保存しておいて損はないかと思われます。

HTTPS化のやり方

これも1分くらい。

『HTTPS配信を有効にすると元には戻せません』って注意書きが出てきてクリックを押すのを躊躇うくらいでした。

手順は下記。

  1. ダッシュボード
  2. 設定
  3. 詳細設定
  4. HTTP配信
  5. 変更をする

サクサク。まじで押すだけ。処理中です…的な何か出るのかなと思ったら即HTTPS化されてました。

HTTPS化したら「混在コンテンツ(Mixed Content)」状態を解消させる

ここからが本題。

SSL化してhttps://~となっても変更前に直接貼り付けたリンクだったり画像だったりもろもろがhttp://~のままで表示されている。

この状態を解消しないと「混在コンテンツ」状態なのでGoogle検索神としてはブッブー!って状態なのだそう。

HTTPS化前と同じ状態?だからいいじゃないって思うのだけどセキュリティ観念からみたら駄目なんですって。へえへえへえ。

だから変更後は混在コンテンツ状態を治すのですが、やり方を確認するためにね、はてな公式FAQを見るとね

ブラックはてな

『そこはユーザーが個々に頑張って解消してね!』

って好意的に解釈してもこう説明されてました。マジか?マジだよ?さてはブラックだなはてな!?

参考先

help.hatenablog.com

「この接続は保護されてます」になればOK

んで、この「混在コンテンツ」状態を解消させるとURLの安全性が評価されてURL横に緑色の鍵マークが表示されます。

「この接続は保護されています」(PC版Google Chrome)と出ていればオッケーグーグルのようです。

一応スマホのGoogle Chromeでも確認したらこんな感じでした。

保護された通信マーク

緑の鍵マークがありますね。

保護された通信

タッチしたらこんな表示がでました。褒められたやったー。

あとは全ページでこの状態にすりゃゲーム終了ですってよ奥さん。うわーい。だるーい。

このブログで確認できた「混在コンテンツ」やその他問題

うちのブログは現在記事総数1108と数だけはふざけた投稿数だったのでそこまでアフィリンクや画像投稿を使ってなかったつもりでもやっぱり積もり積もってでそれなりにありました。ぐぬぬ。

ざっと目視&検索で確認したら以下で混在表示の確認、他に問題がでたのでメモっときます。

  • サイドバーのリンクから混在コンテンツ(解消済み)
  • トップページのリンクから混在コンテンツ(解消済み)
  • ヘッダーやフッターに書き加えていたスクリプトで混在コンテンツ(解消済み)
  • Amazon、楽天、Twitter、Instagramの貼り付けのある記事で混(以下略(解消済み)
  • はてなフォトライフ経由の画像がある記事全部が以下略(放置。対処はわかったが面倒で手付かず)
  • 古いブログカードが表示されてない(放置。どういうことだってばよ…)

解消済みと書いたのは「保護された通信」となったところ。

やったことはヘッダー、フッター、記事下、記事上のソースを確認してhttp~にsを書き加えるだけ。これはそれほど修正項目はなかったので15分くらいで解決できました。

Amazon…などの修正はちまちま確認して手打ち直しのため 1時間以上かかってます。あとなぜかどーやっても保護状態にならないので文章リンクに変更したのもありますがこの原因はなんじゃろね。

商品リンクはそこまで利用してなかったつもりだったのですが意外と貼っていたのだなあ。無駄に貼りまくってるアフィリエイターは人力で対処できない気がする。まあ商品羅列だけのブロガーなんて駆逐されてもいいけど。

フォトライフ、ブログカードのことは後述します。

修正と検索のやり方

トップページは基本的に目視で確認。ソースを開いてCtrl+Fで対象を検索してちまちま修正するだけ。修正した。したのよ。誰か褒めて。

ああ、javaScriptの修正を最後まで忘れてたのでそこも注意です。

記事内検索の手順は以下

  1. ダッシュボード
  2. 記事の管理
  3. ページ右上側の記事検索枠に検索ワード

あとは検索ワードのところへ

img src="http://

@import url('http://

script src="http://

などを入れて検索するとざざーと対象ページが出てきたので手打ちで個別修正。

やることはそれほど難しくないのですが、修正対象の数次第で人によっては詰みそうです。つーか詰むと思う。

古いブログカードが表示されていないので修正

全てに画像やカードリンクがあるわけじゃありませんが、古いブログカードが表示されなくなっているのを確認しています。

最近のは問題ないで修正するなら過去の分でしょうか。2016年くらいから怪しいです。

これも記事内検索でembedで調べて貼り直せば対処はできそうですが、貼り直すってのが結構地味な作業です。もう削除でいいかって。それかtitle属性に書き換え。いやそれも面倒臭いなあ。

はてなフォトライフ画像を貼ってるページは全アウトになってるので修正

問題はこれ。これなのよ。

修正方法は超簡単で再度記事を更新するだけで自動でHTTPS化してくれます。

んがこの記事を再度更新ってのが手間。いやカードリンクやAmazonの貼り直しに比べたら書き換えもいらないので楽なんだけど数が多かった。これだけでいいから一括ツール欲しい。というわけで

(゚Д゚) もうゴールしていいよね?

ズボラバンザイ。

いや、うん、そうなんだすまない。

どうせアフィ収入生活してるわけでもないしと今日は投げましたよあたしゃ。最初に突っ込んだけどはてなFAQページも「保護された通信」になってないし。まあ休日を使ってちまちまと修正することにします。

おつかれさまでした俺。