ワードプレスで注釈を入れる方法｜脚注の使い方からプラグイン・HTML設定まで解説

はじめに

ワードプレスの記事に注釈を入れると、専門用語の補足、情報の出典、本文では説明しきれない注意事項などを読者に伝えられます。本文の流れを保ちながら追加情報を提示できるため、解説記事やレビュー記事、研究・医療・法律・金融などの専門性が求められるコンテンツにも有効です。

ワードプレスで注釈を入れる方法は、主に次の4つです。

  • ブロックエディターの脚注機能を使う

  • 注釈・脚注用のプラグインを導入する

  • HTMLとCSSで手動設定する

  • ショートコードやテーマ独自の機能を使う

WordPress 6.3以降では、ブロックエディターに標準の脚注機能が用意されています。特別なデザインやツールチップ表示が不要であれば、まず標準機能を試すのがおすすめです。

本記事では、ワードプレスで注釈を入れる方法を、初心者にもわかりやすく解説します。ブロックエディターの操作手順から、プラグイン、HTML、CSS、SEO・アクセシビリティ対策、表示されない場合の対処法まで順番に確認していきましょう。

1. ワードプレスの注釈とは？脚注・補足説明・出典表記の違い

1-1. 注釈とは本文を補足するための説明

注釈とは、本文に登場する言葉や内容について補足説明を加えるものです。

例えば、次のような情報が注釈に適しています。

  • 専門用語や略語の意味

  • 本文の前提となる情報

  • 例外や注意事項

  • データの調査条件

  • 商品価格や仕様に関する補足

  • 本文では省略した詳しい説明

注釈を本文中にすべて書き込むと、文章が長くなり、読者が本題を見失う可能性があります。そこで本文には注釈番号だけを置き、詳しい説明をページ下部やポップアップに表示します。

たとえば「CMS」という言葉に注釈を付ける場合、本文は次のように簡潔にできます。

ワードプレスは、世界中で利用されているCMS※1の一つです。

ページ下部などに「※1：CMSとは、Webサイトのコンテンツを管理・更新するシステムのこと」と記載すれば、CMSを知らない読者にも意味が伝わります。

1-2. 脚注との違いと使い分け

注釈は補足情報全般を指す言葉です。一方、脚注は注釈の表示形式の一つで、本文中の番号に対応する説明をページや記事の下部にまとめて掲載します。

使い分けの目安は次のとおりです。

  • 短い補足説明：本文中のかっこ書き

  • 本文から切り離したい補足：脚注

  • 特に注意してほしい内容：注意書き・ボックス

  • 語句の簡単な説明：ツールチップ

  • 長い関連情報：別記事への内部リンク

補足が数文字から一文程度であれば、かっこ書きでも問題ありません。しかし、出典URLや詳しい条件まで記載するときは、脚注に分けたほうが本文を読みやすくできます。

1-3. 出典・引用・参考リンクとの違い

注釈、出典、引用、参考リンクは、それぞれ役割が異なります。

注釈は、本文を理解するための補足説明です。

出典は、統計データや調査結果、第三者の主張などについて、情報の提供元を示すものです。

引用は、他者が作成した文章を必要な範囲で原文のまま紹介することです。ワードプレスでは「引用」ブロックを使って、本文と引用部分を視覚的に区別できます。

参考リンクは、読者がさらに詳しい情報を確認するためのリンクです。

他サイトの文章をそのまま掲載する場合、脚注にURLを記載するだけでは十分とは限りません。引用部分を明確に区別し、引用元の名称やページ名を示したうえで、必要最小限の範囲にとどめることが大切です。

1-4. 注釈を入れるメリット

ワードプレスの記事に注釈を入れる主なメリットは、次の4つです。

1つ目は、本文の読みやすさを保てることです。詳しい説明を注釈に分けることで、本文を簡潔にまとめられます。

