この記事では、ブロックエディターでの『アンカーの設置方法』をご紹介します。
※「クラシックエディター」でのアンカー設置については 過去の記事があります。(↓)
アンカーとは?
「アンカー」は 文字列やボタンをクリックすることで、別の場所へジャンプさせるWordPressの標準機能で、「アンカーリンク」とも呼ばれます。
こんな感じです。(↓)※下の青の文字列をクリックしてみてください。
少し下までジャンプ↓↓…【A】
ここまでジャンプできましたか?…【B】
アンカーの設定が必要なのは、この【A】のリンク元(出発点のこと)と【B】のリンク先(着地点のこと)の2つだけです。
それでは早速、その設定の手順について。
リンク先(着地点)の設置
まずは、【B】のリンク先の方を設置します。
編集画面(ビジュアルエディター)を開き、「ここまでジャンプできましたか?」と入力。(※文字列は任意)
文字列のブロックを選択した状態で(テキストカーソルを置いた状態で)、右パネルの最下部にある「高度な設定」クリックします。
「HTMLアンカー」の入力欄があるので、そこに「a」と入力します。
「a」は「アンカー名」といって単なる目印です。 自分が分かりやすい英数字の文字列であればなんでも構いません。
ただし、文字列の先頭を数字にすると正常に動作しないようなので、先頭だけは英字にする必要があります。
リンク元(出発点)の設置
次に【A】のリンク元を設置します。
編集画面内に、「少し下までジャンプ↓↓」と入力。(※文字列は任意)
文字列を選択した状態で、「文書ツール」の「リンク」のボタンをクリックします。
リンク先のURLとして、「#a」と入力します。
「a」は先ほど決めたアンカー名ですが、先頭に「#」の記号を付けるのをお忘れなく。
プレビューで正常に動作することができたら完了です。
リンク先は「アンカー名」、リンク元は「#」+「アンカー名」と覚えておくとよいです!
別のページにジャンプさせるには?
先ほどと手順が変わるのは【A】「リンク元」(出発点)のみです。
(※【B】「リンク先」(着地点)のやり方は同じ。)
「#a」の前の部分にリンク先のページのURLを追記します。(↓)
https://リンク先のページのURL/#a
以上、ブロックエディターでの『アンカーの設置方法』でした。