※ 上のリンクをクリックすると、このページの中の対応するセクションへスクロールします。ブラウザの「戻る」ボタンを押すと、元の位置に戻ることができます。
1. なぜページ内目次が便利なのか
学習用のページや長めの解説記事では、どうしてもスクロールが長くなりがちです。
そこで、ページの先頭に「このページには、こういう内容が書かれています」という目次を置いておくと、次のようなメリットがあります。
- 読み手が、今このページに「何が書いてあるか」を一目で把握できる
- 知りたいところにすぐジャンプできるので、ストレスが少ない
- ページの構造がはっきりするので、自分で書くときの整理にも役立つ
特に、今回のように「第1〜9回まで続く学習コンテンツ」のようなページでは、目次があるだけで使いやすさが大きく変わります。
2. ページ内リンクと目次の作り方
ページ内目次は、実はとてもシンプルな仕組みで作られています。
1. 見出しに id 属性を付ける
まず、ジャンプしたい見出しに id を付けておきます。
例：
<h2 id="how">2. ページ内リンクと目次の作り方</h2>
2. 目次から href でリンクする
次に、目次の中から href="#id名" でリンクを作ります。
例：
<a href="#how">2. ページ内リンクと目次の作り方</a>
この2つをセットにすることで、リンクをクリックしたときに、ページ内の対応する位置までスクロールしてくれます。
3. ページの先頭に戻るリンクも付けてみる
このサンプルでは、各セクションの一番下に「ページの先頭へ戻る」というリンクを付けています。
先頭には、次のような空の要素を置いておきます。
<div id="top"></div>
あとは、戻りたい場所から <a href="#top">ページの先頭へ戻る</a> と書くだけです。
3. 長文レイアウトのコツ
長めの文章を読みやすくするには、HTMLとCSSのちょっとした工夫が役立ちます。
見出しで区切りをはっきりさせる
<h2> と <h3> を使って、記事を「大きな章」と「小さな見出し」で整理します。
見出しごとに <section> で囲んでおくと、ページの構造も分かりやすくなります。
段落を短めに区切る
1つの <p> に長い文章を詰め込みすぎると、どうしても読みづらくなります。
意味の切れ目で <p> を分けて、適度に余白を入れるようにすると、読みやすさが上がります。
ポイントは箇条書きにする
重要なポイントは、できるだけ <ul> / <li> を使って箇条書きにしておくと、読み手が内容をつかみやすくなります。
4. 広告と目次の関係について
ページ内目次があるページでも、アフィリエイト広告を配置することができます。
ただし、次のような点に気をつけると、読みやすさと収益化のバランスが取りやすくなります。
- 目次のすぐ下に大きな広告を入れすぎない
- 本文と広告を 見た目で区別 できるようにする
- スマホで見たときに、スクロールが広告だらけにならないようにする