ページ内ジャンプ(ページ内リンク)の作成手順と具体的な使用例
縦に長い記事はスクロールするのが大変なので、目的の位置までジャンプできるようにしておくと見やすい記事になります。ということで、今回はページ内ジャンプ(ページ内リンク)を作る方法を説明していきます。
ページ内ジャンプを作る手順
手順:アンカーを作る → リンクを貼るまずはアンカーを作ります。アンカーとは「杭」という意味で、文字通りページ内ジャンプ作成時の目印になります。
アンカーは英数字で作りましょう。ハイフンなどの記号も使えますが、先頭はアルファベットでないとだめです。あと、1ページに複数のページ内ジャンプを作るときは、同じアンカーを使ってはいけません。
<アンカーの例>
○ anchor01
○ anchor02
○ jump-1
× 01anchor
○ anchor01
○ anchor02
○ jump-1
× 01anchor
こんな感じですね。
続いて、作ったアンカーを使って、リンクの設定をします。
■リンク元(ジャンプの出発点)
■リンク先(ジャンプの到達点)
(△△△にはアンカーを入れます)
<a href="#△△△">ここから移動する</a>
■リンク先(ジャンプの到達点)
<h3 id="△△△">ここへ移動</h3>
(△△△にはアンカーを入れます)
見出しタグや画像タグに属性「id=”△△△”」をつければ、その地点へジャンプさせることができます。
ページ内ジャンプの具体的な使用例
アンカーを以下のように設定します。anchor01
anchor02
anchor03
anchor-back
anchor02
anchor03
anchor-back
次のようなソースで記事を作成します。
<h3 id="anchor-back">目次</h3> <ul> <li><a href="#anchor01">見出し1</a></li> <li><a href="#anchor02">見出し2</a></li> <li><a href="#anchor03">見出し3</a></li> </ul> <h3 id="anchor01">見出し1</h3> <p>記事内容</p> <h3 id="anchor02">見出し2</h3> <p>記事内容</p> <h3 id="anchor03">見出し3</h3> <p>記事内容</p> <hr> <a href="#anchor-back">目次に戻る</a>
実際に上記のソースを使用してページを作ると、次のようになります。
<記事作成の例>
目次に戻る
目次
ジャンプ力の鍛え方
ジャンプ力は先天的な要素もありますが、
鍛えて強化することもできます。
具体的には、腹筋背筋などをしたあと、
正しいジャンプ動作をする、というルーティーン。
筋肉をジャンプに最適化するということですね。
ジャンプする前にはかがむもの
飛躍的な進歩の影には、
必ず地道な努力があります。
そうです。
より高く飛ぶには、
より深く屈まなければなりません。
ジャンプとサンデーの発売日
ジャンプは月曜発売です。
サンデーは水曜日。
昔は田舎だと発売日より早く手に入るところもありました。
フライングゲットでしたね(笑)。
目次に戻る
例のように、上から下だけでなく、下から上へもジャンプできます。
使い勝手が良いページはブックマークされたり拡散されたりしやすいので、ぜひ、あなたのブログ記事もページ内ジャンプでユーザビリティーの向上を図ってみましょう。