はてなブログのSSL化で「保護されていない通信」を「保護された通信」にする手順の一例を書いておく。
ようやくやりました。ブログのSSL化。なんと重い腰だったことか。
さて、その重い腰をあげてやってみましたらば、やっぱり面倒なことが起こりまして。
はてなブログのSSL化の設定自体は、めっちゃ簡単です。ブログのダッシュボードから設定ページを開き、「詳細設定タグ」を選択すると、「HTTPS配信」という欄がありますから、そこの「HTTPS配信の状況を確認する」をクリックして進んでいけばOK。ただそれだけ。時間もあっという間です。
でもしかし、それだけじゃ終わらない。
ページがSSL化されるには、「ページ内にHTTPで配信されたコンテンツが含まれてない」という条件を満たす必要があって、これを満たしていないとせっかくSSL化したつもりでも全くできていないということになります。「混在コンテンツ」ってやつです。こうなっては意味なし。
で、これを潰していくのが地味にめんどくさい作業でして。
「ここを直してね。」って具体的に教えてくれればいいのだけれど、そんな親切ではなく、どこをどう直せばいいかは自分で調べていかねばなりません。多少なりともプログラミングの知識がある人であれば、Chromeのデペロッパーツールというもので、それなりに追えるのですが、そうじゃない人はかなりしんどいと思います。
なので、一応、僕が潰した箇所などを具体的に書いて残しておきます。すべてのパターンを網羅しているわけではありませんが、いくらかでも参考になれば。
やることの概要
SSL化の手順は他サイトでたくさん情報があるでしょうから省略します。 ここでは、「SSL化の設定は終わったのに、保護された通信にならないよー！」って場合の対処方法を書きます。
やることは基本、「HTTPのページを参照している箇所を訂正、または削除する。」という作業になります。
極論すれば、後から自分で追加したコードは全部削除すれば、SSL化でひっかかるところはほとんどないのですが、まぁそうもいきませんよね。
でも逆に言えば、どうしても分からないならば、いろいろな後付けツールを全部最初から手作業で追加し直せば、おおよそ対処できます。場合によっては、そっちのほうが早いこともあるかも。
最初に確認すること
まず自分が使っているデザインのテーマがSSL化に対応しているかどうか。
こちらのサイトでひととおり調べてくれているので、とても参考になります。
もし対応していなテーマを使用していた場合でも、すぐに諦めることもなく、一応は以下の方法を試してみてください。
対応していない理由の多くは「検索BOXで使用している虫眼鏡アイコンがHTTPである」ことが多いらしいので、もしそれが原因であれば、クリアできます。
トップページから手をつける
次に目指すのは、トップページを「保護された通信」表示にすることです。（サイトURLの左側に「保護された通信」と表示された状態のこと。）
トップページに表示されているロゴやサイドバー情報などは、毎回表示されますから、まずはここをクリアせねばなりません。
ひとつひとつ細かく説明すると、かなりのボリュームになるので、ざっくりと一気に書いていきます。
ヘッダ画像
古いはてなフォロライフ等からリンクされている場合がある。新規にファイルをアップロードし直して、再度画像設定する。
デザイン設定を片っ端から修正
トップページの情報は、ここがすべて。
ひとつひとつ漏れなく、HTTPと記載されている箇所を修正する。
基本は最新の手順をやり直せばHTTPS化に対応していることが多いが、対応していない場合はとりあえず削除してしまう。
足りない機能は後から再作成するとして、まずはトップページが「保護された通信」になることを目指す。
話はそれから。
ヘッダの「タイトル下」
僕の場合は、メニューをプルダウン表示するようにしていたため、タイトル下のコードに自サイトのURLがHTTP表記のままだった。これをすべてHTTPSに直す（http の後に s を追加記載するだけ）。
記事の「記事上」「記事下」
僕はシェアボタンをはてな公式のものではなく、有志の方が作ったオリジナルボタンにしていたのですが、これがHTTPS対応していなかったため、すべて削除した。シェアボタンは、はてな公式のものを使用するように変更。
その他、自サイトへのリンクもたくさん記載していたので、すべてHTTPSへ変更。
はてな公式の「読者になる」ボタンも、最新のものに貼り直し（ダッシュボードの詳細設定からコピペできる。）。
サイドバー
ここも自サイトのリンク修正。
Feedlyの購読ボタンを設置していたが、最新のコードを取得し直してもHTTPのままだったため、ボタン自体を削除。いつか対応してくれるのだろうか。
はてな公式ウィジェットの「人気記事」を最新コードにするも、これも非対応のだったため、削除。
フッタ
パンくずリスト作成スクリプト等、s を付け足してHTTPSにする。
ダッシュボードの詳細設定
「headに要素を追加」にも、HTTP記載がないかどうか確認。
ここまでを漏れなく修正すれば、トップページは「保護された通信」になるはず。
ならなかったら.......知らん！
各記事内の記載をチェック
ここまでくれば、大きく詰まることはないですが...........過去記事が多ければ多いほど、作業時間も比例して大きくなります。しょうがない。
記事をひとつずつ表示して、URL欄の左に「保護された通信」になっていない記事に対して、修正をしていきます。
おおよそは、このあたりかと。
- Amazonアフィリエイトや、カエレバのコード。最新のものを取得し直して、貼り直し。
- 他サイトへのリンク。
- 貼り付けている画像。
記事の編集画面を開いた状態で Ctrl + F で検索。「http」で検索していって全部httpsにしていく。
自サイトの過去記事へのリンクは、僕はURLを直書きしていたのですが、httpのままでも大丈夫っぽい。
ここは全部やると結構な時間がかかるので、時間がある時にゆっくり直していけばいいと思います。僕はちょっとずつチビチビと修正しています。
あとがき
SSL化していなかったとしても、まぁそれほどユーザー側に致命的な不利益があるわけではないのですが。
サイトのアクセスした際に「保護されていない」と書かれると、閲覧する側からすれば、よく分からないけど不安、という気持ちも出てくるでしょうし、なによりGoogle神が推奨する方向ですから、対応しておこうと思い、やることにしました。
やってみるとね、まぁスッキリしますよ。
最後に一応、Google Chromeのヘルプページのリンクを貼っておきます。Chromeの表記がどうなるかだけでも見ておくといいかもしれません。