2つ目は、初心者と詳しい読者の両方に対応できることです。すでに知識がある読者は注釈を読み飛ばし、詳しく知りたい読者だけが補足を確認できます。

3つ目は、情報の信頼性を高められることです。統計や調査結果に出典を付ければ、「どの情報を根拠にしているか」が明確になります。

4つ目は、記事の更新管理がしやすくなることです。価格、制度、調査時点などを注釈として整理しておけば、後から更新すべき箇所を把握しやすくなります。

2. ワードプレスで注釈を入れる主な方法

2-1. ブロックエディターの脚注機能を使う方法

WordPress 6.3以降のブロックエディターでは、文章中の文字列から脚注を追加できます。追加された注釈は脚注ブロックにまとめられ、本文中の番号と自動的にリンクされます。

ワードプレスの標準機能なので、新しいプラグインを導入する必要がありません。番号の管理や本文と脚注のリンク設定も自動で行われるため、初心者に適した方法です。

ただし、使用しているワードプレスのバージョン、投稿タイプ、テーマ、エディターの設定によっては、脚注メニューが表示されない場合があります。

2-2. プラグインを使って注釈を追加する方法

注釈専用のプラグインを使うと、標準機能にはない表示方法を利用できます。

例えば、次のような機能です。

  • 注釈をツールチップで表示する

  • 文章の直下に注釈を展開する

  • ショートコードで注釈を登録する

  • 注釈番号の記号やデザインを変更する

  • 同じ注釈をまとめる

  • 特定のページでは脚注を非表示にする

記事数が多いサイトや、注釈のデザインを統一したいサイトに向いています。

2-3. HTMLで手動設定する方法

HTMLを使えば、プラグインに依存せず、注釈番号やリンク構造を自由に設定できます。

本文中に注釈番号を置き、ページ下部の注釈へアンカーリンクを設定するのが基本です。さらにCSSを追加すれば、文字サイズ、余白、境界線、戻るリンクなども調整できます。

自由度が高い一方で、IDの重複やリンク先の記述ミスが起こりやすいため、HTMLに慣れている人向けです。

2-4. ショートコードやテーマ機能を使う方法

テーマやプラグインによっては、次のようなショートコードで注釈を追加できます。

[footnote]ここに注釈文を入力[/footnote]

ショートコードを使うと、決まった記述を入力するだけで注釈番号や注釈一覧を生成できます。

ただし、利用できるショートコードの名称や書式はテーマ・プラグインによって異なります。また、テーマやプラグインを変更すると、ショートコードがそのまま本文に表示される可能性があります。

2-5. 方法別のおすすめケース

方法おすすめのケース特徴
ブロックエディター一般的なブログ記事簡単でプラグインが不要
プラグインデザインや表示方法を変えたいサイトツールチップなどの機能を追加できる
HTML・CSS表示を細かくカスタマイズしたいサイト自由度が高い
ショートコード既存テーマやプラグインに注釈機能があるサイト入力作業を効率化できる

特別な要件がなければ、まずブロックエディターの脚注機能を使いましょう。標準機能で対応できない場合に、プラグインやHTMLを検討すると、サイト構成を複雑にせずに済みます。

3. ブロックエディターで脚注を入れる方法

3-1. 注釈を付けたい文章を選択する

ワードプレスの管理画面から、脚注を入れたい投稿または固定ページの編集画面を開きます。

次に、段落ブロックなどで注釈番号を付けたい文字列を選択します。単語全体を選択しても、文章の末尾にカーソルを置くだけでも構いません。

出典を示す場合は、原則として根拠となる文章の直後に脚注番号を置きます。どの文章に対応する注釈なのかがわかる位置を選びましょう。

3-2. 脚注を追加する手順

文字列を選択すると、ブロックツールバーが表示されます。

ツールバー内の下向き矢印、または「その他」のメニューを開き、「脚注」を選択してください。英語表示の管理画面では「Footnote」と表示されます。

