脚注ブロックがWordPressの標準機能として組み込まれた話やカスタマイズの解説

脚注ブロックがWordPressの標準機能として組み込まれた話やカスタマイズの解説

WordPress6.3から、脚注ブロックが追加されて簡単に文章コンテンツを制作する中で脚注を入れる事ができるようになりました。

ブロックエディター内に文章を書いていく場合、脚注を入れるには主に

  1. カスタムHTMLブロックでベタ打ちする
  2. WordPressプラグインで機能追加
  3. WordPressテーマに実装されている脚注機能

上記の3つくらいしか選択肢がなかったのですが、今回、WordPress6.3から脚注ブロックが追加されたことで、文章を書きながら一次情報などの参照元を本文の最下部に補足情報として、参照のために外部リンク先を記載することが気軽に出来るようになります。

WordPressテーマや外部プラグインなどに依存することなく、文章の流れを邪魔せずにユーザーが気軽に関連情報にアクセスできる構成を組める環境は素敵だと考えています。

今回は、WordPressで脚注ブロックを使う方法や、その他にもカスタムHTMLブロックを使って、カスタマイズした自分で脚注をコーディングする方法に付いて解説していきます。

脚注について

脚注について

脚注(きゃくちゅう)とは、Webサイトの文章コンテンツにおいて、Webページの下部や文末、または別のセクションやカラム等[1]に配置することができる注釈や参考情報のことです。

脚注の使い分けと種類

脚注は、主に以下のような4つの種類に分けることが可能です。

  1. 説明や補足などのページ本文で触れた内容について、詳細な説明や補足情報を提供します。
  2. 出典や引用として使用した情報源や引用した文献や研究論文などの一次情報などを明示してリンク等をします。
  3. 関連情報として、本文の内容と関連しているが、その本文中に書いていく文章の流れで直接触れるほどではない情報をについて補足します。
  4. 専門用語や単語の定義を記載するときに、脚注部分に用語の意味や略語等について、定義する時に利用します。

脚注は、文章を読んでいる人が必要に応じてすぐに補足情報にアクセスできる特徴をもっています。

読者にとって追加情報を容易に参照できるようにするため、また、執筆者が書いた文章内にある情報の信憑性を照明する手段として多く用いられています。

Webサイトにおける脚注の重要性

Webサイトでコンテンツを閲覧して情報を取得することにおいて、Webページに脚注機能が実装されていることはスゴく重要です。

例えば、文章を読んでいて情報の参照元や参考文献、補足情報、単語の意味など、より深い情報を知りたい時に、アンカーリンク(ページ内リンク)で情報に素早くたどり着けます。

そして、Webサイトの脚注にはナンバリングがされているため、所定の場所へすぐに戻れるようにもなっているため、読者の読み進め方を邪魔しないようにする仕組みを実現することが可能になっています。

また、Wikipediaなどでは、脚注ツールチップといって、脚注部分にマウスカーソルを移動させると、ポップアップで脚注を表示させることも可能になっています。

個人的には、ここまで標準で実装してくれたら嬉しいなと待ちつつ、標準搭載されたWordPressの脚注を使っていきます。

WordPressに脚注ブロックが標準実装されたバージョンは?

WordPressに脚注ブロックが標準実装されたバージョンは?

WordPressに脚注ブロックが標準実装されたのは、WordPress6.3[2]からです。

それまでは、自分でブロックエディタ上でカスタムHTMLブロックでベタ打ちしたり、WordPressプラグインを用いて脚注機能を作成していました。

これからは標準搭載されているので、場合によってはプラグインを減らすことも出来るし、WordPressテーマの制約を受けることもなくなるので、Webサイトのデザインテーマを変えることが、また少し簡単になりました。

関連記事:WordPressテーマでおすすめできる有料版と無料版を比較しながら実例を用いて紹介

脚注ブロックの使い方

標準機能になっただけあって、脚注の使い方はスゴく簡単になりました。

脚注ブロックを使う手順

いくつか方法はありますが、簡単な手順は以下の通りです。

  1. WordPressのエディタワークスペース(文章を入力する場所)内をクリック
  2. テキストを入力する
  3. 脚注と関連付けしたいテキスト部分を選択する
  4. ブロックリスト(例えばリストの『v(下矢印)』でもOK)
  5. 脚注を選択する

この手順で進めると、脚注の設定が可能です。

脚注部分に情報を追加する

脚注ブロックを設定すると、通常は文章コンテンツの最下部にナンバリングで割り当てられた脚注の内容が入力できる部分が作成されています。

その部分に補足情報や必要な参照元リンクなどを入力していきましょう。

WordPress内で脚注をカスタマイズしたい

WordPress内で脚注をカスタマイズしたい

WordPressの脚注機能をカスタマイズするには、「追加CSS」などでのCSSカスタマイズや、WordPressテーマ内にあるPHPコードを編集することで実現が出来ますが、これからもWordPressの脚注機能は多機能化していきそうなので、あまりおすすめはしていません。

