kz’s blog

興味のあることについて書いていきます。

はてなブログをカスタマイズする際のスクリプト記述場所まとめ

はじめに

はてなブログをカスタマイズする際、スクリプト<script>...</script>を記述しますが、記述できる箇所がいくつかあるので迷う方もいらっしゃると思います。

はてなブログのページ毎に有効になる記述場所とポイントをまとめましたので参考にして頂ければ幸いです。

ヘッダ

設定 > 詳細設定 > 検索エンジン最適化 > headに要素を追加

f:id:kz62:20180817213250p:plain:w400

有効なページ

全ページ

ポイント

画面が表示される前に読み込まれます。画面表示前に実行されるべきものはこちらに記述するのがよいかと思います。

ただし、スクリプトが読み込まれている間は、画面の描画が止まってしまうので、重いスクリプトを記述してしまうと画面表示が遅くなってしまうので要注意です。

タイトル下/サイドバー/フッタ

デザイン > カスタマイズ > ヘッダ > タイトル下

f:id:kz62:20180817214015p:plain:w400

デザイン > カスタマイズ > サイドバー > モジュール(HTML)

f:id:kz62:20180817214238p:plain:w400

デザイン > カスタマイズ > フッタ

f:id:kz62:20180817214335p:plain:w400

有効なページ

全ページ

ポイント

スクリプトは随時読み込まれます。特に注意点はありませんが、プログラミングの世界ではスクリプトはページの下の方に記述する習慣がありますので、強いて言えばフッタにまとめて置くのが理想です。(ヘッダと同様、スクリプト読み込み中は画面描画が止まるため)

ただ、画面表示用のタグ(HTML)と同じところに置いた方が管理はしやすいと思います。

記事上/記事下

デザイン > カスタマイズ > 記事 > 記事上/記事下

f:id:kz62:20180817215210p:plain:w400

有効なページ

記事のみ

ポイント

記事のみ有効になるので、記事を表示した時しか実行させたくないスクリプトを記述するとよいです。

おわりに

以上になります。

間違っている部分等ありましたら、コメントにてお知らせ頂けると幸いです。