WordPressブログ用の脚注・注釈プラグイン7選。おすすめはあるのか→なかった

WordPressが世に誕生してから21年。未だに実装されない機能がある。それが「脚注・注釈」機能である。

脚注は、HTMLアンカー(ジャンプリンク)で手動で設定できるけど、記事内を行ったり来たりして、めちゃくちゃめんどくさい。途中で追記した場合には脚注番号がずれたりして、現実的ではない。

そこで、プラグインの出番となる。この記事では国内外の脚注・注釈プラグインを7つ(これで全部だと思う)実際に使ってみたメリット・デメリットとともに紹介していく。コタツ記事ではない、実際に使った検証結果を書いたので参考になるはず。

PR:般若ビルダーの脚注/注釈機能

というわけで、おはようございます。「般若ビルダー」「般若ビルダーサーチ」制作・販売者のササメです。

これから脚注プラグインを紹介していきたいところですが、結論から言うとプラグインではしっくり来るものがありませんでした。基本、ブロックエディタに対応していないので、ショートコードを手入力する手間もあります。

なので、WordPressテーマ「般若ビルダーver.1.7.0」にて脚注・注釈の理想形を実装しました!

そんな般若ビルダー脚注を紹介する前に、まずは国内外の脚注プラグイン7つ。実際に使ってみたメリット、デメリットを書いていきます。

1.footnotes

footnotes
公式:footnotes
ここが好き
  • 管理画面が日本語に対応で、超細かくカスタマイズできる
  • 脚注一覧から該当箇所に戻るリンク付き
ここが嫌い
  • 更新止まっている
  • カスタマイズ性めちゃくちゃ高いけど、ここまで必要ない
  • ツールチップがスマホ画面からはみ出る。調整必要
  • 脚注一覧、PC文字サイズ小さくしたい。行間も無駄に広い。調整必要

2.Easy Footnotes

公式:Easy Footnotes

Easy Footnotesの良い点、悪い点

ここが好き
  • 管理画面、英語だけどシンプルで迷わない
ここが嫌い
  • スマホ。タップでツールチップではなく、脚注に移動してしまうことがある。挙動が一定しない
  • 管理画面シンプルすぎる。脚注一覧の見出しがh4で固定で変更できない

3.Modern Footnotes

Modern Footnotesの良い点、悪い点

ここが好き
  • 管理画面がシンプルだけど、Easy Footnotesより充実
ここが嫌い
  • ツールチップ内のテキストリンクがずれる(PC)
  • 展開型の脚注表示。文末で使うと余白が広く感じてしまう(スマホ)
  • 脚注一覧に上へ戻るリンクがない

4.Footnotes Made Easy

公式:Footnotes Made Easy

Footnotes Made Easyの良い点、悪い点

ここが好き
  • 脚注の前後に自由にコンテンツ配置できる
ここが嫌い
  • ツールチップではなく画像のtitle属性のような表示でワンテンポ遅い
  • ツールチップタイプにすると、表示小さくて読みにくい
  • ツールチップの反応悪い(スマホ)
  • 数字タップで脚注一覧に移動してしまう(スマホ)

5.CM Footnotes

CM Footnotes
公式:CM Footnotes

CM Footnotesの良い点、悪い点

ここが好き
  • なし
ここが嫌い
  • 設定方法がよくわからない
  • 脚注一覧に画像表示されるのが目立ちすぎ。離脱の原因
  • スマホ対応してるのか不明

6.Academic Blogger’s Toolkit

公式:Academic Blogger’s Toolkit

Academic Blogger’s Toolkitの良い点、悪い点

ここが好き
  • ブロックエディタのツールバー対応
ここが嫌い
  • 3年前に更新止まっている
  • ブロックエディタのツールバーから設定できるが、逆に面倒
  • スマホの反応悪い
  • 脚注にURLリンクできない

7.Footnote Drawer

Footnote Drawerの良い点、悪い点

ここが好き
  • 唯一の国産プラグイン
  • 管理画面超シンプル。脚注見出しの文言設定のみ
ここが嫌い
  • PCもスマホもツールチップで表示されない
  • インストール数10未満で更新止まりそう

般若ビルダー脚注の実装サンプルと、こだわりの機能

というわけで、満足のいく脚注プラグインがなかったので、自社制作しました。般若ビルダー本体に実装したので、「般若ビルダー脚注」と呼ぶことにします。

まずは下の表示例をご覧ください。……ご覧くださいというか、PCなら数字部分にカーソルを置いてみてください。スマホなら数字部分をタップしてみてください。

実装サンプル


