英語とappleとDIYと

apple製品、英語関連、DIYについて

はてなブログhttps化のJavaScript問題を簡単修正方法紹介「メニューカスタマイズ表示」

Check!!!▼

f:id:buchibuchi4647:20180316160839p:plain

はてなブログhttps化SSLが配信されました。カスタマイズしている人にとって大きなダメージは混在コンテンツよってjavascriptが表示されない問題です。メニューのスクロールやサイドバーそしてシェアアカウントまで動かなくなります。しかし、簡単な方法で1発解決できます。本日ははてなブログhttps化によってjavaを問題なく表示させる方法を紹介します。

 https化配信でもjavascriptを簡単に表示させる方法!

はてなブログ公式からhttps配信はとても大きな動きであったと思います。googleのSEO的に考えてもhttpsを推進しています。httpsとhttpの違いは簡単に言えばあなたのドメインが保護されているかどうかです。新たにhttpsに設定してドメインを保護することによって、SEO対策になると言われています。

一方で、はてなブログをしている人の多くはカスタマイズをしていると思います。例えば、メニュをスクロール型の階層化、スライダー設置、そしてSNSに関してはシェア数を表示させたりさせていると思います。それらのほとんどの動作はjavascriptとを使って表示させています。

https化→JavaScriptが使えない

はてなブログhttps化の注意事項にhttps化をするとJavaScriptを使ったカスタマイズは使うことができませんと書かれています。僕自身のはてなブログでもhttps化配信が実装されたので試してみると見事にJavaScriptを使ったカスタマイズが動きませんでした。

JavaScriptが使えないとSEO的に有効であってもあまり意味がないような気がしました。しかも一度有効化してしまうと取り消すことができません。https化は慎重にしましょう。

httpsでJavaScriptを表示する方法は簡単

https化によって動かないカスタマイズを表示させることは実はとても簡単なことです。例えば、以下のコードはダッシュボード→詳細設定→headに追加していたコードです。

f:id:buchibuchi4647:20180316154116p:plain

すでにドメイン全体がhttps化にも関わらず、このコードはhttp〜になっています。それでは動くはずもありません。メニューバーをスクロールすることができませんでした。

簡単にする表示方法

表示させる方法はとても簡単です。このコードを修正すれば再び動作するようになります。このコードのhttp→httpsと修正するだけで大丈夫です。

f:id:buchibuchi4647:20180316154014p:plain

この修正によってhttpsで動作するようになります。ちなみにhttpでも動作します。

もう1つの方法

修正方法はもう1つあります。どちらが簡単はあなたの判断にまかせます。とりあえず両方紹介します。httpで動かないならその部分を抜き取ってしまう方法です。

f:id:buchibuchi4647:20180316154928p:plain

"//の形と異形ですが、これでもhttpsとhttpの両方で動作の確認ができました。

以上の結果からJavaScriptの動作に関して以下のように考えます。

src=”http//→httpのみ表示できます。src=”https//→httpsとhttp両方表示できます。src=”http//→httpsとhttp両方表示できます。

コードの修正のみの今回のhttps化配信に対応できるのであなたも確認してみてください。

古い記事のカスタマイズ

僕の記事のカスタマイズ記事もそうですが、はてなブログは多くの人がカスタマイズの方法を記事にしています。非常に参考になります。しかし、今回のhttps化によって注意が必要です。記事のほとんどはhttpで実装されていたものです。あなたのドメインがhttpsであるなら動かない可能性があります。

その場合は、自分でコードの修正を加える必要が出てきます。本当なら記事を作った本人が記事を更新する必要がありますが。すみません。僕も新たにカスタマイズ系の記事を更新します。

おわりに

今回は2018年2月22日にhttps化が配信されました。その結果、カスタマイズで悩んでいる人がいると思います。あなたがこの記事を読んで解決してくれることを願っています。最後まで記事を読んでいただきありがとうございました。