脚注を追加すると、本文中に番号が挿入され、記事下部に脚注ブロックが生成されます。脚注ブロックは、本文内に追加された注釈を順番にまとめる仕組みです。

メニューが見つからない場合は、文字列や段落内にカーソルがあることを確認してください。ブロック全体を選択している状態では、脚注の項目が表示されないことがあります。

3-3. 脚注テキストを編集する方法

脚注を追加したら、記事下部に表示された脚注ブロックへ移動します。

番号の横にある入力欄へ、補足説明や出典情報を入力してください。脚注テキストは通常の文章と同じように編集できます。

出典を記載する場合は、次の情報を含めると読者が確認しやすくなります。

  • 運営組織や著者の名称

  • ページまたは資料のタイトル

  • 公開日・更新日

  • 参照先のリンク

  • 必要に応じて閲覧日

リンク先が削除される可能性もあるため、URLだけではなく、ページ名や運営者名も記載するのがおすすめです。

3-4. 表示位置や番号の確認方法

脚注番号は、本文中に追加した順番で自動的に割り当てられます。途中に新しい脚注を追加した場合も、通常は番号が並び替えられます。

脚注ブロックを誤って移動すると、本文の途中に注釈一覧が表示されることがあります。記事末尾にまとめたい場合は、リスト表示から脚注ブロックの位置を確認してください。

記事を更新する前に、プレビュー画面で次の点を確認します。

  • 本文中の番号が正しく表示されているか

  • 番号を押すと対応する脚注へ移動するか

  • 脚注の戻るリンクが機能するか

  • 脚注番号と説明文の対応が正しいか

  • 脚注ブロックが意図した位置にあるか

3-5. スマホ表示での見え方を確認する

パソコンで問題なく表示されても、スマートフォンでは注釈番号が小さすぎたり、リンク同士が近すぎたりすることがあります。

投稿画面のプレビュー機能で「モバイル」を選択し、表示を確認しましょう。可能であれば、実際のスマートフォンでもチェックしてください。

特に確認したいのは、次の点です。

  • 注釈番号を指で押しやすいか

  • 脚注の文字が小さすぎないか

  • 長いURLが画面からはみ出していないか

  • 本文と脚注の移動後に位置を把握できるか

  • 固定ヘッダーで注釈が隠れないか

4. プラグインで注釈を入れる方法

4-1. 注釈・脚注プラグインを使うメリット

プラグインを使う最大のメリットは、HTMLやCSSを書かなくても、表示方法を変更できることです。

注釈番号を押したときに補足文をポップアップ表示したり、モバイル端末では本文直下に展開したりする機能もあります。注釈を頻繁に使用するサイトでは、入力作業の効率化にもつながります。

一方、標準機能だけで目的を達成できる場合は、無理にプラグインを追加する必要はありません。プラグインが増えるほど、更新管理や競合確認の作業も増えるためです。

4-2. おすすめの注釈・脚注プラグイン

代表的な選択肢として、次のようなプラグインがあります。

Modern Footnotes

Modern Footnotesは、デスクトップでは注釈をツールチップ形式で表示し、モバイルでは本文の近くに展開できるプラグインです。

エディターの脚注アイコンまたは、次のショートコードを使って注釈を追加できます。

[mfn]ここに注釈文を入力します[/mfn]

本文を読み進めながら補足を確認できるため、記事下部との往復を減らしたい場合に向いています。

Footnotes Made Easy

Footnotes Made Easyは、注釈文を二重かっこで囲んで脚注を作成できるプラグインです。

ワードプレスはCMSの一つです。((CMSはコンテンツ管理システムの略称です。))

同一注釈の統合、ページ分割への対応、ツールチップ表示、ページ種別による非表示設定などの機能があります。

Easy Footnotes

Easy Footnotesは、ショートコードで脚注を追加できるプラグインです。

[efn_note]ここに脚注の内容を入力します。[/efn_note]

ショートコードを入力した位置に番号が追加され、記事下部に対応する注釈一覧が自動生成されます。

