（再編成）4-5-1-3.アンカーを設置してジャンプ移動させる方法

この記事は4-5-1.SWELLで作る教室サイトのトップページ設計〈前編〉|着せ替えデザイン応用の抜粋・再編成です。アンカー設置で目的の情報へすぐにジャンプする方法を解説しています。

イベントカレンダーへジャンプさせる方法

からだリズム体操教室（DEMO2）では、XOカレンダーは「フッター直前」というウィジェットに設置しています。
ただ、トップページが長くなったため、すぐにカレンダーが見られません。

トップページが長くなると、読者は目的の情報にたどり着くまでスクロールが大変になります。
そこで「ページ内アンカー」を使い、ボタンからカレンダーまで一瞬で移動できるようにしました。

ジャンプ先を指定するため、
「フッター直前」ウィジェットの中に 「カスタムHTML」ブロック を追加し、
以下のコードを入れています👇

<!-- wp:html -->
<a id="calendar"></a>
<!-- /wp:html -->

これで、ボタンブロックのリンク先を「#calendar」に設定するだけで、
ページのどこからでもXOカレンダーの位置までスムーズに移動できます。

---

まとめ

アンカーのメリット

• ページをまたがないので高速
• 下層ページへ飛ばさないのでユーザー離脱が減る
• スマホでスクロールしにくいときに便利

アンカーは、バナーのようにURLを入力するのではなく、そのページ内の印をつけたその場所に移動する機能です。
長文になってしまい、かなりスクロールしないと出てこない場合などに、アンカーを使うと便利です。