WordPressブログ投稿にシンプルでエレガントな脚注を追加する方法

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 サイトの編集方法についてのガイドもお読みください。

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.