WordPressに脚注・注釈機能が欲しい!
WordPressが世に誕生してから22年。一向に実装されなかった「脚注・注釈」機能。
脚注は、今までもHTMLアンカー(ジャンプリンク)で手動で設定できた。しかし、記事内を行ったり来たりして、めちゃくちゃめんどくさい。途中で追記した場合には脚注番号がずれたりして、現実的ではなかった。
そんななか、WordPress6.3より、脚注機能がWordPress本体に実装。ただし、現状はカスタマイズ性にかなり乏しく、満足のいく使い勝手ではない。
そこで、プラグインの出番となる。この記事では国内外の脚注・注釈プラグインを7つ(これで全部だと思う)実際に使ってみたメリット・デメリットとともに紹介していく。コタツ記事ではない、実際に使った検証結果を書いたので参考になるはず。
PR:般若ビルダーの脚注/注釈機能
というわけで、こんばんは。「般若ビルダー」「般若ビルダーサーチ」制作・販売者のササメです。
これから脚注プラグインを紹介していきたいところですが、結論から言うとプラグインではしっくり来るものがありませんでした。基本、ブロックエディタに対応していないので、ショートコードを手入力する手間もあります。
なので、WordPressテーマ「般若ビルダーver.1.7.0」にて脚注・注釈の理想形を実装しました!
そんな般若ビルダー脚注は最後に紹介しますが、まずは国内外の脚注プラグイン7つ。実際に使ってみたメリット、デメリットを書いていきます。
1.footnotes
- 管理画面が日本語に対応で、超細かくカスタマイズできる
- 脚注一覧から該当箇所に戻るリンク付き
- 更新止まっている
- カスタマイズ性めちゃくちゃ高いけど、ここまで必要ない
- ツールチップがスマホ画面からはみ出る。調整必要
- 脚注一覧、PC文字サイズ小さくしたい。行間も無駄に広い。調整必要
2.Easy Footnotes
Easy Footnotesの良い点、悪い点
- 管理画面、英語だけどシンプルで迷わない
- スマホ。タップでツールチップではなく、脚注に移動してしまうことがある。挙動が一定しない
- 管理画面シンプルすぎる。脚注一覧の見出しがh4で固定で変更できない
3.Modern Footnotes
Modern Footnotesの良い点、悪い点
- 管理画面がシンプルだけど、Easy Footnotesより充実
- ツールチップ内のテキストリンクがずれる(PC)
- 展開型の脚注表示。文末で使うと余白が広く感じてしまう(スマホ)
- 脚注一覧に上へ戻るリンクがない
4.Footnotes Made Easy
Footnotes Made Easyの良い点、悪い点
- 脚注の前後に自由にコンテンツ配置できる
- ツールチップではなく画像のtitle属性のような表示でワンテンポ遅い
- ツールチップタイプにすると、表示小さくて読みにくい
- ツールチップの反応悪い(スマホ)
- 数字タップで脚注一覧に移動してしまう(スマホ)
5.CM Footnotes
CM Footnotesの良い点、悪い点
- なし
- 設定方法がよくわからない
- 脚注一覧に画像表示されるのが目立ちすぎ。離脱の原因
- スマホ対応してるのか不明
6.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サイトではツールチップで脚注内容を表示、スマホサイトでは、モーダルウィンドウで脚注内容を表示します。特に、スマホでの表示にこだわったので、スマホで数字部分をタップしてみてください。
こだわり2:脚注には上へ戻るリンク付き
PCサイトでは、数字部分をクリックすると記事最下部にある脚注に移動します。脚注の該当の数字の横には上へ戻るリンクがあるので、元の記事部分に迷わずに戻れます。
こだわり3:脚注をアコーディオン化する/しないの切り替え
脚注部分をあまり強調したくない記事では、脚注部分をアコーディオン化できます。
こだわり4:脚注の見出し名をカスタマイズできる
脚注の見出し名はデフォルトで「参考文献」にしていますが、他の見出し名に変更できます。
こだわり5:脚注の見出しタグ(h2~h4)を選択できる
一部のプラグインだと、見出しタグが固定されていたりしますが、h2~h4まで自由に設定できます。
こだわり6:記事終わりの脚注を表示する/しないの切り替え
記事の最後にリンクやアドセンス広告がある場合、邪魔にならないように記事終わりの脚注を非表示にできます。本文中の注釈表示のみにできます。
こだわり7:ブロックエディタでも2クリックで設定できる
般若ビルダーブロックのツールバーから、2クリックで脚注表示のショートコードを記事に挿入できます。あとは、ショートコード内に脚注に表示したい内容を書くだけです。
世に出ているプラグインだと手入力でショートコードを入力する手間が発生します。その手間を省略しました。
プラグインではなくて、テーマに実装した理由
以上がWordPressテーマ「般若ビルダーver.1.70」から実装された脚注/注釈機能です。
あえてテーマの機能として実装しました。プラグインにして配布しようかとも考えたのですが、やめました。理由は、よほど手の込んだプラグインじゃないと、すぐに他社のテーマに実装されてしまうからです。
昨今のWordPressテーマ業界、機能のかぶせ合いです(笑)せっかくプラグインとしてリリースしても、テーマ側に実装されると「もう般若ビルダー脚注は不要じゃん」みたいなことになると悲しいので。
私の場合、脚注を実装する際はプラグインを使わないで完全手動でやっていました。本文内に上付き文字の数字を入れて、記事下部にリンクを入れて、行ったり来たり……をしていました。
それと比べると、行ったり来たりする必要もなく、上付き数字を入れる必要もなく、ショートコードを手動で入力する必要もなく、めちゃくちゃ便利&快適になりました。自分の理想系なので当然ですが、大満足です。
というわけで、既存の脚注プラグインのデメリットをすべて潰した「般若ビルダー脚注」を使って、ソース付きの信頼性の高い記事を作りたい人は、WordPressテーマ「般若ビルダー」を購入してご利用ください。
>> 国内唯一の脚注機能付きWordPressテーマ・般若ビルダーを購入する
↓これが般若ビルダーの脚注サンプル
参考文献
-
↑
令和4年10月4日 バイデン米国大統領との電話会談等についての会見 |(首相官邸ホームページ | 2022/10/07確認)
-
↑
死んだばあちゃんがよく言ってたセリフ
-
↑
じいちゃんは一度も言わずに天に召された
-
↑
金融庁:「ひろゆき氏との対談動画」の公表について(閲覧日:2022/10/07)
コメント
この記事へのコメントはありません。