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

テキストの中に小さく上付き文字の数字があり、ページの下部にある追加情報にリンクしているウェブサイトを見たことがありますか？これらは脚注と呼ばれ、メインコンテンツを煩雑にすることなく、追加のコンテキストを提供したり、出典を引用したりするための優れた方法です。

一部の読者から、特に調査中心のコンテンツや引用が必要な記事を書く際に、WordPressの投稿にフッターノートを追加する方法について質問がありました。

この記事では、WordPressのブログ投稿にシンプルでエレガントな脚注をステップバイステップで追加する方法を説明します。

WordPressブログ投稿に脚注を追加する理由

教育的なブログを運営したり、調査結果を公開したり、ニュース記事をカバーしたりする場合、脚注はコンテンツにさらなるコンテキストを追加するための優れた方法です。コメントを追加したり、重要な事実を強調したり、ウェブサイトの学術ソースへの引用を挿入したりするために使用できます。

脚注は通常、本文内の小さな上付き数字として表示されます。実際の脚注の内容は、ページの下部に配置されるか、メインコンテンツと区別するためにツールチップとして表示されます。

例を挙げます。

読者に明確さと透明性を提供するだけでなく、WordPressウェブサイトをよりプロフェッショナルで信頼性の高いものに見せることができます。調査を行い、主張を裏付けるソースがあることを示します。

幸いなことに、WordPress.orgのエディターには、追加のコンテキストを簡単に挿入できる組み込みの脚注機能があります。これにより、自分で手動で脚注を追加する必要がなくなります。

このガイドでは、2つの方法を使用してWordPressの脚注をブログ投稿またはページに追加する方法を説明します。1つはGutenbergエディターのFootnotesブロックを使用する方法、もう1つはプラグインを使用する方法です。

下のリンクを使用して、特定のメソッドにジャンプできます：

方法1：プラグインなしでWordPressに脚注を追加する方法

この方法は、ブログ投稿でシンプルなフッターノートを使用したいが、プラグインをインストールしたくない人に最適です。

WordPress Footnotesブロックを使用するには、新しい投稿または既存の投稿のGutenbergブロックエディターを開く必要があります。

その後、段落ブロック、画像、その他の種類のコンテンツをブログ投稿に追加できます。テキストをスタイル設定して読者の注意を引くために、ドロップキャップを追加することもできます。

次に、脚注を追加したい単語をコンテンツ内でハイライトします。ブロックツールバーで、ドロップダウン矢印をクリックし、「脚注」を選択します。

これでページの下部にリダイレクトされ、脚注ブロックが自動的に追加されます。ここで追加情報を入力できます。

さらに、右側のパネルの設定を使用して、ブロックのテキストの色、タイポグラフィ、寸法、境界線をカスタマイズできます。

脚注にリンクがある場合は、それらを際立たせるためにリンクの色を変更したい場合があります。

必要に応じて、この手順を繰り返して、必要な数の脚注を含めることができます。

WordPressサイトをプレビューすると、前に強調した文への脚注リンクが表示されるはずです。

ハイパーリンクをクリックすると、ページの下部にある脚注に移動します。

ここでは、ハイパーリンクされた矢印をクリックして、脚注が割り当てられているセクションに戻ることもできます。

スマートフォン画面で脚注が読みやすいことを確認するために、モバイルでウェブサイトをプレビューすることもできます。

この方法は初心者にはかなり簡単ですが、カスタマイズオプションはあまり提供されていません。脚注の外観を変更する他の方法を探している場合は、次の方法に進んでください。

方法2：プラグインでWordPressの脚注を追加する方法

脚注を作成するもう1つの方法は、無料のModern Footnotesプラグインを使用することです。Footnotesブロックとは異なり、脚注の外観を修正するためのオプションがはるかに多く提供されています。

例えば、脚注をツールチップとして表示したり、ページ下部に補足情報として表示したりできます。

まず、Modern Footnotesプラグインをインストールします。プラグインのインストールに関する詳細については、WordPressプラグインのインストール方法に関するガイドをご覧ください。

注意: このプラグインを使用すべきかどうか不明な場合は、一時的なWordPress Playgroundにインストールして試すことができます。

Modern Footnotes プラグイン設定の構成

プラグインをインストールしたら、設定 » モダン脚注に移動できます。ここで、脚注設定をお好みに合わせて構成できます。

各設定を一つずつ見ていきましょう。

「デスクトップのフッターノートの動作」では、ウェブサイトがデスクトップコンピューターで表示されている場合のフッターノートの動作を選択できます。

カーソルをツールチップに合わせると、またはユーザーがツールチップをクリックすると、脚注が表示されるように設定できます。あるいは、脚注は脚注テキストの下に展開することもできます。

どちらを選択するかは、あなたの好みに依存します。ただし、モバイル画面では、脚注はデフォルトでテキストの下に展開されます。

