【はてプロ】はてなブログのデザインを変更したらHTTPS配信が無効になった【jQuery】

ブログデザインを考えるのって楽しいですよね

このブログの読者の方ならお気づきの方もいらっしゃると思いますが、はてなブログProへの移行に伴い、随時ブログデザインを変更・修正をしています。

 

 

はてなブログProに移行すると、ブログの色々な部分を自分の思うように変更できたりするんですよね。ブログデザインの自由度が非常に高くなるのです。

 

そのためにはHTMLだったりCSS、JavaScriptの知識が必要となるわけなのですが、インターネットが普及した現在となっては、はてなブログの先輩方をはじめとして、様々な方面からブログデザインに関する情報、場合によってはソースコードそのもののが提供されています。

 

ですから、知識のない場合でもその先輩方が提供している情報に敬意を表しつつ、ありがたく利用させていただくことで誰でも一丁前のブログデザインが完成するわけなんです。

 

とはいえ、どのデザインをどのように利用してどのようなブログを作っていくのかという点については、当事者(私たち)の問題であるので、そこの部分については私たち次第といったところでしょう。

 

現在は当ブログも一通りのデザイン変更を終え、一段落といったところですが、HTTPS配信に関してちょっとした問題があり、それに関してどのように解決したのかということについてこの記事に記したいと思います。

 

 

はてなブログはHTTPS配信に対応している

 

HTTPSってなんなの?という方もいらっしゃると思いますが、HTTPSは簡単に言えば、Webページの通信を暗号化してセキュリティを強くするためのものといったところです。

 

WebページのURLがhttpなのかhttpsなのかに注目して、例えばAmazonのURLを見ていきましょう。

f:id:null10blg:20180912214116p:plain

 

URLの先頭がhttpsになっています。これによってWebページの通信が暗号化され、悪意をもった第三者が通信の内容を見ても何が書いてあるかが分からないようになっています。

 

Amazonを利用する場合は住所や氏名はもちろんのこと、クレジットカードの情報や何を買う・買ったなどの個人情報が大量にやりとりされるため、通信が安全であるということは、当たり前ですが、必要となります。

 

ログインページのURLもhttpsとなっており、通信の安全性が保証されていますね。

f:id:null10blg:20180912214711p:plain

 

httpsはhttpにセキュリティのsがついたものと思うと簡単かもしれません。

 

個人情報を扱うようなログインページなどで、URLがhttpsではなくhttpのものはかなり怪しいと思った方がよいと思います。

 

ちなみに、はてなブログはデフォルトでブログ記事がHTTPSで配信されるようになっています。

f:id:null10blg:20180912215350p:plain

 

はてなブログがHTTPSで配信する意味ってなんなの?ということになりますが、これに関しては、私たちのブログでは通信の安全性について配慮していますよというアピールになると考えます。

 

最近はログインページ以外でもHTTPS化しているWebサイトが多くなってきており、Amazonの他にはYahooGoogleもサイト全体でHTTPS化されています。

 

また、HTTPSページは優先的にインデックスに登録されるようになります。これに関してはGoogle公式の発表がありますので、興味のある方はこちらをご覧ください。

Google ウェブマスター向け公式ブログ: HTTPS ページが優先的にインデックスに登録されるようになります

 

つまり、はてなブログがHTTPS配信するということは、Googleが目指す安全なインターネットに同調するということでもあり、それによってGoogleから優先的にブログの掲載順位をあげてもらえるということでもあるのです。

 

もちろん、掲載順位をあげるための他の手段によってSEO対策を講じる必要もあるのですが、これからの時代は大前提として、安全なWebページを実現することが必須になってくると言えるでしょう。

 

HTTPS配信されていたはずが警告が出る

ここからはHTTPS配信されているはずなのになぜかGoogle Chromeから警告されるという問題についての話になります。

 

ブログデザインの変更を終え、トップページを確認した際に、URLバーの右端に赤いバッテン印があることに気がついたんですね。

f:id:null10blg:20180911220621p:plain

 

なんだろうと思いクリックすると、安全でないコンテンツがブロックされましたとのポップアップが出現。

f:id:null10blg:20180911220639p:plain

 

恐る恐る完了をクリックすると、なんとHTTPS化されているはずの当ブログのURLが、保護されていない通信という赤文字とともに、httpsに打ち消し線が入れられているではありませんか!

f:id:null10blg:20180911220659p:plain

 

なにこれアカン!パチモンサイトみたくなっとるやんけ!もしかして、これはHTTPS配信できていないということなのでしょうか?

 

問題の解決をするために、ブログデザインのソースコードとにらめっこしたところ怪しい箇所を発見。なんとまぁ気がつきにくい箇所に問題が潜んでいたのです。

 

オシャレなデザインにはjQuery

オシャレなブログに一つはあるであろう、動きのあるデザイン。

 

当ブログでも、例えばPC版のページ上部のカテゴリに関するグローバルメニューは、マウスをおけばカテゴリ一覧がずらっと現れるようなデザインになっています。

f:id:null10blg:20180913114705p:plain

 

このグローバルメニューに関しては、こちらのブログを参考にさせていただきました。

www.yukihy.com

 

で、本題に戻ります。HTTPS配信されているはずなのになぜか警告される問題は、実はこのグローバルメニュー実装に使われているjQueryの記述が原因だったのです。

 

こちらがグローバルメニュー実装のためのコードの一部分です。注目していただきたいのは、"src="以降でhttp:という記載があるということ。

f:id:null10blg:20180911220718p:plain

 

これはつまり、HTTPS通信のページの中にHTTP通信が入っているという非常に紛らわしい状況です。

 

ちなみに、こちらは設定→デザイン→カスタマイズ→ヘッダ →タイトル下に記載されていたものです。

 

では、どのように解決するのか。

 

それは簡単。このように、http:を省略すればよいのです。

f:id:null10blg:20180911220736p:plain

 

これで設定を保存すると、なんと警告がなくなっているではありませんか。

f:id:null10blg:20180911220756p:plain

 

理屈は結構簡単で、http:を省略することでページに合わせてhttps:かhttpが自動で選択されるようになります。

 

はてなブログはHTTPS化されていますので、自動的にhttps:が選択され、HTTPSとHTTPが混在するという問題が解決されたのでした。

 

今回はjQueryの部分が問題となっていましたが、その他の部分でhttpが記載されている場合に関しても同じような対策が有効だと思います。

 

これでようやくブログのHTTPS化が完了しました。多分...。

 

今回はここまでにします。

はてなブログやブログデザインに関してはこれからも記事にしていく予定です。