【超簡単】WordPressでページ内リンク（アンカーリンク）を作成する方法！

どうも。ゆかです。

ワードプレスブログの長い記事とかLP（ランディングページ）にて、ページの途中にジャンプさせたいなぁと思ったことはありませんか？

通常の投稿だったら、目次機能を使用することで、目次から見たいところにジャンプすることができます。

ですが、この目次機能がLPでは使用できないんですよね。 

というわけで、この記事では、ページ内リンクを作成して自由にページ内を移動させるためにジャンプさせる方法をご紹介します。 

目次機能が使いたい方は、こちら。

関連記事Table of Contents Plus使い方！目次の作り方を図解入り解説！

2024.11.05

パソコンが苦手だし、自分ではちょっとできないという方は、「WordPressスポットサポート」というサービスをご活用ください。

【スポットサポート】WordPressに関する
「困った！」「助けて！」を解決するサービス

【超簡単】ブロックエディターでのページ内リンク（アンカーリンク）の方法

クラシックエディターを使うより、ブロックエディターの方が簡単にページ内リンク（アンカーリンク）を作成することができます。

WordPressでページ内リンク（アンカーリンク）を作成する手順

❶アンカーを作成
❷リンクの設定

アンカーというのは『杭くい』という意味があります。文字通りページ内のジャンプ作成の目印ということです。

アンカーを作成

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

例えば、anchorｰ1、jump01

リンクの設定

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

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

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

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

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

ジャンプの到着地点には下のタグを入力します。(#入れないようにしてください）

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

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

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

使用例

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

ここから

・着地地点へ飛びます。

テスト

・

・

・

・

・

・

・

・

・

・

・

・

着地地点

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

WordPressでページ内リンク（アンカーリンク）を作成する方法のまとめ

今回は、ページ内リンクを作成して自由にページ内を移動させるためにジャンプさせる方法をご紹介しました。

ブロックエディターとクラシックエディターとやり方は違います。

ただ、ブロックエディターを使った方が超簡単にできるので試してみてください♪

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

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

あわせて読みたいTable of Contents Plus使い方！目次の作り方を図解入り解説！

2024.11.05