同じページ内にリンクを貼って、任意の場所にジャンプする方法を紹介します。

長文の記事でページが縦長になってしまうと、最後まで読んで貰えない場合もありますし、訪問者が目的の箇所へジャンプ出来るようにしておくと、見やすい記事にもなります。

また、ページ内リンクをプラグインで簡単に設定する事も出来ます。有名なのは「Table of Contents Plus」「Easy Smooth Scroll Links」などですが、ここはあえて手動でいきます。

当サイトでは追記があった場合に、記事の最後に記載しています。その際にどの箇所の事だか分かりやすいように、ページ内リンクを貼る事があります。

ジャンプしたい場所にアンカーを作る(到達点)

ページ内リンクをするのに、まずはアンカー(到達点)を作ります。アンカーはidを指定する方法が一般的です。

<h3>到達点</h3>

例として「到達点」のh3要素にアンカーを作ります。

<h3 id=”アンカー名“>到達点</h3>

アンカー名にid(識別名)を指定します。

<h3 id=”anchor-1“>到達点</h3>

具体的に書くとこんな形になります。「アンカー名」には、英数字・ハイフンを使用する事が出来ますが、数字が先頭に来てはいけません。また複数の箇所にアンカーを作る場合、同じアンカー名は使用出来ません。

要素とタグについて

要素(element)は、開始タグ (Start-tag)・内容 (Content)・終了タグ (End-tag) の3つから構成される[1]。要素は<と>で囲まれる開始タグで始まり、で囲まれる終了タグで終わる。

開始タグと終了タグではさまれた部分が内容となる。また、要素は属性(attribute)と属性値(value)を取ることができ、開始タグにそれを記すことができる。

アンカーへジャンプするリンクを作る(出発点)

次に、アンカーへジャンプするためのリンクを作りましょう。

<a href=”リンク先URL”>出発点</a>

リンクはa要素を使用して作ります。

<a href=”リンク先URL/#anchor-1“>出発点</a>

リンク先URLはhttp://から始まる絶対パスで書き、idを「#」に変えて指定します。

<a href=”//acronym.jp/page-in-the-link/#anchor-1“>出発点</a>

このエントリー内でページ内リンクならば、上記のような形になります。絶対パスと相対パス についてはこちらを参考にして下さい。

実際の使用例

<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でアクロニウムをフォローしよう!