文中に脚注を手軽に加えられるjQueryプラグイン・Footnoted

Ads

文中に脚注を加えるスクリプトのご紹介です。プラグインと呼べるかどうか分からないほどシンプルなものですが、手軽に加えられるので長文を扱う時の為に覚えておいて損は無いかも。

Wikipediaっぽいやつです。以下動作サンプルになります。

Footnoted


数字をクリックすると下部にスクロールします。元の場所に戻れるようにもなっています。

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="footnoted.min.js"></script>

本体とスクリプトを読み込みます。

脚注へのリンクは、リンクを起きたい場所に

<sup class="footnoted"></sup>

を置くだけ。

脚注は

<ol id="footnotes">
	<li>国際連合の統計による世界の都市部の人口</li>
        <li>プライスウォーターハウスクーパースによる都市のGDP</li>
        <li>2012 Global Cities Index and Emerging Cities Outlook (2012年4月公表)</li>
        <li>鈴木理生『東京の地名がわかる事典』日本実業出版社、2002年2月、P19。</li>
</ol>

といったようにリストを作るだけ。

手軽で良いですね。

Footnoted