WordPress で記事に脚注を付けたくなりました。プラグインを探してみたところ、「Modern Footnotes」が使えそうだったので試してみることにしました。
基本
![Modern Footnotes の投稿画面での使い方](https://labor.ewigleere.net/wp-content/uploads/2022/09/wp-plugin-usage-of-modern-footnote-20220912-1.jpg)
投稿画面(ブロックエディタ)でチェブロン(>)から「Add a Footnote」で選択範囲をツールチップ内に入れることができます。
![Modern Footnotes の投稿画面での使い方](https://labor.ewigleere.net/wp-content/uploads/2022/09/wp-plugin-usage-of-modern-footnote-20220912-2.jpg)
脚注に入りました。
![Modern Footnotes の表示 (プラグインのデザイン)](https://labor.ewigleere.net/wp-content/uploads/2022/09/wp-plugin-usage-of-modern-footnote-20220912-3.jpg)
フロント画面で表示してみると、右上添え字の数字になります。その数字をクリック(「Desktop footnote behavior」のセレクトボックス項目。デフォルトはクリックですが、他にホバー・展開の3種から選択可)するとプラグインのデザインのツールチップを表示できます。
表示バリエーション
![Modern Footnotes の表示 (ブラウザデフォルトのツールチップ)](https://labor.ewigleere.net/wp-content/uploads/2022/09/wp-plugin-usage-of-modern-footnote-20220912-4.jpg)
「Show browser tooltip on hover (Make footnote content appear in web browser's native tooltip when hovering over footnote number
)」のチェックを入れるとブラウザのデフォルトのツールチップがホバー時に表示されるようになります。上述の表示バリエーションでホバーにしていると重複するので、その場合はこちらのチェックを外しておく方が良いでしょう(デフォルトはオフですし)。
![Modern Footnotes の表示 (展開表示バージョン。2行目が展開された脚注文。最後は投稿末尾の脚注リスト)](https://labor.ewigleere.net/wp-content/uploads/2022/09/wp-plugin-usage-of-modern-footnote-20220912-5.jpg)
「Desktop footnote behavior」を展開にすると、数字クリック時に文章下部に脚注が表示されるモードになります。
記事の末尾に脚注リストを追加
![Modern Footnotes の表示 (記事の末尾にリストを追加)](https://labor.ewigleere.net/wp-content/uploads/2022/09/wp-plugin-usage-of-modern-footnote-20220912-6.jpg)
「Display footnote list at bottom of posts(Display footnote list at bottom of posts)」にチェックを入れる(デフォルト: オフ)と、記事の末尾に脚注のリストを追加できます。
なお、「Heading for footnote list」にこの脚注リストの見出しを追加できます。ここまでできれば、それらしい脚注になると思います。
ショートコード
![Modern Footnotes の使い方 (ショートコード入力)](https://labor.ewigleere.net/wp-content/uploads/2022/09/wp-plugin-usage-of-modern-footnote-20220912-7.jpg)
ショートコード入力のパターンも試してみます。
[mfn]testtest[/mfn]
例えば、このように入力してみます。
![Modern Footnotes の表示 (ショートコード入力したものを表示)](https://labor.ewigleere.net/wp-content/uploads/2022/09/wp-plugin-usage-of-modern-footnote-20220912-8.jpg)
無事、脚注が追加されました。
最終設定
![Modern Footnotes の使い方 (設定画面)](https://labor.ewigleere.net/wp-content/uploads/2022/09/wp-plugin-usage-of-modern-footnote-20220912-9-1024x871.jpg)
最終的にこの辺りの設定にしてみました。