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

    JavaScript

    軽量、フラット、シンプルなツールチップを実装できるjQueryプラグイン「Tipr」

    Tiprはフラットでシンプルなツールチップを実装することができるjQu…

  2. NO IMAGE
  3. Frappe Charts

    JavaScript

    シンプルでモダンなSVGチャートを実装できる「Frappe Charts」

    Frappe Chartsは、シンプルでモダンなSVGチャート(グラフ…

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

    JavaScript

    jQueryでJavaScriptのfor…inを使ってオブジェクトから値を1つずつ取り…

    JavaScriptにはfor...inというプロパティの数だけ繰り返…

  5. JavaScript

    レスポンシブ対応で優雅なエフェクトが印象的なjQueryスライダー「Juicy Slider」

    レスポンシブに対応している軽量のjQueryスライダー「Juicy S…

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP