【ブロックエディター】別の場所にジャンプさせる手順(アンカー)

WordPress
スポンサーリンク

当ブログは収益を目的としたアフィリエイト広告およびアドセンス広告を使用しており、記事内にそれらの広告が含まれる場合があります。

この記事では、ブロックエディターでの『アンカーの設置方法』をご紹介します。

設置にかかる時間は約1分です。

「クラシックエディター」でのアンカー設置については 過去の記事があります。(↓)

アンカーとは?

「アンカー」は 文字列やボタンをクリックすることで、別の場所へジャンプさせるWordPressの標準機能で、「アンカーリンク」とも呼ばれます。

こんな感じです。(↓)※下の青の文字列をクリックしてみてください。

少し下までジャンプ↓↓【A】

ここまでジャンプできましたか?【B】

アンカーの設定が必要なのは、この【A】リンク元(出発点のこと)【B】リンク先(着地点のこと)の2つだけです。

それでは早速、その設定の手順について。

使用しているWordPressテーマは『Cocoon』です。

リンク先(着地点)の設置

まずは、【B】リンク先の方を設置します。

編集画面(ビジュアルエディター)を開き、「ここまでジャンプできましたか?」と入力。(※文字列は任意)

文字列のブロックを選択した状態で(テキストカーソルを置いた状態で)、右パネルの最下部にある「高度な設定」クリックします。

「HTMLアンカー」の入力欄があるので、そこに「a」と入力します。

「a」は「アンカー名」といって単なる目印です。 自分が分かりやすい英数字の文字列であればなんでも構いません。
ただし、文字列の先頭を数字にすると正常に動作しないようなので、先頭だけは英字にする必要があります

リンク元(出発点)の設置

次に【A】リンク元を設置します。

編集画面内に、「少し下までジャンプ↓↓」と入力。(※文字列は任意)

文字列を選択した状態で、「文書ツール」の「リンク」のボタンをクリックします。

リンク先のURLとして、「#a」と入力します。

「a」は先ほど決めたアンカー名ですが、先頭に「#」の記号を付けるのをお忘れなく。

プレビューで正常に動作することができたら完了です。

リンク先は「アンカー名」リンク元は「#」+「アンカー名」と覚えておくとよいです!

別のページにジャンプさせるには?

先ほどと手順が変わるのは【A】「リンク元」(出発点)のみです。
(※【B】「リンク先」(着地点)のやり方は同じ。)

「#a」の前の部分にリンク先のページのURLを追記します。(↓)

https://リンク先のページのURL/#a

以上、ブロックエディターでの『アンカーの設置方法』でした。

タイトルとURLをコピーしました