目次はページ内リンクで作成することができます。
その方法をまとめました。
ページ内リンクの作り方
ページ内リンクは、タグに同じid名をつけ、リンクで飛ぶイメージです。
ジャンプボタンの作成
ジャンプボタンはaタグで作ります。URLのかわりにid名を使い、href=”#id名”とします。
#をつけるのを忘れないように気をつけてください。
具体的にはこのように書きます。
<a href="#sample>ここをクリック！</a>
ここではid名をsampleとしましたが、好きな名前をつけてくださいね。
【id名の付け方の注意点】
・同じページ内で同じ名前を使わない
・名前に使えるのは半角英数のみ
・スペースは入れない
・同じページ内で同じ名前を使わない
・名前に使えるのは半角英数のみ
・スペースは入れない
リンク先の指定
飛びたい箇所のタグに、ジャンプボタンと同じid名をつけます。例えば、あるh2見出しにジャンプしたければ、以下のように書きます。
<h2 id="sample">これは見出しです</h2>
目次を実際に作ってみる
実際にページ内リンクを使って目次を作ってみました。目次をクリックすると該当の見出しまでジャンプします。
【目次】
・見出しｈ2です
↓
↓
↓
↓
↓
↓
↓
↓
↓
【各見出し】
見出しｈ2です
違うページの該当箇所に飛ぶ方法
違うページの途中にジャンプしたいときは、aタグに該当ページのURLを追加します。このように記入してください。
<a href=”https://---------.com#sample2“>ここをクリック</a>
ページ内に飛ぶときと同様、リンク先は同じid名をつけてください。
<h2 id="sample2">これは見出しです</h2>
違うページにジャンプする時に新しいタブを開くには
違うページの途中にジャンプする際に、新しいタブを開きたいときは、target=”_blank”を記入してください。たとえばこのように書きます。
<a href="https://---------.com#sample2" target="_blank" >ここをクリック</a>
これで新しいタブでページが開きます。
WordPressならプラグインで目次を自動生成
WordPressを使っている場合は、Table of Contents Plusというプラグインが便利です。
自動で目次を作ってくれ、手間いらずです。
