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

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

アンカーリンクとは？

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

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

この記事では

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

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

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

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

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

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

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

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

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

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

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

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

挙動確認

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

アンカーリンクの応用

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

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

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

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

STEP

アンカー設定 (飛び先)

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

STEP

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

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

STEP

調整

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

まとめ

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

Pickup記事

請求書作成サイト「MISOCA」の使い方【フリーランス初心者必見！】 フリーランスは一般の会社員とは違い、自分でやらなければいけない手続きが多いです。特にその一つが請求書の作成かと思います。請求書作成のオンラインサイトは「MISOC…

Pickup記事

初心者向けガイド！ChatWork（チャットワーク）の使い方 【基本的な機能をまるっと解説】 ビジネスシーンで多く利用されるChatWork（チャットワーク）ですが、全く使用したことがないと、何から始めて・どんな操作・どんな使い方をすれば良いかの判断が出来ま…

投稿 Wix アンカーリンクの設定方法を解説！【初心者でも3分で設定が完了】 は なまはげブログ に最初に表示されました。

Wixではリンク機能がいくつかあり、最初はどのリンクを使っていいかよく分かりません。
「文書ファイルってなに？」「ライトボックスってなに？」と思ったのは私だけではないはず。
実際にサイト作成をして、各リンク機能をまとめてみたのでご紹介します！

リンクとは？

クリックするとサイト内の別ページに遷移したり、外部サイトに移行したりなど
Webページにアクセスする際の入口の役割がリンクです。

リンクの機能なしでは理想のサイトは作成できないでしょう！
Wixではテキスト・ボタン・画像などにリンクを設定できます。

Wixのリンク機能

Wixのリンク機能には下記項目があります。

• なし
• ページ
• ウェブアドレス
• アンカー
• ページトップ/ボトム
• 文書ファイル
• メール送信
• 電話番号
• ライトボックス

それぞれ解説します。

なし

リンク機能をなしにできます。

ページ

ページを選択することでサイト内のページや外部のページへ遷移する設定ができます。
(サイト内のページを指定したい場合はここで設定)

ウェブアドレス

URLを指定することでサイト内のページや外部のページへ遷移する設定ができます。
(外部のサイトやリンクを設定したい場合はここで設定)

アンカー

アンカーリンクを設定する。
ページ内の指定した箇所や別ページの指定した箇所に飛ばしたい場合はここで設定。
→参考：Wix アンカーリンクの設定方法を解説！

ページトップ/ボトム

「トップ」に設定した場合は、ページ内の最上部へ移動
「ボトム」に設定した場合は、ページ内の最上部へ移動
(サイト内の上や下に移動させたい場合はここで設定)

文書ファイル

設定するとユーザーがファイルのダウンロードなどをできるようになります。
(ファイルをダウンロードさせたい場合などはここで設定)

リンクの作り方

文書ファイル　→　ファイルを選択　をクリック

アップロードからファイルをアップロードし、アップロードされたファイルを選択　→　ページに追加

作成したリンクテキストにクリックするとファイルがダウンロードできたことが確認できます。

メール送信

クリックすると設定したメールアドレスに送信します。
(メールアドレスのリンクはここで設定)
※公開サイトでないとリンクが機能しません。

電話番号

クリックすると設定した電話番号に発信します。
(電話番号のリンクはここで設定)

ライトボックス

クリックするとポップアップのような画面を表示できます。
(ポップアップ仕様のリンクはここで設定)

リンクの作り方

ライトボックス　→　ライトボックスの作成はこちら　をクリック

そうすると画像のようなツールバーが出てきます。
Welcome・ニュースレター購読・宣伝・お問い合わせの中のパーツから適したパーツを選択。

パーツが追加されると画面いっぱいにパーツが表示されます。
いったん画面上にある「モードを終了」をクリックします。

編集していたリンクの編集に戻り、ライトボックス　→　ライトボックスの作成はこちら　をクリック
すると追加したパーツが選択できるようになるので選択。これでポップアップの表示に設定完了です！

実際にクリックしてみるとポップアップのような画面が表示できることが確認できます。

まとめ

今回はWixのリンク機能の使い方を解説しました。
リンク機能の種類はいくつかあり、どのリンクを使っていいか私も当初はよく分かりませんでしたが、ここまで解説したリンク機能の内容を使えば、リンクの設定をする際も悩むことが少なくなりますし、サイトもブラッシュアップできると思います。

Pickup記事

請求書作成サイト「MISOCA」の使い方【フリーランス初心者必見！】 フリーランスは一般の会社員とは違い、自分でやらなければいけない手続きが多いです。特にその一つが請求書の作成かと思います。請求書作成のオンラインサイトは「MISOC…

Pickup記事

初心者向けガイド！ChatWork（チャットワーク）の使い方 【基本的な機能をまるっと解説】 ビジネスシーンで多く利用されるChatWork（チャットワーク）ですが、全く使用したことがないと、何から始めて・どんな操作・どんな使い方をすれば良いかの判断が出来ま…

投稿 Wix リンク機能の使い方まとめ！【ページ・アンカー・メール・電話番号など正しくリンクを設定する】 は なまはげブログ に最初に表示されました。