山陰沖の低気圧と南岸の低気圧・前線の影響で、九州から中部地方にかけては朝から雨の降っている所が多くなっています。バイデン大統領との会談で明らかになりました[1]

太平洋沿岸などでは一時的に雨の強まる可能性があるためご注意下さい。 昼間も気温はあまり上がらず[2][3]、最高気温が20℃に届かない所もありそうです。

ひろゆきさんによると「昨日よりも肌寒くなりますので、雨具と上着が必須の一日です」とのことです[4]


どうでしょう?

実際に使用感を確認していただいたところで、般若ビルダーの脚注・注釈機能のこだわりを7つ紹介していきます。

こだわり1:PCではツールチップ、スマホではモーダルウィンドウ

般若ビルダー脚注(PC表示例)
PCではツールチップ

数字部分にカーソルを合わせると、PCサイトではツールチップで脚注内容を表示、スマホサイトでは、モーダルウィンドウで脚注内容を表示します。特に、スマホでの表示にこだわったので、スマホで数字部分をタップしてみてください。

般若ビルダー脚注(スマホ表示例)
スマホはモーダルウィンドウ

こだわり2:脚注には上へ戻るリンク付き

上へもどるリンク

PCサイトでは、数字部分をクリックすると記事最下部にある脚注に移動します。脚注の該当の数字の横には上へ戻るリンクがあるので、元の記事部分に迷わずに戻れます。

こだわり3:脚注をアコーディオン化する/しないの切り替え

アコーディオン化

脚注部分をあまり強調したくない記事では、脚注部分をアコーディオン化できます。

こだわり4:脚注の見出し名をカスタマイズできる

見出しの編集

脚注の見出し名はデフォルトで「参考文献」にしていますが、他の見出し名に変更できます。

こだわり5:脚注の見出しタグ(h2~h4)を選択できる

見出しタグの編集

一部のプラグインだと、見出しタグが固定されていたりしますが、h2~h4まで自由に設定できます。

こだわり6:記事終わりの脚注を表示する/しないの切り替え

記事の最後にリンクやアドセンス広告がある場合、邪魔にならないように記事終わりの脚注を非表示にできます。本文中の注釈表示のみにできます。

こだわり7:ブロックエディタでも2クリックで設定できる

ブロックエディタのツールバー対応

般若ビルダーブロックのツールバーから、2クリックで脚注表示のショートコードを記事に挿入できます。あとは、ショートコード内に脚注に表示したい内容を書くだけです。

世に出ているプラグインだと手入力でショートコードを入力する手間が発生します。その手間を省略しました。

プラグインではなくて、テーマに実装した理由

以上がWordPressテーマ「般若ビルダーver.1.70」から実装された脚注/注釈機能です。

あえてテーマの機能として実装しました。プラグインにして配布しようかとも考えたのですが、やめました。理由は、よほど手の込んだプラグインじゃないと、すぐに他社のテーマに実装されてしまうからです。

昨今のWordPressテーマ業界、機能のかぶせ合いです(笑)せっかくプラグインとしてリリースしても、テーマ側に実装されると「もう般若ビルダー脚注は不要じゃん」みたいなことになると悲しいので。

私の場合、脚注を実装する際はプラグインを使わないで完全手動でやっていました。本文内に上付き文字の数字を入れて、記事下部にリンクを入れて、行ったり来たり……をしていました。

それと比べると、行ったり来たりする必要もなく、上付き数字を入れる必要もなく、ショートコードを手動で入力する必要もなく、めちゃくちゃ便利&快適になりました。自分の理想系なので当然ですが、大満足です。

というわけで、既存の脚注プラグインのデメリットをすべて潰した「般若ビルダー脚注」を使って、ソース付きの信頼性の高い記事を作りたい人は、WordPressテーマ「般若ビルダー」を購入してご利用ください。

>> 国内唯一の脚注機能付きWordPressテーマ・般若ビルダーを購入する

↓これが脚注サンプル

参考文献

  1. 死んだばあちゃんがよく言ってたセリフ

  2. じいちゃんは一度も言わずに天に召された

  3. 金融庁:「ひろゆき氏との対談動画」の公表について(閲覧日:2022/10/07)

この記事を書いた人

ササメ
般若ビルダーシリーズ制作

「般若ビルダー」「般若ビルダーサーチ」の制作・販売。2008年8月からWordPressを使ったブログ・サイトの運営を開始。2009年から専業、2014年に法人化。読者の知りたい真実を読みやすく、わかりやすく、本音で伝えるサイト運営が得意。葉酸サプリの専門家でもある。

コメント

この記事へのコメントはありません。

コメントする