記事内に脚注を挿入するプラグイン【Modern Footnotes】

記事を書いている際に専門用語などが出てきた場合、少し詳しく解説したい、と思うことがあります。
でも説明を書いていると、文章が長くなってしまったり、文脈がおかしくなってしまう。

そんなときは、文章に脚注をいれてみるのがおススメ。

脚注とは、文章の途中で解説が必要になった場合、その説明を文章内ではなく本文下部などの欄外に注釈したもののこと。

Modern Footnotes】は、記事に脚注を挿入できるようにするプラグイン。

補足情報を欄外に持ってくることで、文脈が乱れず文章が読みやすくなります。

こんな場合におススメ

  • 記事に脚注をいれたい
  • 補足情報を入れつつ、文章を読みやすく表示したい
プラグインを使ってできること
  • 記事に脚注を挿入することができるようになる
  • ツールチップでの表示、または脚注番号の下部に表示するかを選択することができる
目次

インストール方法

Modern Footnotes インストール
Modern Footnotes インストール
インストール方法
  1. ダッシュボード > プラグイン > 新規追加 とクリックする
  2. Modern Footnotesで検索する
  3. 今すぐインストールをクリック。インストール後有効化する

または、配布サイトからダウンロードして、インストール。

手動でインストールする方法はコチラ

脚注の表示方法

STEP
ショートコードを記述

脚注を入れたい語句の後ろに、下記のようにショートコードを記述します。

ショートコード
脚注を入れたい語句[mfn]ここに注釈文を記述[/mfn]

ビジュアルエディタの場合、投稿画面に『Add a Footnote』ボタンが表示されるようになるのでボタンをクリックし、挿入されたコードを書き換えます。

Modern Footnotes 脚注の表示方法
STEP
使用イメージ

ツールチップでの表示

Modern Footnotes 使用イメージ

脚注番号の下の行に表示

Modern Footnotes 使用イメージ

【Modern Footnotes】の設定

STEP
Modern Footnotesを開く

プラグインを有効化すると、管理画面 > 設定 内に 【Modern Footnotes】項目が追加されるので、そこから設定を行います。

Modern Footnotes 設定
STEP
項目の設定
Modern Footnotes 設定
Expandable footnotes on desktop脚注番号の下の行に脚注を表示するかの選択 未チェックで、脚注番号をクリックするとツールチップを表示する
Modern Footnotes Custom CSS表示デザインをCSSでカスタマイズする場合に記述 .modern-footnotes-footnote:脚注番号を表示する上付き文字要素 .modern-footnotes-footnote–selected:現在アクティブな上付き要素 .modern-footnotes-footnote__note:モバイルとデスクトップの両方の脚注に適用されるスタイル .modern-footnotes-footnote__note–mobile:モバイル脚注のスタイル .modern-footnotes-footnote__note–desktop:デスクトップの脚注のスタイル
Modern Footnotes Custom Shortcode[mfn]または[modern_footnote]以外のショートコードを使用したい場合は、括弧なしで使用するコードを記述する
STEP
保存
項目を設定したら変更を保存します。

動作確認環境

  • バージョン 1.3.8
  • WordPress 5.4.1

このプラグインは上記の環境で動作を確認しましたが、ご使用の環境によっては、動作しないなどの不具合が起きる可能性がありますので、ご注意ください。

まとめ

  • 【Modern Footnotes】は、記事に脚注を挿入することのできるプラグイン。
  • 補足情報などを解説する場合は、脚注をいれて文章を見やすくするのがおススメです。
目次
閉じる