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. Swipebox

    JavaScript

    スマホやタブレットのスワイプにも対応したLightboxを実装できるjQueryプラグイン「Swip…

    今後かなり需要がありそうなjQueryプラグインがあったので使い方も兼…

  2. JavaScript

    文章の段落にコメントできるjQueryプラグイン「SideComments.js」

    おもしろそうだったのでメモがてらご紹介。SideComments.js…

  3. Smooth Anchor Scrolling

    JavaScript

    ページ内リンクをスクロールできる「Smooth Anchor Scrolling」

    ページ内リンクをスムーズにスクロールできる「Smooth Anchor…

  4. no-image

    JavaScript

    マウスの動作に連動するシャドウエフェクト実装「Jquery Shadow Plugin」

    Jquery Shadow Pluginはマウスの動作に連動するシャド…

  5. qpScroll
  6. jquery.enhsplitter

    JavaScript

    コンテンツを分離できるフレーム実装「jquery.enhsplitter」

    jquery.enhsplitterはコンテンツを分離させるフレームを…

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP