ページ内でジャンプ（ページ内リンク）させる方法

こんにちは。ゆかです。

長い記事とかLP（ランディングページ）にて、ページの途中にジャンプさせることができる方法です。

通常の投稿は目次昨日を使用すると目次で見たいところにジャンプしますが、これはLPとかで使用できることではないかと思います。

わたしも実際にLPページでジャンプさせたかったので、使っています。

その方法を忘れないために、備忘録として記事にしたいと思います。

ページ内ジャンプする手順

アンカーを作ります

アンカーというのは『杭』という意味があります。

文字通りページ内のジャンプ作成の目印ということです。

アンカーは英数字で作ります。

例えば、anchorｰ1、jump01

anchor作成の注意

先頭は、アルファベットにしましょう。

1ページに複数ジャンプを使用したいときは、同じアンカーは使ってはいけません。

リンクの設定をします

作ったアンカーを使って、リンクの設定をしていきます。

まず投稿をテキストモードにしてください。

ジャンプさせる出発点に下のタグを入力します。

<a href=”#△△△“>ここから移動する</a>

#△△△の△△△部分に先ほど決めたアンカーを入力します。

ジャンプの到着地点には下のタグを入力します。

<a id=“△△△”>ここへ移動</a>

この手順だけでページ内をジャンプするようになりました。

上から下だけでなく下から上へと戻ることも可能です。

使用例

こんな感じでテキストモードに入力します。

動きが小さいのでイマイチ分かりにくいかもしれません…（＾＾；

最後に

ぜひランディングページに使えますので、覚えておくと良いかと思います。

普段の投稿などは、もうすでに便利な目次のプラグイン【Table of Contents Plus】がありますので、ぜひこちらもご活用くださいね（＾＾）

プラグイン【Table of Contents Plus】とは？インストールから作り方までを徹底解説！！

2018.10.13