ブロックエディタでページ内ジャンプリンクの作り方

※本サイトは広告が含まれます

WordPressのブロックエディタではページ内のジャンプリンクを「HTMLアンカー」を使用して簡単に作ることができます。

スポンサーリンク

動作確認

このページの解説どおりに設定したページ内ジャンプリンクです。お試しください。

見出し1

ジャンプするにはここをクリック!

見出し2

「見出し2」にジャンプされます。

このようにジャンプリンクとは同ページ内のリンクをクリックすると、ジャンプ先に指定した要素に瞬時に移動できるリンクのことです。

ジャンプ元はリンクである必要がありますが、ジャンプ先は見出しに限らずどこでも可能で、ブロックエディタでは任意のブロックを「HTMLアンカー」から簡単に指定することができます。

ジャンプリンクの作り方

1. ジャンプ先(目的地)を設定する

  1. ジャンプ先のブロックを選択します(ここでは見出し2
  2. 「ブロック→高度な設定→HTMLアンカー」と進み英数字でアンカー名を入力します(ここではmidasi2

2. ジャンプ元(リンク)を設定する

  1. ジャンプ元のリンクにしたいテキストを選択します(ここではここ
  2. ツールの「リンク」をクリックして「#」を頭につけてアンカー名を入力します(ここでは#midasi2
  3. Enterかクリックして決定する。

これで完了です。必ずプレビューからクリックして動作を確認しましょう。

コメント