それに加えて、必要に応じて「脚注番号にカーソルを合わせたときに、脚注コンテンツをWebブラウザのネイティブツールチップに表示する」ボックスをチェックすることもできます。これは、カーソルがテキストにホバーしたときに、プラグイン内ではなくブラウザのツールチップに脚注が表示されることを意味します。

デスクトップの脚注の動作にツールチップオプションを選択した場合は、この設定をオフにすることをお勧めします。そうしないと、同じ脚注に対して2つのツールチップが表示され、読者が不快に感じる可能性があります。

以下で、投稿の最後に脚注リストを表示することも選択できます。これにより、読者は追加情報をすべて一箇所で見ることができます。

ブログ投稿がRSSフィードを通じてシンジケートされるときに、この機能を有効にしたい場合もあります。

下にスクロールすると、脚注リストに見出しを挿入し、それに見出しタグを選択できます。これにより、ブログ投稿の実際のコンテンツと脚注を分離するのに役立ちます。参考文献、脚注、引用、追加情報などのものを記述できます。

脚注テキストを修正するためにカスタムCSSを追加したい場合は、「Modern Footnote Custom CSS」ボックスに自由に挿入してください。

最も重要ではないものの、組み込みバージョンを使用しない場合は、Modern Footnotes ショートコードをカスタマイズできます。ショートコードは角括弧なしで入力してください。

設定に満足したら、「変更を保存」をクリックしてください。

Modern Footnotesプラグインを使用した脚注の追加

モダン脚注の設定が完了したので、コンテンツに脚注を挿入しましょう。新しい投稿または既存の投稿、あるいは固定ページのブロックエディターを開いてください。

脚注を追加するには2つの方法があります。1つはショートコードを使用する方法で、こちらをお勧めします。

まず、脚注を挿入したい文を見つけます。次に、その文のすぐ隣に、次のショートコードを入力します。

[mfn]ここに脚注を挿入[/mfn]

角括弧内のテキストは、ご自身の情報に置き換えてください。

また、ショートコードは、文と同じブロック内に、テキストのすぐ隣に、間にスペースを入れずに配置することをお勧めします。以下の例のようにしてください。そうしないと、脚注がテキストから切り離されて見える可能性があります。

もう一つの方法は、脚注を追加したい文の隣に脚注テキストを入力することです。脚注テキストと文の間にスペースがないことを確認してください。

下の例では、「Studies suggest…」で始まる文に学術的な引用を含む脚注を追加したいと考えています。

次に、脚注をハイライトし、ツールバーの下向き矢印ボタンをクリックします。その後、「脚注を追加」を選択します。

2番目の方法の欠点は、コンテンツを編集している際に、どのテキスト行に脚注が付与され、どの行に付与されていないかを追跡するのが難しいことです。そのため、ショートコード方式をお勧めします。

ブログ記事をプレビューすると、文の横に数字が表示されていることがわかります。ツールチップオプションを使用すると、脚注は次のようになります。

一方、展開可能なフォーマットを使用すると、フッターノートはテキストの下に表示されます。

数字をクリックすると、このようになります。

最後に、脚注の内容をすべてページの下部に表示することを選択した場合、下にスクロールしてすべてを見つけることができます。

コメントセクションのどこか上にあるはずです。

WordPressコンテンツをカスタマイズするその他の方法を学ぶ

注釈以外にも、WordPress のコンテンツを訪問者にとってより面白く、読みやすくするための方法はたくさんあります。

たとえば、WordPressにカスタムフォントを追加することができます。これにより、他の競合他社とは異なるユニークなタイポグラフィを作成でき、ウェブサイトをより記憶に残るものにすることができます。

さらに、テキストブロック内の特定のテキストを強調表示することで、ユーザーの注意を最も重要な情報に向けることができます。

また、訪問者がコンテンツを閲覧しているときに、内部または外部リンクにマウスを合わせたときに内部または外部リンクのライブプレビューを表示することもできます。これは、リンクをクリックした場合にどのようなページが表示されるかをプレビューする、簡単でありながら魅力的な方法です。

ここに確認できるその他のヒントがあります：

• WordPressで再訪問者向けに新しい投稿を強調表示する方法
• WordPressに動的コンテンツを追加する方法（初心者ガイド）
• WordPressにフォントリサイザーを追加してアクセシビリティを向上させる方法
• WordPressウェブサイトにダークモードを追加する方法（簡単）
• WordPressで栄養成分表示ラベルを表示する方法

この記事が、WordPressウェブサイトに脚注を追加する方法を学ぶのに役立ったことを願っています。WordPress向けの最高のドラッグアンドドロップページビルダーの専門家のおすすめや、WordPressウェブサイトを編集する方法に関するガイドもご覧ください。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。