素敵なサムシングを独断と偏見で一方的に紹介するブログ(´・ω・`)

IT

投稿日:

【ひと手間必要】はてなブログでjQueryを使えるようにする方法

ねこじゃすり

created by Rinker
PEPPY(ペピイ)
¥3,850 (2024/03/15 19:03:46時点 Amazon調べ-詳細)

猫を魅了する魔法の装備品!

[ノースフェイス] THE NORTH FACE メンズ アウター マウンテンライトジャケット

created by Rinker
THE NORTH FACE(ザノースフェイス)
¥29,280 (2024/03/15 19:06:01時点 Amazon調べ-詳細)

防水暴風で耐久性抜群なので旅行で大活躍です!

ペヤング ソースやきそば 120g×18個

created by Rinker
ペヤング
¥2,600 (2024/03/15 19:03:46時点 Amazon調べ-詳細)

とりあえず保存食として買っておけば間違いなし!

モンスターエナジー 355ml×24本 [エナジードリンク]

created by Rinker
モンスター
¥4,748 (2024/03/15 19:03:48時点 Amazon調べ-詳細)

脳を活性化させるにはこれ!

ドラゴンクエスト メタリックモンスターズギャラリー メタルキング

created by Rinker
スクウェア・エニックス(SQUARE ENIX)
¥3,250 (2024/03/15 19:03:48時点 Amazon調べ-詳細)

みんな大好き経験値の塊をデスクに常備しておこう!

MOFT X 【新型 ミニマム版】 iPhone対応 スマホスタンド

created by Rinker
MOFT
¥2,880 (2024/03/15 19:06:03時点 Amazon調べ-詳細)

Amazon一番人気のスマホスタンド!カード類も収納出来てかさ張らないのでオススメです!

サンディスク microSD 128GB

スマホからSwitchまで使える大容量MicroSDカード!

スポンサーリンク

336×280




はてなブログでもjQueryを使いたい!!

人間の欲深さ炸裂☆

以前、はてなブログに登録をしてブログを開設するまでの手順をまとめました。

はてなブログを利用していて、慣れてくるとJavaScriptを使ってさらにカスタマイズをしたくなると思います。

開発者ツールでソースを確認してみると、多少バージョンは古いようですがjQueryを読み込んでいるので使えそうですね♪

しかし世の中そう甘くはない

jQueryが使えない・・・?

試しに以下のようなアラートを表示させるスクリプトを詳細設定のheadに要素を追加エリアに追加して動作を確認してみました。

しかし、結果は以下のようなエラーログが表示されアラートが出ませんでした。

これはjQueryのグローバル変数の「$」が見つからないというエラーになります。

原因は読み込みタイミング

どうやら、はてなブログの標準ではjQueryの読み込みをHTML構造の下部(タイミングとしてはかなり後)で行っている影響で、jQueryファイルを読み込み前に$(document)が実行されてしまい、結果として$が見つからないというエラーになってしまっているようです。

じゃあどうすれば良いのか・・・orz

回避方法

addEventListenerを使おう

基本的に、JavaScriptはDOM要素全て読み込まれてから実行する必要があります。

これは、JavaScriptの性質上クリックイベント等の仕込みは実行時点のDOM要素に対してセットされます。
後から動的に追加したDOMなどには適用されないので気をつけましょう。
ちなみに、CSSは後から追加されたDOMに対してもセレクターがマッチすれば適用されるので動きが少し違います。

その上で、jQueryも基本的には$(document).ready(function () {});を使ってDOM要素を全て描写し終えたら処理を行うという暗黙のルールが一般的となっています。

しかし、今回はこちらが使えないので、addEventListenerという似たような動きをするJavaScript標準のメソッドを使って似たような事を行うことではてなブログでもjQueryを使うことが可能です。

今回の場合は、以下のように記述を変更する事になります。

確認

では、実際にはてなブログにアクセスしてみましょう。

正常にjQueryの処理が実行されるようになりましたね♪

終わりに

仕組みがわからない人ではハマってしまいそうな部分ですが、理解をしてしまえば解決策がすぐ見つかります。

後は、他のサイトと同じようにjQueryでのカスタマイズが自由に出来るようになりますので、ブログを見やすくするために試行錯誤を行ってみてください。

336×280




336×280




CATEGORIES & TAGS

IT, , , , ,

blogenist

Author: blogenist

関連記事

YouTubeも見てね♪

お名前.comサイドバー