カスタムTHMLブロックで脚注を作成する

HTMLのベタ打ちは手間がかかりますが、基本的なHTMLで記述されている部分は、様々なアップデートの影響を受けにくいこともあるので、コーディングでのカスタマイズを習得しておくと便利です。

下記が脚注のナンバリングと脚注エリアを作る時のHTMLの一例になります。

ただ、脚注はWordpressの標準機能になっているので使うことはないかも知れません。

あくまでも、参考程度にHTMLコードサンプルを記載しておきます。

まずは、脚注にナンバリングするためのHTMLを「カスタムHTML」で入力します。

「<!–」「–>」の部分は、コメントアウトの記述なのでコピペしなでください。

<!--
<p>これは脚注部分を作成するサンプルコードです<sup><a href="#footnotes" id="reference-noot">1</a></sup>。</p>
-->

表示例
これは脚注部分を作成するサンプルコードです1。

続いて、上記でナンバリングされた該当テキストの脚注に、情報を補足出来るエリアを作ります。

<!--
<ol>
  <li id="footnotes">これは脚注表示部分を作成するサンプルコードです。<a href="#reference-noot">↩</a></li>
</ol>
-->

表示例
1.これは脚注表示部分を作成するサンプルコードです↩

上記の表記で脚注としての補足情報を連ねていくことも可能です。

複数の脚注表記をしていこうとするとコードサンプルが複雑[3]になっていくため省略しています。

今後もWordPressの脚注機能追加に期待

脚注機能は、その装飾、脚注情報のポップアップ表示など、まだまだ多くの機能を実装することが出来ます。

WordPressの標準に機能になった脚注ブロックに、今後も機能が追加されていき、補足情報の扱いやすさが向上していくと嬉しいです。

最後まで読んでいただきありがとうございました。

WordPressの脚注ブロック実装に関する脚注

  1. セクションとはカラムを入れるレイアウトの入れ物になるようなイメージのWeb用語です。関連記事:カラムとは?Webサイトの構成で重要なカラム数について分かりやすく解説
    ↩︎
  2. WordPress 6.3 “Lionel”(英語)August 8, 2023. ↩︎
  3. HTMLLiving Standard|4.14.4 Footnotes ↩︎

ユニコブログ®は
ConoHa WINGレンタルサーバーで
運営しています ^ᴗ . ᴗ ^

コノハウィングレンタルサーバー コノハウィングレンタルサーバー
ABOUT US
小林 玲王奈ユニコーンコンサルティング株式会社 代表取締役

起業して法人化した初期の頃は、自分と同じく起業する人や、スタートアップ企業に対して出資や資金調達などのサポートを中心に事業を行っていました。

現在は、主に自社のブログサイトを中心としたWebメディア運営、Webアプリの開発、LINEスタンプやLINE絵文字等の、2Dイラスト制作を中心にキャラクターデザインをして、そこから3DCGによるコンテンツ制作事業としてAR(拡張現実)やVR(仮想現実)向けのプラットフォームへコンテンツ提供を行っています。

公式ブログサイトのユニコブログ®では、「会社の収入だけに依存しない生活を手に入れる」ことをテーマにブログ記事を書いたり、ブログ運営を始める人のサポートを無償で行っています。

主な経歴としては、2003年から放送及び映像業界向けの様々な新規事業立ち上げを15年以上担当していました。

2014年からは、会社員として働きながら経営/メディアコンサルティング業を開始して、2020年01月に法人化し、ユニコーンコンサルティング株式会社を設立しました。

現在、ユニコブログ®以外にも、数十サイト以上の特化ブログを立ち上げて運用しています。

全て同じサイト構成、ブログ記事構成、文章構成など、検証可能な範囲で仕様を合わせてみて、収益を出すのに再現性があるか?などを試行錯誤している日々です。

他にも、ピックアップしているレンタルサーバーとWordPressテーマを総当たりで組み合わせてサイトスピードがどうなるかなど、思いついた事をひたすら検証する日々。

WordPress用のシンプルなプラグインやブログパーツの開発にもチャレンジしています。

所有資格や認定ライセンスとしては、SMPTE Professional Engineer Member、一般社団法人 日本ポストプロダクション協会認定 映像音響処理技術者などを所有しています。

著書 : 『保存版 売上を向上させるためのYouTube活用術』

教育関連では複数の教育機関で定期的に講演を行っており、主な活動実績としては、2020年度と2021年度の 学校法人調布学園 田園調布学園 中等部・高等部「豊かな教養を培う 未来へつなぐ土曜コアプログラム『探究』」にて空中ディスプレイコンテンツ制作及びWebサイト制作の特別講師を担当。2022年度は土曜プログラム(マイプログラム)『仕事最前線』で講演しました。

著述家 / ブロガー兼コンテンツクリエイター

プロフィールの詳細はこちら

ユニコーンコンサルティング®|公式Webサイト