Footnoted

JavaScript

脚注(注釈)を入れたい時に役立つjQueryプラグイン「Footnoted」

FootnotedというjQueryプラグインは文章の中に脚注(注釈)を入れたい時にとても役立ちます。特定のHTMLを記述することで自動で注釈番号(注記号)が付いていき、さらにそれをクリックすることで補足説明の場所までスクロール移動させることもできます。長文記事を書く時なんかに役立つこと間違いなしです。

[ads_center]

Footnotedの使い方

Footnoted

Footnoted

以下のように、自動で注釈番号が挿入されます。番号は連番になっているので、特定のHTMLを記述する度に自動で番号が付いていきます。

Footnoted

この番号をクリックすると、下にある補足説明の場所まで自動でスクロールされます。とても便利ですね。

使い方はとても簡単です。まずはjQuery本体とダウンロードしたプラグインファイルをhead内に読み込みます。

<link href="footnoted.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="footnoted.min.js"></script>

脚注を入れたいところに以下のHTMLを記述します。複数ある場合でも同じHTMLを各場所に挿入するだけでOKです。自動で連番になっていきます。

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

記事の最後の方に入れる補足説明は以下のようにolかulで記述します。id名にfootnotesを付けてあげます。

<ol id="footnotes">
    <li>ここは注釈1の補足説明です...</li>
    <li>ここは注釈2の補足説明です...</li>
</ol>

これだけでOKです。使い方がシンプルなので気軽に導入できますね。脚注を付けた記事を作成したい時に覚えておきたいプラグインです。

関連記事

  1. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでパターン化されたクラス名をループで1つずつ取り出して処理する

    どうでもいい内容なんですがちょっとやりたかったのでメモです。jQuer…

  2. Amigo Sorter Plugin

    JavaScript

    タッチ対応で直感的に並べ替えできるjQueryプラグイン「Amigo Sorter Plugin」

    Amigo Sorter Pluginは、タッチ対応で直感的にリスト項…

  3. Lazy Load

    JavaScript

    画像の読み込みを遅らせてスクロールに合わせて表示させるjQueryプラグイン「Lazy Load」

    画像の読み込みを遅らせて表示させることができるjQueryプラグイン「…

  4. EasyFader Plugin Demo

    JavaScript

    レスポンシブ対応で軽量なフェードスライドショーを実装する「EasyFader Plugin Demo…

    シンプルなフェードアニメーションによるスライドショーを実装することがで…

  5. JavaScript

    jQueryプラグイン・2014年上半期56選まとめ

    気づいたら2014年も上半期が終わってしまいましたね。そんなわけで、2…

  6. Animated Intro With jQuery

    JavaScript

    プログレスバーつきのカッコいいイントロページを実装する「Animated Intro With jQ…

    シンプルなアニメーションがとてもカッコいいイントロページを実装する「A…

最近の記事

  1. Anker PowerWave 10 Pad & Stand セット
  2. ミノン メン 薬用全身シャンプー

アーカイブ

PAGE TOP