まずは30日間無料お試し!クリックして30分後には、あなたのホームページができあがります。

お申込みはこちら

テストサイトで利用体験!Flipsのテスト画面を自由にご利用いただけます。 テストサイトへアクセスし、 画面右下の編集ボタンをクリックしてください。

テストサイト http://test.flips.jp
ログインパスワード password

Flipsの使い方


ページ内でジャンプすることが出来るリンク(アンカーリンク)を作成する方法

投稿日時:2012/12/18 10:00


ページ内リンク(アンカーリンク)とは、その名の通り、ページ内で任意の場所にジャンプさせることが出来るリンクです。例えばページの下部に、「上に戻る」といったリンクを設置して、ユーザーが読み終わったら、ページの上部に一気にジャンプしてもらうことが出来ます。
また、ページの上部に目次のような項目を作り、目次から各見出しへジャンプさせることも出来ます。

手順は以下のようになります。

ジャンプ先となる場所にアンカー(目印)を設置する
  ↓
リンクを作成する


ただし、アンカーの設置は、HTMLタグを直接書き込む必要がある為、Flipsブログでは使えません。
トップページやサブページで、「編集モジュール」から「HTML」を追加して作成する方法となります。

サンプルページ では、以下のアンカーリンクを設置しています。
 ・目次から、各見出しへ移動するアンカーリンク
 ・ページ下部から上部へ移動するアンカーリンク


【サンプルページの記入例】

■目次から各見出しへジャンプする例

まず最初に、質問内容や回答などの、質問集の部分は先に作っておきます。
質問集が出来上がったら、以下の手順でアンカーを設置していきます。
目次はアンカーの設置が終わってから、最後に作成します。

<手順1:アンカー(目印)の設置>
ジャンプ先となる場所に、アンカー(目印)を設置します。
「質問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>


以上で、ページ内の好きなところに、閲覧者を案内することが出来るようになります。


まずは30日間無料お試し!クリックして30分後には、あなたのホームページができあがります。

お申込みはこちら