Blogger Labo：ページ内リンクを使って目次を自作する方法

今回はwebデザインの初心者向けにページ内リンクを使って手動で目次を作成する方法を紹介しておきます。

今はJavaScriptなんかを使って挿入や生成を自動化することが主流みたいですが、ページ内リンクを使った目次の作成はHTMLやCSSの基本を知る上で大変便利だと思うので、ここにまとめておくことにしました。

しかし、この方法で大量のページに目次を設定してしまうと、慣れてからメンテナンスをするのが面倒になるというデメリットもあります。ですので、用途に応じて使い分けてみてください。


メリットとデメリット


メリット


・条件にとらわれずに自由にリンクを作成できる
・<ol>タグや<ul>タグで自由に目次の仕様を決めることができる

デメリット


・作業自体が面倒
・サイト内に設置した目次の仕様を一括で変更することができない
・出したり消したりが自由にできない（手作業で作成と削除を行う必要性がある）

作業手順


1．ページ内リンクにしたい要素にidをつける


まずは目次リストのリンクにしたい要素にidを振ります。
idはページ内リンクのリンク先（URL）として使用されます。
HTMLなら大抵はidを振って管理できます。例は以下の通りです。

<!-- 見出しタグ -->

<h2 id="midashi1">見出し1</h2>
<h3 id="midashi2">見出し2</h3>
<h4 id="midashi3">見出し3</h4>

<!-- その他のタグ -->

<div id="link1">リンク1</div>
<p id="link2">リンク2</p>

2．HTMLで目次を作成する


次にHTMLで目次を作成します。

リンクにしたい部分は<a>タグにしてページ内リンクを設定します。
その際のURLは「#id名」でOKです。

後でCSSで修飾するので、要素にクラス名を設定しておきます。
以下は目次の例です（見出しタグにmidashi1などのidを振った前提で作っています）。

<div class="mokuji" id="mokuji">
  <div class="mokuji-midashi">【目 次】</div>
  <ul>
    <li><b>大見出し1</b></li>
      <ul>
        <li><a href="#midashi1">見出し1</a></li>
        <li><a href="#midashi2">見出し2</a></li>
        <li><a href="#midashi3">見出し3</a></li>
      </ul>
    <li><b>大見出し2</b></li>
      <ul>
        <li><a href="#midashi4">見出し4</a></li>
        <li><a href="#midashi5">見出し5</a></li>
        <li><a href="#midashi6">見出し6</a></li>
      </ul>
    <li><b>大見出し3</b></li>
      <ul>
        <li><a href="#midashi7">見出し7</a></li>
        <li><a href="#midashi8">見出し8</a></li>
        <li><a href="#midashi9">見出し9</a></li>
      </ul>
  </ul>
</div>

3．CSSで見出しを整える


最後にCSSで目次の見た目を整えます。
Bloggerの場合、以下のCSSをテンプレートに設定しておくと全ページに反映させることができます。
個別に設定したい場合は<style>タグで囲んでページ内に設定してください。

とりあえず、以下のようなCSSを用意してみました。
ここらへんは好みによるところなので、下記を参考に適当にイジってみてください。

/* 目次全体 */
.mokuji {
  color: #333;
  background: #ccc;
  border: solid 1px #aaa;
  border-radius: 15px;
  padding: 15px;
  margin: 5px 5%;
}

/* 目次の見出し */
.mokuji-midashi {
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 25px;
}

/* レスポンシブデザイン（スマホ用） */
@media (max-width: 560px) {
  .mokuji {
    padding: 10px 5px;
    margin: 5px 1%;
  }
  .mokuji-midashi {
    font-size: 13px;
  }
}

注意点


ページ内リンクについて


ページ内リンクは基本的には、

<a href="id名">リンクテキスト</a>

だけで動作するはずです。

<a href="ページURL#id名">リンクテキスト</a>

としても同じ動作しますが、ページの再読み込みをした上でリンクに飛んでしまいます。
すると、ページの表示が遅延して閲覧者に不快感を与えてしまう可能性大です。注意しましょう。