アンカーリンクの作成方法

ボタン、リンクをクリックすると指定の位置まで移動することができます。ワードプレスの場合、ブロックエディターの『リンク』を利用することで簡単に使用することができます。

例えば、こちらをクリックすると、ページ内の指定した場所へ移動します。コードはこんな感じ

アンカー先で位置が下過ぎると感じたら、直前のブロックをアンカー先にするとちょうどよいです。

/*基本構造*/
/*同一ページ内*/
<a data-id="#ABC">ABCへ移動します</a>
<a id="ABC">

移動先です。戻る場合はこちら

以下のように移動先の直前にカスタムHTMLを組み込むと、少しだけアンカーリンク先の位置を上にあげることができます。デフォルトだと、アンカーリンク先の上部一部が見えづらい為です。

<div style="height:100px" aria-hidden="true" class="wp-block-spacer" id="移動先"></div>

Copy

イメージとしては、こんな感じです。