[JS]脚注をデスクトップ・タブレット・スマフォそれぞれで最適に表示するスクリプト -sidenotes

デスクトップ時はすぐ横に、タブレットではすぐ下に、スマフォではフッタにまとめて脚注を表示するjQueryのプラグインを紹介します。

sidenotes
sidenotes- GitHub

• sidenotesのデモ
• sidenotesの使い方

sidenotesのデモ

デモでは脚注が、デスクトップ、タブレット、スマフォなど表示サイズに合わせて最適に表示されます。

デモページ：幅1,200pxで表示

テキストと脚注は、複数がページ内に配置されています。

表示サイズをタブレットサイズの780pxに変更すると、脚注は直下に表示されます。

デモページ：幅780pxで表示

さらに、スマフォサイズの480pxに変更すると、脚注はフッタにまとめて表示されます。

デモページ：幅480pxで表示（左：テキスト、右：脚注）

テキストと脚注は相互リンクされているので、行き来できます。

sidenotesの使い方

Step 1: 外部ファイル

jquery.jsと当スクリプトを外部ファイルとして記述します。

<script src="js/jquery.min.js"></script>
<script src="js/jquery.sidenotes.min.js"></script>

Step 2: HTML

脚注をつけたい箇所に「class="footnote"」を加え、脚注へページ内リンクを設定します。

<article>
<p>脚注をつけたい箇所<sup id="fnref:notes1"><a href="#fn:notes1" class="footnote">1</a></sup></p>
<p>脚注をつけたい箇所<sup id="fnref:notes2"><a href="#fn:notes2" class="footnote">2</a></sup></p>
</article>

脚注は、リスト要素で実装します。
「↩」は元の箇所に戻るリンクです。

<div class="footnotes">
  <ol>
    <li id="fn:notes1">
      <p>脚注1のテキスト <a href="#fnref:notes1" class="reversefootnote">&#8617;</a></p>
    </li>
    <li id="fn:snotes2">
      <p>脚注２のテキスト <a href="#fnref:notes2" class="reversefootnote">&#8617;</a></p>
    </li>
</div>

Step 3: JavaScript

jQueryのセレクタでテキストと脚注を含むコンテナを指定し、スクリプトを実行します。

$('.post').sidenotes();

脚注はデフォルトでaside要素に変換され、ドキュメントの近くに表示されます。上記デモのようにレスポンシブ対応で、デスクトップではサイド、タブレットでは直下、スマフォではフッタに表示されますが、これはスクリプトで設定することも可能です。

// Hide the sidenotes, show the footnotes
$('.post').sidenotes('hide');

// Show the sidenotes, hide the footnotes
$('.post').sidenotes('show');