はてなブログ無料枠でHPPTS化してみた【MixedContent地獄】

2018/07からhttpのサイトはgoogle chromeでは警告が表示されるそうなのでHTTPS化してみました。
blog.chromium.org
はてなブログは無料でHTTPS対応のブログが書けるから神。

☆はてなブログでHTTPS化するやり方(数秒で完了)

[設定]->[詳細]->[HTTPS配信]->[HTTPS配信の状況を確認する]->"変更する"ボタンをポチる

もう、後戻りはできねぇぜ…。さらばHTTP。これまでの私。

ボタンは消え去り、もう戻す事はできぬ。

MixedContent？そんなんヘッチャラでしょ？

おや…？

あれぇ？

☆MixedContent地獄

よくわからんけど、MixedContentになるケースは以下

• javascriptのsrc先がhttp
• iframeのsrc先がhttp

なお、純粋にaタグのhttpは大丈夫だった。

☆MixedContentの原因を探る。

• GoogleChromeでサイトを表示
• GoogleChromeのデベロッパツールのconsoleタブを開く
  • SafariならWebInspector、FireFoxはFireBugかな？使ってないのでわからぬ
• MixedContentになっているアドレスを確認
• アドレスはどこに書かれてるか探る

☆HTTPアドレスが記述されし場所をチェック！

アドレスを書き込める場所は色々あります！

原因を特定し、修正の後、保護された状態になった…！

…のだが

本当の地獄はココからだ

☆記事毎に埋め込まれたMixedContet地獄

僕の場合は以下

• Instagramの埋め込み画像
• はてなフォトライフ

いずれも昔記事に張り付けた時はHTTPだったんですよね…。
記事毎に修正する必要があります(>< )

Instagramの場合はhttp->httpsのアドレスにして、貼り付け直したり、はてなフォトライフははてな記法だったら、"[f:id:～]"の部分を貼り付け直したりとか。

とても地味な作業。

有志の方が、はてなフォトライフに関しては一括置換するツールとか作られている記事を以前見た気がするのですが、なるほどこういう事か…と、実際にHTTPS化してみてわかりました。

☆とりま上位記事だけ対応する

google検索上位の記事だけMixedContentを解消しておいた。

読まれてもない記事がMixedContentだろうが知った事ではない。
気づいたら修正するぐらいでいいだろう。