あなたのブログに脚注を付けるJavaScriptをご紹介。

ブログを書いていて、専門用語などに説明を付けたくなりませんか？
その場合、いちばん最後に「脚注」という形で付加していく事が多いかと思います。

そこでこの「jQuery-Footnotes」というJavaScriptを使ってみましょう。

使い方

上記サイトからダウンロードします。
ダウンロードしたら解凍してHTMLソースコードの内(通常、JavaScriptのファイルを読み込む場所)に下記コードを付加します。
[bash]
<script type="text/javascript" src="jquery.footnotes.js"></script>
<script language="JavaScript" type="text/javascript">
$(function() {
$("#id").footnotes();
});
</script>
[/bash]
“#id”はサイトに合わせて指定して下さい。
では実際に脚注を書き込んでみましょう。
[html]
<div id="id">
しかし、クロスブラウザ対応にしようとすると、結構間隔が空いたり、ずれたり・・・という現象<span class="footnote">ブラウザ毎のCSS解釈の差異が原因。最近はie9.jsなどを読み込むことで解消するものもある</span>が発生。
困ったなぁ・・・と頭を抱え、ネットを検索してたら「ブラウザに設定された初期値をクリアする必要がある<span class="footnote">reset.cssという名前でいろいろな人が公開している</span>」との記述。
<ol id="autoFootnotes0" class="footnotesList"></ol> // 脚注表示部分にこの行を追加
</div>
[/html]
脚注部分はspanタグで囲み、classには”footnote”を指定します。
これを使って、簡単な豆知識などをサイトに埋め込んでみてはいかがでしょうか？
[tmkm-amazon]4774148563[/tmkm-amazon]