Bloggerで脚注を付ける

1. このCSSでできること

• ナビに被らない着地: 固定ナビゲーションがあるブログでも、注釈リンクがヘッダーの下に隠れず、絶妙な位置で止まります。
• 双方向のジャンプ: 本文から脚注へ、脚注から本文の元の位置へ、迷わずスムーズに行き来できます。
• 瞬時のハイライト: リンクで飛んだ際、対象の注釈がふわっと色づくため、どの項目を読めばいいか一目でわかります。
• 美しい上付き文字: 本文の邪魔をしない、小さく洗練された[注 1]形式のリンク装飾。

2. デザインの特徴

ミニマル＆モダン: 既存のブログデザインを邪魔しない、清潔感のあるブルーグレー基調の脚注エリア。

3. 実装デモ

「東京パフォーマンスドール」（TPD）^{[注 1]}を結成。同時に、Epic/Sony Records内にTPDのプライベートレーベル「Cha-DANCE」が設立され、CDやVHSなどは基本的にこのCha-DANCEレーベルよりリリースされた。ダンスサミットは原宿RUIDOで開催され、同年6月に第一回公演が行われた。当初は観客が数人で、それはメンバーの家族のみということもあったが、口コミで徐々に観客を増やし、次第に公演チケットの争奪戦が行われるようになる。

脚注

1. 1990年に結成。フロントメンバー、ライブメンバー、研修生（のちのTPD DASH!!）からなる大所帯のグループとして構成されていた。↩

CSS

<sup><a class="note-link" href="#fn1" id="ref1">[注 *]</a></sup>

<style>
/* 記事全体のレイアウト調整 */
.blogger-article-container {
  max-width: 800px;
  margin: auto;
  font-family: sans-serif;
  color: #334155;
}

.feature-section {
  margin-bottom: 2em;
}

.feature-title {
  border-left: 5px solid #1e3a8a;
  padding-left: 15px;
  margin-bottom: 1em;
  font-size: 1.25rem;
  color: #1e293b;
}

.feature-list {
  padding-left: 1.5em;
  line-height: 1.8;
}

.demo-box {
  padding: 2em;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
}

/* --- 脚注の機能CSS（スペーサー） --- */
[id^="ref"]::before {
  content: "";
  display: block;
  height: 150px;
  margin-top: -150px;
  visibility: hidden;
  pointer-events: none;
}

.footnotes li::before {
  content: "";
  display: block;
  height: 100px;
  margin-top: -100px;
  visibility: hidden;
  pointer-events: none;
}

/* --- 脚注の装飾CSS --- */
.note-link {
  font-size: 0.85em;
  text-decoration: none;
  font-weight: bold;
  color: #1e3a8a;
}

.footnotes {
  margin-top: 3em;
  padding-top: 15px;
  border-top: 1px solid #e2e8f0;
}

.footnotes-title {
  font-size: 0.8rem;
  color: #64748b;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.footnotes ol {
  padding-left: 1.5em;
}

.footnotes li {
  font-size: 0.9rem;
  line-height: 1.7;
  margin-bottom: 8px;
  padding: 4px 10px;
  border-radius: 4px;
  transition: all 0.5s ease;
}

.footnotes li:target {
  background-color: #f1f5f9;
  box-shadow: inset 3px 0 0 #1e3a8a;
}

.back-link {
  text-decoration: none;
  color: #94a3b8;
  font-size: 1.1rem;
  margin-left: 8px;
}
</style>
  

4. 脚注の増やし方

注釈を「2」「3」と増やしていくには、「ID（名前）」を数字に合わせて変更するだけです。仕組みはシンプルで、本文の「飛び先（href）」と、脚注リストの「受け皿（id）」の名前が一致していれば正しくジャンプするような仕様となっています。

本文内

「Cha-DANCE」が設立<sup><a href="#fn2" id="ref2" class="note-link">[注 2]</a></sup>され…
原宿RUIDOで開催<sup><a href="#fn3" id="ref3" class="note-link">[注 3]</a></sup>され…
  

脚注エリア（リストを増やす）

<ol>
  <li id="fn1">1つ目の内容... <a href="#ref1" class="back-link">↩</a></li>
  <li id="fn2">2つ目の内容... <a href="#ref2" class="back-link">↩</a></li>
  <li id="fn3">3つ目の内容... <a href="#ref3" class="back-link">↩</a></li>
</ol>