ページ内のリンク・目次の作り方

Pocket

非常に縦に長いウェブページの場合、たとえ内容が優れていても最後まで読む気が失せてしまうことがあります。そんな時はページ内移動リンクや目次を上手に利用することで訪問者に優しいウェブサイトを作る事ができます。

ページ内リンクを実感したい人はこちらをクリック→このページの末尾へ

このようなリンクを使うにはnameタグというものをページ内に配置しておく必要があります。

Step 1 ： nameタグを設定する
<a name=”〇〇”> </a>というタグ（アンカー）を作ります。〇〇は01でもtopでもbottomでも分かりやすい英数字で構いません。

Step 2 ： nameタグを配置する
Step1で作ったタグをを本文内に配置します。

Step 3 ： ページ内リンク（<a href=”#〇〇”>を配置する
Step2で配置したアンカーに対応するリンクを張ります。#の後の〇〇は対応させたい英数字を入力してください。

なお、このページのソースはこんな感じになっていますので、上記の説明で分からない場合こちらを参考にしてください。

<a name="top"></a>
非常に縦に長いウェブページの場合、
たとえ内容が優れていても最後まで読む気が失せてしまうことがあります。
そんな時はページ内移動リンクや目次を上手に利用することで
訪問者に優しいウェブサイトを作る事ができます。
 
ページ内リンクを実感したい人はこちらをクリック→<a href="#04">このページの末尾へ</a>
 
このようなリンクを使うにはnameタグというものをページ内に配置しておく必要があります。
 
<li>Step 1 ： <a href="#01">&lt;a name="〇〇"&gt;タグを設定する</a></li>
<li>Step 2 ： <a href="#02">&lt;a name="〇〇"&gt;タグを配置する</a></li>
<li>Step 3 ： <a href="#03">ページ内リンク（&lt;a href="#〇〇"&gt;</a>を配置する</li>
 
<a name="01"></a>
<strong>Step 1 ： nameタグを設定する</strong>
&lt;a name="〇〇"&gt; &lt;/a&gt;
というタグ（アンカー）を作ります。
〇〇は01でもtopでもbottomでも分かりやすい英数字で構いません。
 
<a name="02"></a>
<strong>Step 2 ： nameタグを配置する</strong>
Step1で作ったタグをを本文内に配置します。
 
<a name="03"></a>
<strong>Step 3 ： ページ内リンク（&lt;a href="#〇〇"&gt;を配置する</strong>
Step2で配置したアンカーに対応するリンクを張ります。
#の後の〇〇は対応させたい英数字を入力してください。
 
なお、このページのソースはこんな感じになっていますので、
上記の説明で分からない場合こちらを参考にしてください。
 
<a name="04"></a>
ページ内リンク体感用のメッセージです。
 
上部から飛んできた人こんにちは。
ページをスクロールするのが面倒な場合はこちらをクリック→<a href="#top">ページトップへ</a>

ページ内リンク体感用のメッセージです。

上部から飛んできた人こんにちは。
ページをスクロールするのが面倒な場合はこちらをクリック→ページトップへ

Pocket