同じページ内にリンクを貼って、任意の場所にジャンプする方法を紹介します。
長文の記事でページが縦長になってしまうと、最後まで読んで貰えない場合もありますし、訪問者が目的の箇所へジャンプ出来るようにしておくと、見やすい記事にもなります。
また、ページ内リンクをプラグインで簡単に設定する事も出来ます。有名なのは「Table of Contents Plus」「Easy Smooth Scroll Links」などですが、ここはあえて手動でいきます。
ジャンプしたい場所にアンカーを作る（到達点）
ページ内リンクをするのに、まずはアンカー（到達点）を作ります。アンカーはidを指定する方法が一般的です。
例として「到達点」のh3要素にアンカーを作ります。
アンカー名にid（識別名）を指定します。
具体的に書くとこんな形になります。「アンカー名」には、英数字・ハイフンを使用する事が出来ますが、数字が先頭に来てはいけません。また複数の箇所にアンカーを作る場合、同じアンカー名は使用出来ません。
要素とタグについて
要素（element）は、開始タグ (Start-tag)・内容 (Content)・終了タグ (End-tag) の3つから構成される[1]。要素は<と>で囲まれる開始タグで始まり、で囲まれる終了タグで終わる。
開始タグと終了タグではさまれた部分が内容となる。また、要素は属性（attribute）と属性値（value）を取ることができ、開始タグにそれを記すことができる。
引用元: HTML要素 | Wikipedia
アンカーへジャンプするリンクを作る（出発点）
次に、アンカーへジャンプするためのリンクを作りましょう。
リンクはa要素を使用して作ります。
リンク先URLはhttp://から始まる絶対パスで書き、idを「#」に変えて指定します。
このエントリー内でページ内リンクならば、上記のような形になります。絶対パスと相対パス についてはこちらを参考にして下さい。
実際の使用例
<h3 id="a-back">目次</h3>
<ul>
<li><a href="#a01">見出し1</a></li>
<li><a href="#a02">見出し2</a></li>
<li><a href="#a03">見出し3</a></li>
</ul>
<h3 id="a01">見出し1</h3>
<p>記事内容</p>
<h3 id="a02">見出し2</h3>
<p>記事内容</p>
<h3 id="a03">見出し3</h3>
<p>記事内容</p>
<a href="#a-back">目次に戻る</a>MATO-MEMO
記事ごとに目次を作るなら、Table of Contents Plusプラグインを使った方が手間がかならないし、頻繁に使うなら、Easy Smooth Scroll Linksプラグインを使った方が便利です。
たまーに使う程度なら、手動でページ内リンクを作った方がプラグインの数も減らせるし、良いかなと思います。
この記事が役に立ったらいいね！しよう
最新情報をお届けします
Twitterでアクロニウムをフォローしよう！
Follow @acronymjp
