Bloggerでもできる！WordPress風の注釈（脚注）を簡単に実装する方法

 「長い記事を書くと、補足や解説を本文中に挿入したいけど、文章の流れを崩したくない…」そんなときに便利なのが「注釈（脚注）」です。

BloggerにはWordPressのような標準機能はありませんが、HTMLとCSSだけで簡単に作ることができます。

今回は初心者の方でもできるシンプルな実装方法を紹介します。

HTMLで注釈を作る（基本形）

コード例

<p>この記事はBloggerでの注釈の作り方を解説しています<sup><a href="#fn1" id="ref1">1</a></sup>。</p>

<p id="fn1"><sup>1</sup> この部分が注釈の内容です。<a href="#ref1">↩︎</a></p>
  

解説

• <sup> … 上付き文字で番号を表示
• id と href … 本文 ↔ 注釈のリンクを作る
• 読者は番号をクリックすると注釈にジャンプでき、戻ることも可能

使用例

そして、構成・振付・演出プロデュースを依頼された中村龍史により、ノンストップで歌とダンスを繰り広げるライブ「ダンスサミット」を毎週行うガールズグループとして「東京パフォーマンスドール」（TPD）¹ を結成。

¹ 第1期では「パードル」という略称もあった↩︎

マウスオーバーでポップアップ表示（応用版）

コード例

<p>この記事はBloggerでの注釈の作り方を解説しています
  <span class="footnote" data-text="この部分が注釈の内容です。">[1]</span>。
</p>
  

CSS例

.footnote {
  color: #007bff;
  cursor: pointer;
  position: relative;
}

.footnote:hover::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  bottom: 100%;
  background: #fff7b2;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: max-content;
  max-width: 200px;
  white-space: normal;
  z-index: 10;
}
  

解説

• data-text に注釈内容を入れる
• マウスオーバーやタップでポップアップ表示
• CSSだけで実装可能、JavaScript不要
• スマホでも動作する（タップで表示）

まとめ

• BloggerでもHTML＋CSSだけで注釈（脚注）が作れる
• シンプルなリンク形式と、ポップアップ形式の2種類を紹介
• 長文記事での読みやすさ向上におすすめ

ポイント

• 注釈はあくまで補足。本文の流れを邪魔しないように配置する
• CSSポップアップ版は少しデザインを変えるだけで見た目を調整可能