jQueryが動かない!初心者がはてなブログのカスタイマイズでつまずいたこと【トラブル解決】

どーも、みなさん! いちみほんじん(一見本人 / いちサンプル)です。

 

はてなブログのカスタイマイズは、やり始めると止まらなくなりますよね! 私自身、偉大な先人の皆さまのお力をお借りして、少しずつカスタイマイズを進めている日々です。時にはカスタマイズがうまくできない! CSSが反映されない! scriptが動かない! 動作しない! という状況もあるかと思います。

 

この記事では、はてなブログのカスタマイズにおけるトラブルその解決法について扱っています。なお初心者ゆえのトラブルであることをご承知おきくださいませ!

 

下記ははてなブログのカスタマイズに必要なjQueryが動かない場合についての備忘録です。

 

 jQueryが動作しない ⇒ ブログのカスタマイズができない

はてブロでのカスタイマイズについて調べていると、よく登場するのがjQuery(ジェイクエリー)です。私のブログの場合、カスタイマイズについてご教授くださっているウェブサイトのとおりにやっても、どうにもこうにも作動しませんでした。

 

私が是非取り入れたかったのは、以下のカスタマイズです。

Yukihy LifeさんのjQueryでできる目次カスタム
最初は隠しておいて、クリックしたら表示するようにする

www.yukihy.com

 

私のブログでは何故かまったく動作しないんですよね。こんな状況でした。

フッタとデザインCSSにコピペして保存すると、目次が消えてしまう

(タグは残っているが、プレビューで見ると表示されなくなってしまう)

私のはてなブログでjQueryが動作しないのは他のカスタマイズを試したときにも経験済みだったので(保留というか放置していた)、意を決して問題解決に乗り出しました。

 

エラーの原因を特定 ⇒ スクリプトエラー

まずは「jquery 動かない」で検索。

下記ウェブサイトで原因を特定することができました!

www.finefinefine.jp

 JQUERYが動かない時に確認する9項目
1)スクリプトエラー

 

確認する9項目のうちのひとつ目(スクリプトエラー)でした! Finefinefine.jpさんがご教授くださっているとおり、Chromeのデベロッパーツールを起動したところアッサリ原因が判明しました。

 

f:id:isagow:20190624232226j:plain

 

どうやらエラーの原因がhttpsにあることが判明

 

私のはてなブログは開設当初(2019年2月)からHTTPS化(https://)されています。一方、jQueryを読み込むコードはHTTP(http://)だったので、ここのあたりがエラーの原因なのだというアタリがつきました(正確には理解していません)。

 

Chromeさんは何が悪いのかちゃんと教えてくれていました(私が知らないところで)。実はChromeのデベロッパーツールで調べることをずっとサボっていました。どうせ見ても分からないだろうと思って。jQueryのエラーを放置すること1ヵ月。ずいぶん時間を浪費してしまいました。やっぱりずぼらはダメですね~

 

エラー原因のコードを修正 ⇒ 問題解決!

次に「jquery https エラー」で検索したところ、すぐに解決策が見つかりました。

“https” だと jQuery が動かない時には | 株式会社ジェイクール【ホームページ更新代行・制作】

www.j-cool.co.jp

株式会社ジェイクールさんがご教授くださっている下記方法で、ものの見事に問題が解決しました!

 

解決方法

HTTPSとHTTPの両方で動く記述に変更
 フッタのjQueryを読み込むコード[http://]を[//]に修正する
(詳細はリンク先でご確認ください)

 

おかげさまでYukihy LifeさんのjQueryでできる目次カスタムを実装することができました。 jQueryを使ったカスタイマイズには長らくつまずいていたので本当に助かりました! 皆さまに心から感謝しています!

 

jQueryを利用したカスタイマイズができない場合のまとめ

今回の内容をまとめます。

  1. jQueryが動かない原因を特定する
  2. 今回はスクリプトエラーだった(httpsとhttpのあたり)
  3. HTTPSとHTTPの両方で動作する記述に変更する

 

上記対応によってトラブルはすっかり解消しましたが、初心者ゆえ不正確な表現になっているところがあるかもしれません。ご容赦のほどお願い申し上げます。

 

今回はここまでです。どうもありがとうございました! 今後ともどうぞよろしくお願いいたします!