「プラグインを使わず、自分で目次を作りたい…」
また、
「同じページ内で指定した場所にユーザーを飛ばしたい…」
と思ったことはありませんか？
今回は、そんな「同ページ内でリンクを飛ばす方法」の紹介です。
では、これからこの「同ページ内でリンクを飛ばす方法」について紹介していきましょう↓↓
「同ページ内でリンクを飛ばす」一連の手順！
まずは一連の手順を簡単に紹介していきます。
やることは簡単です。
・まず、起点となるリンクを作る。
これは冒頭の「●まずココを押してください」の部分です。
↓
・そして、リンク先に「目印」をつける。
これは、リンクで飛ばしたい場所のことですね。
さっきは、記事の最後に目印をつけていました。
たったこれだけの手順です。
これらの順番は、前後しても構いません。
では２つのコードの書き方を紹介する前に、
１つだけ覚えておくべきポイントを紹介しましょう↓↓
目印（アンカー）を決める時の注意点！
まず、リンクの起点と飛ばす先のポイントを繋ぐ「目印」を決める必要があります。
この目印のことは“アンカー”と言います。
この目印（アンカー）は、起点と終点の両方につける必要があります。
（後ほどそれぞれの付け方を紹介します。）
そして、この目印（アンカー）の名前をつける時には、少しルールがあるんです↓↓
- 目印名は何でもいいが、半角英数字でつけること。
- 同ページ内では、同じ目印名は使えない。
このアンカー名（目印）は、上のルールさえ守れば、
「a1とかb1」
とか何でもOKです。
わかりやすいものにしておくといいでしょう。
起点となるリンクの書き方！
では、起点となる「リンクの書き方」を紹介していきましょう。
＜a href=”#目印となる名前（自分で決める）”＞文字・画像など＜/a＞
このコードで、起点となるリンクを作ることができます。
ワードプレスで行う場合の注意点としては、
“ビジュアル”画面ではなく、“テキスト画面”で記述するということですね。
冒頭で示した「●まずココを押してください」
の起点となるリンクの書き方はこんな感じ↓↓
「<a href=”#a1″>●まずココを押してください</a>」
目印（アンカー）はa1にしました。（自分のわかりやすい名前で構いません。）
「リンク先コード」の書き方！
では続いて、「リンク先コードの書き方」を紹介していきます。
・見出しのところにリンクを飛ばす場合↓↓
「＜h3 id=”目印名”＞見出しタイトル＜/h3＞」
・また、見出しではない普通の文字を目印にする場合↓↓
「<div id=”目印”>文字</div>」
目印名（アンカー）は、起点リンクと同じものにすると繋がります。
また、応用して活用すれば、他にもいろんな使い方があります。
ぜひ今回の付け方も参考にしてみてください(^^♪
