ブログ作成ボタンを押しちゃった

オッサンの実力を教えてやるぜ!

はてなブログのHTTPS配信で初心者が気になってる部分と混在コンテンツの修正

どうも、ガンダムのオッサンです。

 

私がはてなブログでやっているもう一つのブログ(はてなブログのサブドメイン)をHTTPS配信に切り替えました。

やり方はとても簡単ですが一度やってしまうと元に戻せません。

不安な方ははてなブログ界隈の状況を見て「みんなHTTPSにした感」になってから変更するのも一つの手でしょう、私としては当ブログ(独自ドメイン+はてなブログ)をHTTPS配信可能となった時の練習的な気持ちでやってみました。

 

それではてなブログHTTPS配信の切り替えについて混在コンテンツ(Mixed Content)の修正がメンドクサイ、やり方が分からない...ってなはてなブロガーさんも多いと思います。

 

他にもいざHTTP配信に切り替えて混在コンテンツ(Mixed Content)の修正を行いまくったのに「保護された通信にならね~!」ってな人もいるかもしれません。

というよりも使っているテーマによっては気がつきにくいポイントもあったりしますし、場合によってはサイドバーの項目の一部を外す必要もあるでしょう。

その辺の事情も考えてからHTTPS配信にしても遅くはないと思います。

はてなブログ設定画面でHTTPS配信に切り替える

httpがhttpsになるだけなんだけど元には戻せない作業ということを十分に理解しておきましょうね、チョイチョイとクリックするだけで直ぐにHTTPS配信に切り替わるという事も覚えておいて下さい。

staff.hatenablog.com

これははてな運営さんからのアナウンス、まずはコレをよく読んで気持ちが固まったらHTTPS配信に切り替えます。

切り替え後はこんな感じ

f:id:gundamoon:20180306094008j:plain

クリックしてからHTTPS配信が始まるのは一瞬です。

独自ドメイン+レンタルサーバー+ワードプレスで運営しているブログだと切り替えに10分ぐらいかかったような気がします。

 

はてなブログがリダイレクトしてくれる

HTTPS配信への変更で気になる部分はココでしょうね、とくに収益を...!なんてブログにとっては重要なポイント。

んで結果から言えばはてなブログが勝手にリダイレクトやってくれている、これがあると無いじゃ全然違うってもんですね、ありがたい。

 

ただしはてなブログのサブドメインブログでの結果なので今後可能になるとされる独自ドメイン+はてなブログでリダイレクトがどうなるか不明です。

混在コンテンツ(Mixed Content)の修正

最初にやらなければならないのが画像アドレスの修正、という事でHTML編集画面にて画像のアドレスをチェックすると自動でHTTPSになっていました。

これは楽ちん!と思っていたけど「保護された通信」にならない...

f:id:gundamoon:20180306095654j:plain

 

ブラウザはクローム。

このような状態ではHTTPS配信にする意味がありませんね、という事でクロームのデベロッパーツールで確認。

 

f:id:gundamoon:20180306100221j:plain

あんた画像がアカンよ...ってな事になっている。

しかたがないので編集画面で記事中の画像を貼り直してみたところMixed Contentは大方なくなりました。

しかしどうしても一つだけMixed Contentが残っちゃう...!しかも記憶にない画像、これを何とかしないと保護された通信になりませーん!

 

※画像を見て色々と言いたいブロガーさんが居るかもしれませんね、裏でこんな事を始めてみたした。

サイドバーにある検索窓の「虫眼鏡画像」が原因

Mixed Contentをひとつひとつ見てゆくとよく分からない画像が存在、見ると虫眼鏡の画像...ってそんな画像をUPした覚えはない。

それで良く見てみるとサイドバーに設置した検索窓にくっついている虫眼鏡がMixed Contentの原因でした。

 

f:id:gundamoon:20180306112628j:plain

画像右下の赤丸の部分が虫眼鏡の画像、これをどうにかしなければ保護されたコンテンツになりません。

という事で色々と弄ってみたけどこの画像がどこに入ってるのかもワカンネ。

 

もう面倒なのでサイドバーに設置した検索窓を削除しました。

やり方はは超簡単、

「ダッシュボード」「デザイン」「カスタマイズ」「サイドバー」で検索の削除です。

f:id:gundamoon:20180306113428j:plain

 

これでMixed Contentが消えて保護された通信になりました。

全ページを保護された通信にするには画像を全部貼り直さないとダメっぽい...誰か頭のよい人が簡単なやり方を考えてくれる事を祈りましょう。

 

f:id:gundamoon:20180306113841j:plain

 

グーグル関係の変更

初心者ならばココまでの作業をやっておけばとりあえず保護された通信になるのでOK、ここから先の作業はPVとか検索とかの話になってきます。

 

グーグル関係で変更を行いたいのはアナリティクスとサーチコンソール、この二つの変更もサクサクっとやっちゃいましょう!

アナリティクスの変更

作業は簡単、歯車マークの「管理」「プロパティ」「プロパティ設定」「デフォルトのURL」でhttpsに変更するだけ。

 

f:id:gundamoon:20180306115435j:plain

 

※この作業はhttps配信前からアナリティクスを使っているユーザー向けの変更になります。

サーチコンソールは新規に登録

先にアナリティクスをやっておけば大した作業ではないのでささっとやっちゃって下さい。「プロパティを追加」から新規にhttpsサイトを追加します。

 

ついつい忘れがちなのがサイトマップの送信、。

いちいち検索するのも面倒でしょう、はてなブログはコレ

「/sitemap_index.xml」

後はFetch as Googleして終了。

 

はてなブログサブドメインのhttpからhttps配信の大まかな流れはこんな感じ、後は登録してあるASPのサイト変更等も忘れずに!

 

最後まで読んで頂き、本当にありがとうございました。

2018/4/25追記

検索窓の虫眼鏡画像の件ですが、あにおさんの記事

こちらを読んで検索窓の虫眼鏡対策をしてみようかと思いサイドバーに再び検索窓を設置してみたところ、なぜか虫メガネ画像が原因でのMixed Contentにはなりませんでした。

つまり「保護された通信」ってやつです。

はてなブログ運営のほうで何か対策をされたのでしょうかね、これでhttps化へのハードルが一つ下がりました。