アンカーリンクはよく使うけどWixではどのように設定すればいいのか分からない…そもそもアンカーリンクが分からない…こんな悩みを解決すべくこの記事は存在しています。
設定の仕方は読み進めていけば、あっという間に出来ちゃうのでさっそくWixでのアンカーリンクの設定方法を解説していきます!
アンカーリンクとは?
ページ内の指定した箇所や別ページの指定した箇所に飛ばせるリンクのことです。
サイト制作をする上でよく使うので覚えておきましょう!
例として下記ボタンにアンカーリンクを設定し、ボタンを押すと指定した箇所に飛ぶようにしました。これがアンカーリンクです。
※指定箇所→「アンカーリンク設定方法」
この記事では
アンカー → 飛び先
アンカーリンク → 飛び元
という理解で読み進めてください。
アンカー設定方法 (飛び先)
ここからアンカーの設定をしていきます。
サイト編集 → 画面左にあるツールバー → 「+」の追加ボタン → メニュー・アンカー → アンカー をクリック。
追加すると画像のようにアンカー設定の編集がでてきます。
アンカー名を入力し、リンクをクリックしたとき飛ばしたい位置を動画のようにドラッグして設定します。
これでアンカーの設定は完了です!
アンカーリンク設定方法 (飛び元)
続いて、アンカーリンクの設定をしていきます。
アンカーに飛ばしたいリンクの編集を開きます。
アンカーを選択し、飛ばしたいページ名と先ほど設定したアンカー名を選択します。
これでアンカーリンクの設定も完了です!
挙動確認
ボタンにアンカーリンクを設定し、クリックすると指定した箇所に飛ぶことが確認できます。
アンカーリンクの応用
最後にサイトでアンカーリンクを使う際にイメージしやすいよう、アンカーリンクの応用をご紹介いたします!
まずはこちらをご覧ください。
画像のように飲食点のサイトで見かけるメニュー表の「ランチ」・「ディナー」・「ドリンク」のボタンにアンカーリンクを設定し、ボタンを押すと各メニュー内容に飛ぶという設定をしていきます。
作り方はとても簡単で、たったの3ステップです!
「ランチ」・「ディナー」・「ドリンク」の各タイトルにアンカーを設定します。
アンカー名も任意で変更。
「ランチ」・「ディナー」・「ドリンク」の各ボタンにアンカーリンクを設定します。
これで動画のようにボタンを押すと、各メニューの内容に飛ぶという設定ができました。
あとは飛ばしたい位置を微調整してみてください。
まとめ
今回はアンカーリンクの設定方法を解説しました。
拍子抜けするくらいの簡単な内容でしたね。ここまでこの記事を見た方ならすぐにアンカーリンクを設定することが出来るでしょう。
ここまで解説したアンカーリンクを使って、ぜひサイトの色々な箇所に飛んでみて下さい!