プラグインを選ぶときは、機能だけでなく、最終更新日、対応しているワードプレスのバージョン、サポート状況、利用中のテーマとの相性も確認してください。

4-3. プラグインのインストール手順

ワードプレス管理画面からプラグインを導入する手順は次のとおりです。

  1. 管理画面の「プラグイン」を開く

  2. 「新規プラグインを追加」を選択する

  3. 検索欄にプラグイン名を入力する

  4. 対象のプラグインで「今すぐインストール」を押す

  5. インストール完了後に「有効化」を押す

  6. 設定画面で表示方法を確認する

名称が似たプラグインもあるため、開発者名や説明文を確認してからインストールしましょう。

導入前には、念のためサイトとデータベースのバックアップを取得しておくと安心です。

4-4. プラグインで注釈を追加する基本手順

プラグインによって操作方法は異なりますが、基本的な流れは共通しています。

まず、投稿編集画面を開き、注釈を表示したい位置に専用のショートコードや記号を入力します。

例えば、Modern Footnotesでは次のように記述します。

ワードプレスでは脚注を追加できます。[mfn]脚注とは、本文に対応する補足説明をページ下部などに表示する仕組みです。[/mfn]

プレビューを開き、番号や注釈文が正しく表示されるか確認します。

プラグインの設定画面では、番号の形式、ツールチップ表示、脚注の見出し、戻るリンクなどを変更できる場合があります。

4-5. プラグイン利用時の注意点

プラグインを利用する際は、次の点に注意してください。

まず、複数の脚注プラグインを同時に有効化しないことです。同じ文章を変換しようとして、番号の重複や表示崩れが発生する可能性があります。

次に、プラグインを停止した場合の表示を確認しましょう。ショートコード方式では、停止後にショートコードが本文へ露出することがあります。

また、記事数が多いサイトでは、将来的な移行方法も考えておく必要があります。独自記法への依存度が高いほど、別のプラグインや標準機能へ変更するときの修正作業が増えます。

5. HTMLで注釈を手動設定する方法

5-1. 注釈番号を本文に設置する

HTMLで注釈を作る場合は、本文中に注釈番号のリンクを設置します。

<p>ワードプレスではHTMLを使って注釈を設定できます。<sup id="fnref-1"><a href="#fn-1" role="doc-noteref" aria-label="注釈1を読む">1</a></sup></p>

supタグは文字を上付きで表示するタグです。注釈番号のリンク先として、href="#fn-1"を指定しています。

idは同じページ内で重複させないようにしてください。2つ目の注釈には、fnref-2とfn-2のように異なるIDを設定します。

5-2. ページ下部に注釈リストを作成する

記事の下部には、注釈本文を番号付きリストで設置します。

<section class="footnotes" aria-labelledby="footnotes-title"><h2 id="footnotes-title">注釈</h2><ol><li id="fn-1">HTMLとは、Webページの構造を記述するための言語です。</li></ol></section>

sectionで注釈全体をまとめ、olとliで番号付きリストを作成します。

記事内にすでに「注釈」という見出しがある場合は、見出しのIDを別の名前に変更してください。

5-3. アンカーリンクで本文と注釈をつなぐ

本文中の番号から注釈へ移動できるだけでなく、注釈から本文へ戻れるようにすると便利です。

<li id="fn-1" role="doc-footnote">HTMLとは、Webページの構造を記述するための言語です。<a href="#fnref-1" aria-label="注釈1の参照位置へ戻る">↩</a></li>

戻るリンクを設置することで、長い記事でも読者が元の位置へ戻りやすくなります。

記号だけでは目的が伝わりにくいため、aria-labelでリンクの意味を補足しています。

5-4. HTMLで脚注を作るサンプルコード

本文と注釈一覧を組み合わせると、次のようになります。

