Wix エディタ:ページ内メニューを追加・設定する
読了時間:5分
ページ内メニューを使用すると、訪問者がサイト内を移動するための便利で人目を引く方法です。ページ内メニューはページ上に浮かぶため、訪問者がサイト内を移動する際に常に表示されます。これらは、複数のセクションとアンカーを含む 1ページサイトで特に役立ちます。
![ページ内メニューを表示しているライブサイト。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/01/18/4fe928cc-a4a1-400f-8dd0-3d13f65c47a1/0dba476c-1dce-457f-9eeb-89260d193c0e.gif)
ステップ 1 | サイトにセクションとアンカーを設定する
メニューを設定する最初のステップは、サイト全体にアンカーとセクションを追加することです。セクションはページの構成要素です。コンテンツや情報を整理して表示するために使用します。
アンカーは、ギャラリーや動画など、セクションにない可能性のあるその他すべての情報をマークするために使用されます。セクション、アンカー、またはその両方を使用してサイトを構築できます。
ページにセクションを追加する方法:
- エディタ左側で「セクションを追加」
をクリックします。
- カテゴリーをクリックします。
- セクションを選択してページに追加します。
- セクションにマウスオーバーし、「その他のアクション」アイコン
をクリックします。
- 「セクション名を変更」をクリックします。
- セクション名を入力し、キーボードの Enter キーを押します。
![エディタでセクションパネルを追加しています。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2022/09/08/b2e54c53-f9ab-4abe-8d8f-ca5cfccc0592/75c34955-dac0-45a8-aa4b-1f907e13e730.png)
ページにアンカーを追加する方法:
- エディタ左側で「パーツを追加」
をクリックします。
- 「メニュー・アンカー」をクリックします。
- 「ページ内ナビゲーション」下のアンカーをクリックするか、ページ上の希望の位置までドラッグします。
- アンカーをクリックし、「名前を変更」をクリックします。
- 必要に応じて手順 1 - 4 を繰り返します。
![エディタ内の「パーツを追加」パネル。カーソルがアンカーを追加するオプションにマウスオーバーしています。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2022/09/08/5679f3ee-2564-4bd3-8836-2ad6a6d051c3/2fa91bbd-caf7-449b-b90a-be3604864583.png)
重要:
サイトの 1つのセグメントに複数のアンカーを追加することはおすすめしません。複数のアンカーを追加すると、スクリーンリーダーやキーボードを使用する訪問者がサイト内を移動する際に問題が発生する可能性があります。
ステップ 2 | レイヤーパネルでアンカーを配置する
サイトページにアンカーを配置したら、レイヤーパネルを開いてアンカーを配置します。アンカーは、関連するストリップまたはコンテンツのすぐ上に配置してください。これにより、訪問者がメニューでアンカーをクリックすると、正しいコンテンツに移動できるようになります。
セクションの順序を変更する場合:
エディタ内で該当するセクションをクリックし、「セクションを上に移動」アイコン
または「セクションを下に移動」アイコン
をクリックしてページ上でセクションの配置を変更します。セクションの並べ替えについての詳細はこちら
サイトアンカーを配置する方法:
- エディタの左下にある「レイヤー」アイコン
をクリックします。
- 各アンカーをドラッグして、所属しているストリップ / コンテンツの前に配置します。
![レイヤーパネルでアンカーが配置されている様子を示す GIF。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/07/29/10213c62-1e8f-4c50-8baf-86a05281d6ac/c8544f59-5e4a-478d-9abf-8227aa811998.gif)
ステップ 3 | ページ内メニューを追加する
サイトにアンカーまたはセクションを追加したら、アンカーメニューを追加して、アンカーを一覧表示します。メニューは画面に固定されるため、常にサイトに表示されます。これにより、訪問者の移動が簡単になり、必要に応じてメニューの場所をいつでも変更できます。
メニューを追加する方法:
- エディタ左側で「パーツを追加」
をクリックします。
- 「メニュー・アンカー」をクリックします。
- 「ページ内メニュー」をクリックします。
- メニューをクリックまたはドラッグして、ページに追加します。
- (オプション)アンカーメニューで「画面に固定」アイコン
をクリックして、ページ上の位置を変更します。
![エディタの「パーツを追加」パネル。カーソルがページ内メニューのデザインにマウスオーバーしています。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2022/09/08/b4bd646e-b095-48ec-ac98-7ce0de5f79c2/93dea1a0-8bab-4ab7-96e1-bea44365940d.png)
ステップ 4 | メニューアイテムを管理する
デフォルトでは、すべてのアンカーとセクションがページ内メニューに表示されます。必要に応じて、新しいアイテムを追加または削除することで、ページ内メニューのアンカーとセクションを管理できます。
ページ内メニューのアイテムを管理する方法:
- 「メニューを管理」をクリックし、アイテムの管理方法を選択します:
- アンカー名とセクション名の横にあるボックスをクリックして、メニューに表示または非表示にします。
- 「新しいアンカーを追加」をクリックして、新しいアンカーを作成し、メニューに表示します。
- 「新しいセクションを追加」をクリックして、新しいセクションを作成し、メニューに表示します。
![エディタ内のページ内メニューの管理パネル。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2022/09/08/53c754cf-2b97-43df-a9cd-b069ad4760a8/d91c2e1d-fff2-48c5-9a08-568c1fa44882.png)
注意:
- 新しいアンカーは自動的にページの最上部に追加されます。位置はドラッグして調整できます。
- アンカーやセクションは、ページに表示される順序(上から下)でページ内メニューに表示されます。ページ内メニュー内でアンカー / セクションの順序を変更することはできません。
- ページ内メニューはモバイルサイトでは表示されません。