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

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

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

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

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

教育ブログを運営している場合、研究を発表している場合、またはニュース記事を扱っている場合は、脚注はコンテンツにさらに多くのコンテキストを追加するための優れた方法です。コメントを追加したり、重要な事実を強調したり、ウェブサイトの学術的な情報源への引用を挿入したりするために使用できます。

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

例を挙げます。

読者に明確さと透明性を提供するだけでなく、脚注はWordPressウェブサイトをよりプロフェッショナルで信頼できるものに見せることができます。それらは、あなたが調査を行い、主張を裏付ける情報源を持っていることを示しています。

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

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

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

• 方法1：プラグインなしでWordPressに脚注を追加する方法
• 方法2：プラグインでWordPressの脚注を追加する方法
• WordPressコンテンツをカスタマイズするその他の方法を学ぶ

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

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

WordPressの脚注ブロックを使用するには、新しい投稿または既存の投稿で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でもフォローできます。