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

IT

投稿日:

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

YouTube

スポンサーリンク

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サイドバー