今日はアンカーを説明していきたいと思います。
アンカーって・・・・なに？？
と思われる方もいると思うので、ChatGPTに聞いてみると、
「アンカーとはウェブページ内の特定の位置に直接リンクするためのHTMLの要素を指します。アンカーは一般的にページの特定のセクションや、特定のテキストブロックに直接ジャンプするために使用されます。アンカーは長いウェブページをナビゲートするのに便利なツールとなります。」
・・・
・・・・・と言葉で説明されてもイメージしにくいかもしれないので、
早速完成形をお見せします↓
このように、ボタンを押すと、特定の位置にジャンプするための設定をアンカーと言います。
今回は営業時間のボタンを押すと、その位置までジャンプするような設定をしました。
では、どのように設定したかを説明していきます。
１．飛ばしたい位置を設定する
パーツを追加から、「メニュー・アンカー」のアンカーを選択して、
営業時間のところに設定して、名前をテストアンカーと設定します。
２．ページ管理で作成したアンカーを設定する
ページ管理のページ追加から、セクションまたはアンカーを選択して、下記のように設定します。
ページを選択：ホーム（このページ）
ページの位置：テストアンカー
また、サイトメニューの三点メニューの名前を変更から、今回追加したアンカーを「営業時間」に変更しました。
これで完成です。
営業時間のマークがイカリマークになりました。
ーーーーーーーーーーーーーーーーーーーー
今回はアンカーを追加しましたが、セクションをそのままアンカーのように設定することもできます。
セクションを使用すると、そのセクションのトップにジャンプしますが、アンカーを使用すると、どの場所にもジャンプすることができます。