HTMLで脚注をつける方法

Webサイトで文章を投稿しようとするときに、脚注をつけたくなることがありますよね。はてなブログなどは公式の機能として脚注が実装されていますが、WordPressなどを使っている場合は自前で準備しないといけません。

ただ、HTMLで脚注用のタグが用意されているわけではないので、合わせ技で脚注を用意してあげる必要があります。ここでは、僕なりの合わせ技を備忘録的に書き留めておきます。

脚注の実例

僕は蓼食う本の虫という文芸Webメディアを運営しておりまして、そのサイトでたまに脚注を使うことがあります。

実際に脚注を使っている記事が以下のものです。

読書家に贈る読書本 / ピエール・バイヤール著, 大浦 康介訳『読んでいない本について堂々と語る方法』

HTMLタグを見る

上記の記事の脚注部分は、エディタ画面では以下のようになっています。

▼本文
「セブンルール」内で林副店長は「1冊の頭から終わりまでを通して、読み切った本のことを『読んだ本』というのだと思っていたので、1日1冊が限界で。なんとかして知識も広げたいし、たくさん読みたいし、情報量を自分の中でも増やしたいと思っていました」と語っていました。<sup id="root1"><a href="#1">(1)</a></sup> 3万冊もの本が並ぶ書店でそう語る林副店長を見ながら私が思い出したのは、毎年8月に行われる下鴨納涼古本まつりのことでした。

▼脚注
<span id="1"><a href="#root1">(1)</a><a href="https://www.fujitv-view.jp/article/post-128298/" style="text-decoration: under;">https://www.fujitv-view.jp/article/post-128298/</a></span>

まず本文では、脚注をつけたい箇所に脚注番号を入れます。それを<sup>タグでくくり、idを与える。ここでは、わかりやすいように”root〜”というようにしています。さらに脚注側でもidを”#〜”の形式で設定し、そこにページ内リンクを貼ります。

脚注側の数字はspanタグでくくっており、idの振り方やリンク先は、本文に設定したものを丁度反転させたものとなっています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA