今回は、Webサイト制作で頻繁に使用する「アンカーリンク（ページ内リンク）」の設定方法について解説します。

お問い合わせボタンを押したら、ページ下部のフォームまで自動でスクロールして移動するといった動きを実装する際のElementorでの設定です。

アンカーリンクの仕組み

アンカーリンクは、以下の2つの要素で成り立っています。

到着地点（ゴール）：ここに移動したい、という場所。ここに「ID（名札）」を付けます。
出発地点（ボタンなど）：クリックする場所。リンクには飛ばしたい先の「#ID名」を指定します。

この2つが紐付くことで、ジャンプ動作が実現します。

Elementorでの設定手順

⚫︎【手順1】 到着地点を作る
移動したい先のコンテナやセクション、見出しなどのウィジェットを選択し、[ 高度な設定 ] → [ CSS ID ] の欄に好きな名前を半角英数で入力します。

例：contact

注意点：ここには「#」は入れません。ただの contact です。

【補足】
ほかにもElementor には専用のウィジェットでのアンカーリンクを作る方法があります。
ウィジェット一覧から「メニューアンカー (Menu Anchor)」を探し、移動したい場所に配置して「アンカーのID」という欄に、好きな名前を半角英数で入力します。
先に紹介した方法の方が、ウィジェットが増えず簡単なのでメニューアンカーは個人的には使用頻度は低いです。

⚫︎【手順2】 出発地点を設定する
次に、クリックさせるボタンやメニューの設定です。
ボタンウィジェットを選択します。
リンクの欄に、先ほど決めたIDに「#」をつけて入力します。

例：#contact

注意点:：こちらには必ず「#」が必要です。

これで、ボタンを押すと contact というIDがある場所までスクロールするようになります。

IDを付けるときの注意点

IDはひとつしか存在できません。同じIDをいくつもあると、当たり前ですがリンク先が特定できず飛ぶことができません。
また、入力時に間違えないようにコピペでそれぞれ同じようにすることがベストです。一文字でも異なるとうまくいかないので注意が必要です。

次回：繰り返し使うのに便利なテンプレートの保存・呼び出し