注釈・脚注を補完するスクリプト「autocompleteAnnotations」を書いた。
ブログを書いていると【1】のように注釈や脚注を付けたい時がある。しかし、一々ハッシュリンク貼ったりa要素のtitle属性に内容を書いたりするのは面倒くさいので自動化する。以下サンプル
See the Pen AutocompleteAnnotations by shigure (@webkatu) on CodePen.
使い方
「autocompleteAnnotations.js」をdefer属性をつけて呼び出し、注釈部分の要素に「class=”annotations”」という属性をつけて、説明部分の要素に「class=”footnotes”」という属性をつければOK。
<head> <!-- defer属性をつけてscriptを呼び出す --> <script defer src="autocompleteAnnotations.js"></script> </head> <body> <!-- 注釈部分を"annotations"というclass名の要素で囲む --> <p>hogehoge<span class="annotations">【1】</span></p> <p>fugafuga</p> <!-- 説明部分(脚注)を"footnotes"というクラス名の要素で囲む --> <p class="footnotes">piyopiyo</p> </body>
<head> <script defer src="autocompleteAnnotations.js"></script> </head> <body> <p>hogehoge<span class="annotations"><a id="annotation0" href="#footnote0" title="piyopiyo">【1】</a></span></p> <p>fugafuga</p> <p class="footnotes"><a id="footnote0" href="#annotation0">【1】</a>: piyopiyo</p> </body>