ページ内リンク(アンカーリンク)とは、その名の通り、ページ内で任意の場所にジャンプさせることが出来るリンクです。例えばページの下部に、「上に戻る」といったリンクを設置して、ユーザーが読み終わったら、ページの上部に一気にジャンプしてもらうことが出来ます。
また、ページの上部に目次のような項目を作り、目次から各見出しへジャンプさせることも出来ます。
手順は以下のようになります。
ジャンプ先となる場所にアンカー(目印)を設置する
↓
リンクを作成する
ただし、アンカーの設置は、HTMLタグを直接書き込む必要がある為、Flipsブログでは使えません。
トップページやサブページで、「編集モジュール」から「HTML」を追加して作成する方法となります。
サンプルページ では、以下のアンカーリンクを設置しています。
・目次から、各見出しへ移動するアンカーリンク
・ページ下部から上部へ移動するアンカーリンク
【サンプルページの記入例】
■目次から各見出しへジャンプする例
まず最初に、質問内容や回答などの、質問集の部分は先に作っておきます。
質問集が出来上がったら、以下の手順でアンカーを設置していきます。
目次はアンカーの設置が終わってから、最後に作成します。
<手順1:アンカー(目印)の設置>
ジャンプ先となる場所に、アンカー(目印)を設置します。
「質問1:Flipsは商用利用できますか?」の見出しの上に、編集モジュールの「HTML」を挿入し、以下の文章を入力しています。
「質問1:Flipsは商用利用できますか?」の見出しの上に、編集モジュールの「HTML」を挿入し、以下の文章を入力しています。
<div id="a1"></div>
「a1」の部分が、アンカーの名前を表しています。
(名前は何でも構いませんが、日本語ではなく、英数字のみで指定してください)
<手順2>
同様に、質問2・質問3の各見出しの上にもHTMLモジュールを挿入し、アンカー名を「a2」,「a3」の名前で入力しています。
質問2の見出しの上のHTMLモジュール → <div id="a2"></div>
質問3の見出しの上のHTMLモジュール → <div id="a3"></div>
<手順3:リンクの作成>
最後に目次部分を作成します。
以下の形式で「HTML」モジュールに文章を登録すると、ページ内のアンカー名の場所に、ジャンプさせる事が出来る仕組みになっています。
<a href="#アンカー名">リンクさせたい文章</a>
サンプルでは、目次を表示させたい場所に「HTML」モジュールを挿入し、以下の文章を入力しています。(<br /> の部分は改行を意味しています)
<a href="#a1">質問1:Flipsは商用利用できますか?</a><br />
<a href="#a2">質問2:申し込みをするには、どうすればいい?</a><br />
<a href="#a3">質問3:無料期間内に延長しなかった場合は?</a><br />
■ページ下部から、ページの先頭へジャンプする例
ページ下部には、HTMLモジュールで以下の文章を登録しています。
ページ先頭はアンカーの設置は必要なく、"#"と指定すれば先頭にジャンプする事が出来るようになっています。
<a href="#">△上にジャンプする</a>
以上で、ページ内の好きなところに、閲覧者を案内することが出来るようになります。