【一瞬で移動!】同じページ内で指定場所にリンクを飛ばす方法!

 

「プラグインを使わず、自分で目次を作りたい…」

また、

「同じページ内で指定した場所にユーザーを飛ばしたい…」

と思ったことはありませんか?

 

今回は、そんな「同ページ内でリンクを飛ばす方法」の紹介です。

 

例えば、同ページ内でこんなことができます。

●まずココを押してください(記事の最後に飛びます)

●●ココに戻ってきます。

 

では、これからこの「同ページ内でリンクを飛ばす方法」について紹介していきましょう↓↓

 

「同ページ内でリンクを飛ばす」一連の手順!

 

まずは一連の手順を簡単に紹介していきます。

やることは簡単です。

・まず、起点となるリンクを作る

これは冒頭の「●まずココを押してください」の部分です。

・そして、リンク先に「目印」をつける

これは、リンクで飛ばしたい場所のことですね。

さっきは、記事の最後に目印をつけていました。

たったこれだけの手順です。

これらの順番は、前後しても構いません。

 

では2つのコードの書き方を紹介する前に、

1つだけ覚えておくべきポイントを紹介しましょう↓↓

 

目印(アンカー)を決める時の注意点!

 

まず、リンクの起点と飛ばす先のポイントを繋ぐ「目印」を決める必要があります

この目印のことは“アンカー”と言います。

この目印(アンカー)は、起点と終点の両方につける必要があります。

(後ほどそれぞれの付け方を紹介します。)

 

そして、この目印(アンカー)の名前をつける時には、少しルールがあるんです↓↓

目印(アンカー)の名前の注意点
  • 目印名は何でもいいが、半角英数字でつけること。
  • 同ページ内では、同じ目印名は使えない

このアンカー名(目印)は、上のルールさえ守れば、

「a1とかb1」

とか何でもOKです。

わかりやすいものにしておくといいでしょう。

 

起点となるリンクの書き方!

では、起点となる「リンクの書き方」を紹介していきましょう。

 

起点となるリンクの書き方↓↓

<a href=”#目印となる名前(自分で決める)”>文字・画像など</a>

このコードで、起点となるリンクを作ることができます。

ワードプレスで行う場合の注意点としては、

“ビジュアル”画面ではなく、“テキスト画面”で記述するということですね。

 

例として、、

冒頭で示した「●まずココを押してください

の起点となるリンクの書き方はこんな感じ↓↓

「<a href=”#a1″>●まずココを押してください</a>」

目印(アンカー)はa1にしました。(自分のわかりやすい名前で構いません。)

 

「リンク先コード」の書き方!

 

では続いて、「リンク先コードの書き方」を紹介していきます。

 

目印(アンカー)の書き方↓↓

・見出しのところにリンクを飛ばす場合↓↓

「<h3 id=”目印名”>見出しタイトル</h3>」

 

・また、見出しではない普通の文字を目印にする場合↓↓

「<div id=”目印”>文字</div>」

目印名(アンカー)は、起点リンクと同じものにすると繋がります

 

また、応用して活用すれば、他にもいろんな使い方があります。

ぜひ今回の付け方も参考にしてみてください(^^♪

 

冒頭のリンクと繋ぐ
●ココがさっきのリンク先となる目印

 

●●ココを押すとさっきの場所へ戻ります。