どうも。ゆかです。
ワードプレスブログの長い記事とかLP（ランディングページ）にて、ページの途中にジャンプさせたいなぁと思ったことはありませんか？
通常の投稿だったら、目次機能を使用することで、目次から見たいところにジャンプすることができます。
ですが、この目次機能がLPでは使用できないんですよね。
というわけで、この記事では、わたしがLPを作成したときに使ったページ内をジャンプさせるためのアンカーリンクの作り方をご紹介します。
この記事では、クラシックエディターを使っている方向けにページ内リンクをご紹介しています。
目次は読みたいところをタップして飛べるよ♪
ブロックエディターでのページ内リンクの方法
クラシックエディターを使うより、ブロックエディターの方が簡単にページ内リンク（アンカーリンク）を作成することができます。
ページ内をリンクでジャンプさせる手順
❶アンカーを作成
❷リンクの設定
アンカーというのは『杭』という意味があります。文字通りページ内のジャンプ作成の目印ということです。
アンカーを作成
アンカーは英数字で作ります。
例えば、anchorｰ1、jump01
リンクの設定
作ったアンカーを使って、リンクの設定をしていきます。
まず投稿をテキストモードにしてください。
ジャンプさせる出発点に下のタグを入力します。
<a href=”#△△△“>ここから移動する</a>
#△△△の△△△部分に先ほど決めたアンカーを入力します。
ジャンプの到着地点には下のタグを入力します。(#入れないようにしてください）
<a id=“△△△”>ここへ移動</a>
この手順だけでページ内をジャンプするようになりました。
上から下だけでなく下から上へと戻ることも可能です。
使用例
<a href=”#anchor”>・着地地点へ飛びます。</a>
テスト
テスト
<a id=”anchor”>着地地点</a>
こんな感じでテキストモードに入力します。
ここから
テスト
・
・
・
・
・
・
・
・
・
・
・
・
動きが小さいのでイマイチ分かりにくいかもしれません…（＾＾；
最後に
ランディングページに使えますので、覚えておくと良いかと思います。
普段の投稿などは、もうすでに便利な目次のプラグイン【Table of Contents Plus】がありますので、ぜひこちらもご活用くださいね（＾＾）
先頭は、アルファベットにしましょう。
1ページに複数ジャンプを使用したいときは、同じアンカーは使ってはいけません。