Wix アンカーリンクの設定方法を解説!【初心者でも3分で設定が完了】

Wix アンカーリンクの設定方法を解説!

アンカーリンクはよく使うけどWixではどのように設定すればいいのか分からない…そもそもアンカーリンクが分からない…こんな悩みを解決すべくこの記事は存在しています。

設定の仕方は読み進めていけば、あっという間に出来ちゃうのでさっそくWixでのアンカーリンクの設定方法を解説していきます!

目次

アンカーリンクとは?

ページ内の指定した箇所や別ページの指定した箇所に飛ばせるリンクのことです。
サイト制作をする上でよく使うので覚えておきましょう!

例として下記ボタンにアンカーリンクを設定し、ボタンを押すと指定した箇所に飛ぶようにしました。これがアンカーリンクです。
※指定箇所→「アンカーリンク設定方法」

この記事では

アンカー → 飛び先
アンカーリンク → 飛び元


という理解で読み進めてください。

アンカー設定方法 (飛び先)

ここからアンカーの設定をしていきます。

サイト編集 → 画面左にあるツールバー → 「+」の追加ボタン → メニュー・アンカー → アンカー をクリック。

アンカー追加

追加すると画像のようにアンカー設定の編集がでてきます。

アンカーの設定

アンカー名を入力し、リンクをクリックしたとき飛ばしたい位置を動画のようにドラッグして設定します。

位置を決める

これでアンカーの設定は完了です!

アンカーリンク設定方法 (飛び元)

続いて、アンカーリンクの設定をしていきます。

アンカーに飛ばしたいリンクの編集を開きます。
アンカーを選択し、飛ばしたいページ名と先ほど設定したアンカー名を選択します。

アンカーリンクの設定

これでアンカーリンクの設定も完了です!

挙動確認

ボタンにアンカーリンクを設定し、クリックすると指定した箇所に飛ぶことが確認できます。

アンカーリンク挙動

アンカーリンクの応用

最後にサイトでアンカーリンクを使う際にイメージしやすいよう、アンカーリンクの応用をご紹介いたします!
まずはこちらをご覧ください。

メニュー表の「ランチ」・「ディナー」・「ドリンク」のボタンを押すと、各メニューの内容に飛ぶ

画像のように飲食点のサイトで見かけるメニュー表の「ランチ」・「ディナー」・「ドリンク」のボタンにアンカーリンクを設定し、ボタンを押すと各メニュー内容に飛ぶという設定をしていきます。

参考 : 架空レストランHPのメニューページ

作り方はとても簡単で、たったの3ステップです!

STEP
アンカー設定 (飛び先)

「ランチ」・「ディナー」・「ドリンク」の各タイトルにアンカーを設定します。
アンカー名も任意で変更。

各タイトルにアンカーを設定します
STEP
アンカーリンク設定 (飛び元)

「ランチ」・「ディナー」・「ドリンク」の各ボタンにアンカーリンクを設定します。

ボタンのリンク設定
ボタンのリンク設定
リンク先を設定
リンク先を設定
STEP
調整

これで動画のようにボタンを押すと、各メニューの内容に飛ぶという設定ができました。
あとは飛ばしたい位置を微調整してみてください。

メニュー表アンカーリンク例

まとめ

今回はアンカーリンクの設定方法を解説しました。
拍子抜けするくらいの簡単な内容でしたね。ここまでこの記事を見た方ならすぐにアンカーリンクを設定することが出来るでしょう。
ここまで解説したアンカーリンクを使って、ぜひサイトの色々な箇所に飛んでみて下さい!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次
閉じる