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