<p>ワードプレスはCMS<sup id="fnref-1"><a href="#fn-1" role="doc-noteref" aria-label="注釈1を読む">1</a></sup>の一つです。</p>
<p>テーマやプラグインを利用して機能を拡張できます<sup id="fnref-2"><a href="#fn-2" role="doc-noteref" aria-label="注釈2を読む">2</a></sup>。</p>
<section class="footnotes" aria-labelledby="footnotes-title"><h2 id="footnotes-title">注釈</h2>
<ol><li id="fn-1" role="doc-footnote">CMSは「Content Management System」の略称です。<a href="#fnref-1" aria-label="注釈1の参照位置へ戻る">↩</a></li>
&lt;li id="fn-2" role="doc-footnote"&gt;テーマは主に外観を、プラグインは主に機能を追加・変更します。&lt;a href="#fnref-2" aria-label="注釈2の参照位置へ戻る"&gt;↩&lt;/a&gt;&lt;/li&gt;
</ol></section>

ブロックエディターへ貼り付ける場合は、「カスタムHTML」ブロックを使用します。通常の段落ブロックへ貼り付けると、タグが文字列として表示されることがあります。

5-5. CSSで注釈の見た目を整える方法

注釈用のCSSは、テーマの追加CSSや子テーマのスタイルシートに記述します。

