テキスト中に小さな上付き数字があり、ページの下に追加情報へのリンクがあるサイトを見たことがありますか？あれは脚注と呼ばれるもので、メインのコンテンツを散らかすことなく、追加的な文脈を提供したり、出典を引用したりするのに最適な方法です。
読者の中には、WordPressの投稿に脚注を追加する方法を尋ねられたことがある。
このカテゴリーでは、WordPressブログの投稿にシンプルでエレガントな脚注を追加する方法を順を追ってご紹介します。
なぜWordPressのブログ投稿に脚注をつけるのか？
教育ブログを運営したり、研究を公開したり、ニュース記事を扱ったりする場合、脚注はコンテンツに文脈を与える素晴らしい方法です。コメントを加えたり、重要な事実を強調したり、学術ソースの引用元をサイトに挿入したりするのに使えます。
脚注は通常、本文中に小さな上付き数字で外観表示されます。実際の脚注コンテンツは、ページの下部に配置されるか、ツールチップとして表示され、本文と区別されます。
例を挙げよう：
読者に明快さと透明性を提供するだけでなく、脚注はWordPressサイトをより専門的で信頼できるものにします。脚注は、あなたがリサーチを行い、あなたの主張を裏付ける情報源を持っていることを示します。
ありがたいことに、WordPress.orgエディターには脚注機能がビルトインされており、それを使って簡単に文脈を追加することができる。これなら、自分で脚注を手動で追加する必要はない。
このガイドでは、2つの方法を使ってWordPressの脚注をブログ投稿やページに追加する方法を紹介します。一つはGutenbergエディターの脚注ブロックを使う方法、もう一つはプラグインを使う方法です。
以下のリンクから特定のメソッドに飛ぶことができる：
方法1：プラグインなしでWordPressに脚注を追加する方法
この方法は、ブログ投稿で簡単な脚注を使いたいが、そのためにプラグインをインストールしたくない人に最適だ。
WordPressの脚注ブロックを使用するには、新規投稿または既存投稿のGutenbergブロックエディターを開く必要があります。
その後、段落ブロック、画像、その他のタイプのコンテンツをブログ投稿に追加することができます。テキストのスタイルを整え、読者の注意を引くためにドロップキャップを追加することもできます。
コンテンツ内で脚注を追加したい単語をハイライトします。ブロックツールバーで、ドロップダウン矢印をクリックし、「脚注」を選択する。
ページの下にリダイレクトされ、脚注ブロックが自動的に追加されます。ここに、あなたの追加情報を入力することができます。
さらに、右側のパネルの設定を使用して、ブロックのテキスト色、タイポグラフィ、寸法、枠線をカスタマイズできます。
脚注にリンクがある場合は、リンクの色を変えて目立たせるとよい。
必要なだけ脚注を入れるために、このステップを自由に繰り返してください。
WordPressサイトをプレビューすると、先ほどハイライトした文章への脚注リンクがあるはずです。
ハイパーリンクをクリックすると、脚注のあるページの一番下にジャンプします。
ここで、ハイパーリンクの矢印をクリックして、脚注が割り当てられているセクションに戻ることもできます。
また、スマートフォンの画面で脚注が読めるかどうかを確認するために、モバイルでサイトをプレビューするのもよいでしょう。
この方法は初心者にはかなり簡単ですが、カスタマイザーのオプションは多くありません。脚注の外観を変更する方法をもっとお探しなら、次の方法に進んでください。
方法2：プラグインを使ってWordPressの脚注を追加する方法
脚注を作成するもう一つの方法は、無料のModern Footnotesプラグインを使用することです。Footnotesブロックとは異なり、脚注の外観を変更するためのより多くのオプションを提供しています。
例えば、脚注をツールチップとして表示させたり、ページ下部に追加情報を表示させたりすることができる。
まず最初にModern Footnotesプラグインをインストールします。プラグインのインストールについて詳しくは、WordPressプラグインのインストール方法をご覧ください。
注意： このプラグインを使うべきかどうか本当に〜してもよいですか？
Modern Footnotesプラグインの設定
プラグインをインストールしたら、Settings ” Modern Footnotesにアクセスしてください。ここで脚注の設定をお好みに合わせて設定することができます。
各設定をひとつずつ見ていこう。
デスクトップ脚注の動作」では、サイトがデスクトップコンピューターで表示されている場合の脚注の動作を選択できます。
カーソルがツールチップの上にマウスオーバーしたとき、またはユーザーがツールチップをクリックしたときに脚注を表示させることができます。また、脚注は脚注テキストの下に展開することもできます。
どちらを選ぶかはお好み次第です。ただし、モバイル画面では初期設定で脚注が本文の下に展開されます。
また、必要に応じて「マウスオーバー時にウェブブラウザのネイティブツールチップに脚注コンテンツを表示する」ボックスをチェックすることもできます。これは、カーソルがテキストにオーバーしたときに、脚注がプラグインのツールチップではなく、ブラウザーに表示されることを意味します。
デスクトップの脚注の動作でツールチップのオプションを選択した場合は、この設定をオフにすることをお勧めします。そうしないと、同じ脚注に2つのツールチップが表示されることになり、読者が煩わしく感じるかもしれません。
投稿の下に脚注リストを表示することもできます。こうすることで、読者は追加情報をすべて一箇所で見ることができる。
また、ブログ投稿がRSSフィードを通じて配信される場合、この機能を有効化することもできます。
下にスクロールすると、脚注リストに見出しを挿入し、見出しタグを選択することができます。これにより、ブログ投稿の実際のコンテンツと脚注を区切ることができます。References（参考文献）、Footnotes（脚注）、Citation（引用元）、Additional Information（追加情報）などのように書くことができます。
脚注テキストを変更するためにカスタムCSSを追加したい場合は、「Modern Footnote Custom CSS」ボックスに自由に挿入してください。
ビルトインを使いたくない場合は、Modern Footnotesショートコードをカスタマイズできます。本当に〜してもよいですか？
設定に満足したら、「変更を保存」をクリックします。
プラグイン「Modern Footnotes」を使って脚注を追加する
Modern Footnotesの設定が完了したので、コンテンツに脚注を挿入してみましょう。新規または既存の投稿またはページのブロックエディターを開いてください。
脚注を追加するには2つの方法があります。ひとつはショートコードを使う方法です。
まず、脚注を挿入したい文章を探します。次に、その文の右隣に、以下のショートコードを入力する：
[mfn]ここに脚注を入れる[/mfn]。
括弧の間のテキストをあなたの情報に置き換えてください。
また、下の例のように、ショートコードをテキストと同じブロック内に、スペースを空けずにテキストのすぐ横に置くことをお勧めします。そうしないと、脚注がテキストから切り離されて見えることがあります。
もう1つの方法は、脚注を付けたい文の横に脚注テキストを入力する方法です。脚注テキストと文の間にスペースがないことを確認してください。
以下の例では、’Studies suggest…’で始まる文章に学術引用元を含む脚注を追加したい。
次に、脚注をハイライトし、ツールバーの下矢印ボタンをクリックする。その後、『脚注を追加』を選択する。
2つ目の方法の欠点は、コンテンツを編集しているときに、どの行に脚注が付与され、どの行に付与されていないかをトラッキングするのが難しいことです。そのため、ショートコードによる方法をお勧めします。
ブログ投稿をプレビューすると、文の次に数字が表示されていることがわかります。ツールチップオプションを使用すると、脚注はこのように表示されます：
一方、展開可能な書式を使用した場合、脚注は本文の下に表示されます。
番号をクリックするとこんな感じ：
最後に、脚注のコンテンツをすべて投稿の一番下に表示するように選択すると、スクロールダウンしてすべてを見つけることができる。
コメント欄の上の方にあるはずだ。
プロのアドバイス 脚注の代わりにブログ投稿の最後に免責事項を追加したいですか？WordPressで免責事項を自動的に追加する方法のガイドをご覧ください。
WordPressコンテンツをカスタマイズするさらに詳しい方法
脚注以外にも、WordPressのコンテンツをより面白く、訪問者に読みやすくする方法はたくさんあります。
例えば、WordPressにカスタマイザーを追加することができます。こうすることで、他の競合他社とは異なるユニークなタイポグラフィを作成し、あなたのサイトをより印象的なものにすることができます。
さらに、テキストブロック内の特定のテキストをハイライトして、ユーザーの注意を最も重要な情報に向けることもできます。
もうひとつできることは、訪問者がコンテンツ内を移動する際にマウスオーバーすると、内部リンクや外部リンクのライブプレビューが表示されることです。リンクをクリックするとどのようなページが表示されるかをプレビューできる、簡単かつ魅力的な方法です。
その他のヒントをご覧いただきたい：
- カテゴリー：WordPressで再訪問者に新規投稿を強調表示する方法
- WordPressで動的コンテンツを追加する方法（初心者ガイド）
- アクセシビリティのためにWordPressにフォントリサイザーを追加する方法
- WordPressサイトにダークモードを追加する方法（簡単）
- WordPressで栄養成分表示をする方法
この投稿がWordPressサイトに脚注を追加する方法を学ぶのにお役に立てば幸いです。また、WordPress のエキスパートが選ぶドラッグ＆ドロップで使えるページビルダーや、WordPress サイトの編集方法についてのガイドもお読みください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Jiří Vaněk
Sometimes on the site I use excerpts from books or other blogs as opinions about something, and I always added them below the article. But this method is much more elegant, as it adds a small link to the information below the line directly to the excerpt. From the website user’s point of view, it will be a much better way to solve this. Thanks for another one of many inspirations on how to make content more user-friendly.
THANKGOD JONATHAN
This is really good. But since Gutenberg editor work similar with Block editor, should I just use the block editor or must install the Gutenberg editor again?
WPBeginner Support
They are the same editor, it just has two different names
管理者
samarth
I have a question. Adding Footnotes through the custom (HTML) method will cause in-article wording and would the article length will be increased?
And, If through the plugin, the words of footnotes won’t be counted as blog post words?
sorry for any grammatical mistakes.
WPBeginner Support
Both methods would be adding text to your article, we would not recommend either method if you only wanted to increase your word count.
管理者
Ciprian
Hi,
Thanks for this info, I`ve tried it and it`s working fine, but now I have a curiosity:
– the link for this notes are dofollow, from seo point of view, is this ok or we should make them nofollow?
– if we need them nofollow, how can we do that?
Thanks a lot.
WPBeginner Support
For nofollowing links, you would want to take a look at our article here: https://www.wpbeginner.com/beginners-guide/how-to-add-nofollow-links-in-wordpress/
管理者
Didier Van Bogget
Work fine ! Really simple. Thank you.
David
Hey, forgive my ignorance, but I can’t figure out how to activate this, or any other plugin. What am I missing?
Editorial Staff
Are you using WordPress.com or self-hosted WordPress.org?
https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
管理者
Hank
I added the plugin and tried some footnotes. When I click on the little number that should link to the footnote, it takes me below the comment box on the WordPress page and doesn’t display the footnote. I have to scroll up to see the footnote.
Does anyone know how I can get it to land on the actual footnote?
Editorial Staff
It sounds like a CSS issue in your theme which causing this.
管理者
Hank DeBey
I had some remnants of earlier footnote attempts in the code. I removed those and things are better. Thanks for your help.
Evan Lowry
Does it still do this when you view the page when you are signed out of the Dashboard? For me, when the dashboard menu is up top (when I am signed in), it makes it appear that the FN links are taking me too low–but then when I view the same page logged out, as a reader would, the FNs work properly.
Evan Lowry
This is a great plugin, but in the version I downloaded for 3.5.1, the footnotes reset after ten, back to zero, in the footer. Does anyone know how to fix this? I just want it to continue: 11, 12, etc…
Editorial Staff
Did you try contacting the author?
管理者
Kiesha Michelle
Thanks for this!! I was trying to figure out how to add footnotes….
fatihtoprak
Great plugin thanks for that.
retlkpr
Now that is one I did not know about. Thanks! It works great.