.footnotes {margin-top: 3rem;padding-top: 1.25rem;border-top: 1px solid #d8d8d8;font-size: 0.9rem;line-height: 1.7;}
.footnotes h2 {margin-bottom: 1rem;font-size: 1.2rem;}
.footnotes ol {margin: 0;padding-left: 1.5rem;}
.footnotes li {margin-bottom: 0.75rem;}
.footnotes a {overflow-wrap: anywhere;}
sup a {display: inline-block;min-width: 1.25em;text-align: center;font-weight: 700;text-decoration: none;}
sup a:focus-visible,.footnotes a:focus-visible {outline: 2px solid currentColor;outline-offset: 3px;}

文字サイズを極端に小さくすると、スマートフォンや視力の弱い読者が読みづらくなります。本文より少し小さい程度に調整しましょう。

テーマによって既存のCSSが優先される場合があるため、追加後はパソコンとスマートフォンの両方で確認してください。

6. 注釈を見やすくするデザインと書き方

6-1. 注釈番号をわかりやすく表示する

注釈番号は、本文と区別できるデザインにします。

一般的には、上付きの数字や「※1」のような記号が使われます。記事内で数字と記号を混在させず、同じ形式に統一しましょう。

番号を小さくしすぎるとリンクを押しにくくなるため、表示サイズだけでなく、クリックできる範囲にも配慮が必要です。

色だけでリンクを区別するのではなく、下線や太字なども併用すると、より認識しやすくなります。

6-2. 本文の読みやすさを邪魔しない配置にする

注釈は、本文の理解を助けるためのものです。注釈が目立ちすぎて本題より先に読まれる状態は避けましょう。

基本的には、次のいずれかに配置します。

  • 記事の最後

  • 関連する章の最後

  • 本文中の折りたたみ領域

  • 番号を押したときに表示されるツールチップ

短い記事で注釈が少ない場合は、記事の最後にまとめる方法が簡単です。長い記事や注釈が多い記事では、章ごとに配置したほうが読者の移動距離を減らせます。

6-3. 注釈文を簡潔に書く

注釈文は、原則として一つの内容に絞ります。

悪い例は次のような文章です。

※1：CMSにはさまざまな種類があり、ワードプレス以外にも複数の製品があります。Webサイトを作る場合にはサーバーやドメインも必要で、テーマやプラグインについても理解する必要があります。

情報が多すぎて、何を説明する注釈なのかが不明確です。

次のように簡潔にすると伝わりやすくなります。

※1：CMSとは、Webサイトの文章や画像などを管理・更新するためのシステムです。

詳しい説明が必要な場合は、注釈を長文化するのではなく、関連する解説記事へ内部リンクを設置しましょう。

6-4. 出典リンクを入れる場合の注意点

出典リンクのテキストには、リンク先の内容がわかる名称を使用します。

「こちら」「詳しくはこちら」だけでは、リンクを開くまで内容がわかりません。

次のような書き方がおすすめです。

出典：総務省「令和○年版 情報通信白書」

リンク先を新しいタブで開く設定は、必要性を考えて使用してください。新しいタブを使う場合は、読者が予測できるように案内する方法もあります。

また、外部サイトのURLやページタイトルが変更されることもあるため、定期的にリンク切れを確認しましょう。

6-5. 読者に伝わりやすい注釈の例

専門用語を説明する例

本文：

ワードプレスでは、パーマリンク※1を投稿ごとに設定できます。

注釈：

※1：パーマリンクとは、投稿や固定ページごとに割り当てられる固有のURLです。

情報の条件を補足する例

本文：

この機能は無料で利用できます※1。

注釈：

※1：2026年6月時点の情報です。料金や提供条件は変更される場合があります。

調査データの出典を示す例

本文：

調査では、回答者の半数以上がスマートフォンから記事を閲覧していました※1。

注釈：

※1：○○株式会社「Webサイト閲覧環境に関する調査」、2026年公開。

例外を説明する例

本文：

通常は管理画面から設定を変更できます※1。

注釈：

※1：利用しているテーマやユーザー権限によっては、設定項目が表示されない場合があります。

7. ワードプレスで注釈を使う際のSEO・アクセシビリティ対策

7-1. 注釈がSEOに与える影響

注釈を追加しただけで、検索順位が直接上がるとは限りません。

ただし、専門用語をわかりやすく補足し、出典を示して情報の根拠を明確にすれば、読者が内容を理解しやすくなります。記事の品質や利便性を高めるという点で、間接的なSEO対策につながる可能性があります。

SEOを意識する場合も、検索キーワードを注釈へ不自然に詰め込む必要はありません。本文を読むために本当に必要な情報だけを記載しましょう。

また、重要な結論や主要キーワードを脚注だけに置くのは避けてください。記事の中心となる情報は本文に記載し、脚注は補足として使用します。

7-2. 引用・出典を明記して信頼性を高める

統計データ、制度、料金、調査結果などを掲載する場合は、可能な限り一次情報を確認します。

優先したい出典は次のとおりです。

  • 国や自治体などの公的機関

  • 公式サイトや公式マニュアル

  • 企業が公開した一次資料

  • 原著論文や研究機関の資料

  • 製品・サービスの提供元

第三者の記事を参考にする場合も、その記事が参照している元資料まで確認するのが理想です。

脚注には資料名だけでなく、公開元やリンクも記載し、読者が情報を確認できる状態にしましょう。

7-3. 内部リンク・外部リンクの扱い方

注釈から関連する自サイトの記事へ誘導するときは、内部リンクを使います。

例えば、脚注に専門用語の詳細をすべて書くのではなく、「詳しくはワードプレスのパーマリンク設定方法を参照してください」と関連ページへ案内します。

外部リンクは、出典確認や公式情報の参照に使用します。

リンクを設置する際は、次の点を確認しましょう。

  • リンク先が本文や注釈の内容と関連しているか

  • リンク先が信頼できる情報源か

  • リンク切れが発生していないか

  • リンクテキストだけで移動先を予測できるか

  • 広告や紹介リンクであることを適切に示しているか

7-4. スクリーンリーダーに配慮したHTML設定

注釈番号を単なる装飾として配置すると、スクリーンリーダーを利用する読者にリンクの目的が伝わらないことがあります。

HTMLで手動設定する場合は、本文と注釈をアンカーリンクで結び、必要に応じてaria-labelを設定します。

<sup id="fnref-3"><a href="#fn-3" role="doc-noteref" aria-label="注釈3を読む">3</a></sup>

注釈側にも戻るリンクを用意します。

<li id="fn-3" role="doc-footnote">ここに注釈文を入力します。<a href="#fnref-3" aria-label="注釈3の参照位置へ戻る">↩</a></li>

ただし、ARIA属性を追加すれば必ず使いやすくなるとは限りません。使用しているテーマや支援技術との組み合わせもあるため、キーボード操作と読み上げ順序を確認しましょう。

7-5. モバイル表示で読みにくくならない工夫

モバイル表示では、画面幅が狭いため、長い注釈やURLがレイアウトを崩しやすくなります。

CSSでは、長い文字列を適切に折り返せるようにします。

.footnotes,.footnotes a {overflow-wrap: anywhere;word-break: normal;}

ツールチップ形式を使用する場合は、画面外にはみ出さないことも確認してください。マウスを重ねる操作だけで表示する仕様では、タッチ端末やキーボード利用者が内容を確認できない可能性があります。

クリック、タップ、キーボード操作のいずれでも注釈を表示できる設計が望ましいでしょう。

8. 注釈が表示されない・崩れるときの対処法

8-1. 脚注機能が使えない場合の確認ポイント

ブロックエディターで脚注メニューが表示されない場合は、次の点を確認します。

  • ワードプレスがWordPress 6.3以降になっているか

  • クラシックエディターではなくブロックエディターを使用しているか

  • 段落内の文字列または入力位置を選択しているか

  • 投稿や固定ページを編集しているか

  • Gutenberg関連の機能を制限するプラグインが有効になっていないか

標準の脚注機能はWordPress 6.3で導入されました。古いバージョンでは、プラグインまたはHTMLによる対応が必要です。

ワードプレスを更新する場合は、テーマやプラグインの対応状況を確認し、バックアップを取得してから実行してください。

8-2. プラグインが反映されない原因

プラグインで注釈が表示されない場合は、次のような原因が考えられます。

  • プラグインを有効化していない

  • ショートコードの名前が間違っている

  • 開始タグと終了タグの対応が取れていない

  • プラグインの対象外となる投稿タイプを使用している

  • 別のプラグインと競合している

  • JavaScriptエラーが発生している

  • テーマが必要な処理を読み込んでいない

最初に、プラグインの公式説明に掲載されている最小限のサンプルを新規投稿へ入力し、動作するか確認しましょう。

最小構成では動作する場合、元の記事内にあるHTMLや別のショートコードが影響している可能性があります。

8-3. テーマやCSSによる表示崩れ

脚注は表示されているものの、文字が重なる、番号が消える、横幅を超える場合は、テーマのCSSが影響している可能性があります。

特に次のプロパティを確認してください。

displaypositionoverflowfont-sizeline-heightz-indexlist-style

例えば、テーマがすべてのol要素にlist-style: none;を指定していると、注釈一覧の番号が消えることがあります。

次のように脚注部分だけ番号を戻せます。

.footnotes ol {list-style: decimal;padding-left: 1.5rem;}

ツールチップが他の要素の後ろへ隠れる場合は、z-indexだけでなく、親要素のoverflow: hidden;も確認しましょう。

8-4. キャッシュが原因で反映されない場合

注釈やCSSを変更しても古い表示のままの場合は、キャッシュが残っている可能性があります。

次の順番で確認します。

  1. ブラウザのページを再読み込みする

  2. シークレットウィンドウで確認する

  3. キャッシュプラグインのキャッシュを削除する

  4. サーバー側のキャッシュを削除する

  5. CDNを利用している場合はCDNキャッシュを削除する

  6. ブラウザキャッシュを削除する

キャッシュを削除した後は、ログインしていない状態でも表示を確認してください。管理者としてログインしているときだけ、キャッシュが適用されない設定もあります。

8-5. HTMLタグの記述ミスを確認する

HTMLで注釈を設定した場合は、次のミスがないか確認します。

  • hrefと移動先のidが一致していない

  • 同じidを複数回使用している

  • ダブルクォーテーションが閉じていない

  • aタグやliタグが閉じていない

  • 半角記号が全角記号になっている

  • カスタムHTMLブロック以外へコードを貼り付けている

例えば、本文側がhref="#fn-1"であれば、注釈側はid="fn-1"である必要があります。

<a href="#fn-1">1</a>
<li id="fn-1">注釈文</li>

番号が増えたときは、本文側と注釈側をセットで修正しましょう。

9. ワードプレスの注釈に関するよくある質問

9-1. ワードプレス標準機能だけで注釈は入れられる？

WordPress 6.3以降のブロックエディターであれば、標準の脚注機能を利用できます。文章内に脚注番号を追加し、記事下部の脚注ブロックへ補足文を入力できます。

一般的な補足説明や出典表記であれば、標準機能だけでも十分です。

ツールチップ表示、独自の番号形式、章ごとの脚注管理などが必要な場合は、プラグインやHTMLを検討してください。

9-2. クラシックエディターでも脚注は使える？

ブロックエディターの標準脚注機能を、そのままクラシックエディターで操作することはできません。

クラシックエディターで脚注を入れる場合は、次の方法があります。

  • 脚注用プラグインを利用する

  • ショートコードを利用する

  • HTMLで注釈番号と注釈一覧を作成する

  • 本文末尾に手動で注釈一覧を記載する

将来的にブロックエディターへ移行する予定がある場合は、移行後も修正しやすい方法を選びましょう。

9-3. 注釈と引用はどちらを使うべき？

自分の文章に補足説明を加える場合は、注釈を使用します。

他者の文章を原文のまま掲載する場合は、引用として扱います。引用ブロックなどを使って本文と区別し、出典を明記してください。

他者の情報を自分の言葉で要約した場合も、情報源を示したほうがよいケースがあります。特に統計、研究結果、独自調査、専門的な見解には出典を付けましょう。

9-4. 注釈を記事の途中に表示できる？

HTMLやプラグインを使えば、注釈を記事の途中に表示できます。

例えば、章の終わりに注釈一覧を設置したり、番号を押すと本文直下に説明を展開したりする方法があります。

ただし、同じ記事内に複数の注釈一覧を作る場合は、番号やIDの重複に注意してください。読者がどの章の注釈なのか判断できるように、「第1章の注釈」などの見出しを付ける方法もあります。

9-5. 注釈を入れすぎると読みにくくなる？

注釈を入れすぎると、番号が頻繁に登場し、本文に集中しにくくなる場合があります。

一つの段落に複数の注釈番号が並ぶ場合は、次の対応を検討してください。

  • 本文中で説明する

  • 複数の注釈を一つにまとめる

  • 用語集や関連記事への内部リンクを設置する

  • 表や補足ボックスに整理する

  • 本文自体の構成を見直す

注釈は「なくても本文の要点は理解できるが、読むと理解が深まる情報」に使用するのが基本です。結論や重要な条件まで注釈へ移動させないようにしましょう。

まとめ

ワードプレスで注釈を入れる最も簡単な方法は、ブロックエディターの脚注機能を使うことです。WordPress 6.3以降であれば、文章中から脚注を追加し、記事下部の脚注ブロックで補足文を管理できます。

デザインや表示方法を変えたい場合は、注釈・脚注プラグインが便利です。ツールチップ表示やショートコード入力など、サイトの目的に合った機能を選べます。

自由にカスタマイズしたい場合は、HTMLで本文中の番号と注釈一覧をアンカーリンクでつなぎ、CSSで見た目を調整します。その際は、IDの重複、戻るリンク、キーボード操作、スクリーンリーダーへの配慮も忘れないようにしましょう。

注釈を効果的に使うポイントは、本文に必要な情報と補足情報を明確に分けることです。注釈文を簡潔にし、信頼できる出典を示しながら、パソコンとスマートフォンの両方で読みやすい記事に仕上げましょう。