Wix エディタ:ページ内メニューを管理・カスタマイズする

読了時間:4分
ページ内メニューは、訪問者がサイト内の重要なコンテンツに簡単に移動できるようにするフローティングメニューです。 ページ内メニューを追加・設定した後、デザインとレイアウトをカスタマイズして希望の見た目にしましょう。
ページ内メニューの動作が表示された GIF
この記事では、下記の項目について説明します:

メニューアイテムを管理する

ページ内メニューに表示するものを選択します。アンカーを表示または非表示にしたり、新しいアンカーを追加したりできます。

アイテムを管理する方法:

  1. エディタ内のページ内メニューをクリックします。
  2. メニューを管理」をクリックします。
  3. 実行する内容を選択します:
    • アンカー名とセクション名の横にあるボックスをクリックして、メニューに表示または非表示にします。
    • 新しいアンカーを追加」をクリックして、新しいアンカーを作成し、メニューに表示します。
    • 新しいセクションを追加」をクリックして、新しいセクションを作成し、メニューに表示します。
エディタ内のページ内メニューの管理パネル。
注意:
アンカーやセクションは、ページに表示される順序(上から下)でページ内メニューに表示されます。ページ内メニュー内でアンカーとセクションの順序を変更することはできません。

メニューデザインをカスタマイズする

サイトに追加できる、クールで洗練されたページ内メニュープリセットをたくさん用意しています。メニューを追加したら、希望する見た目や美的感覚に合わせてさらにデザインすることができます。背景色、メニューアイテム、間隔を調整しましょう。

メニューデザインをカスタマイズする方法:

  1. エディタ内のページ内メニューをクリックします。
  2. デザインを変更」アイコン  をクリックします。
  3. デザインをカスタマイズ」をクリックします。
  4. タブからオプションをクリックして、さまざまな状態のメニューをカスタマイズします:
    • 通常時:訪問者がアイテムをクリックする前のメニューの表示方法。
    • クリック:訪問者がアイテムをクリックしたときのメニューの表示方法。
  5. 次のオプションを使用してメニューを編集します:
    • 不透明度・色:カラーボックスをクリックしてボタンとテキストの色を選択し、スライダーをドラッグして不透明度を調整します。
    • テキスト:次のオプションを使用してテキストをカスタマイズします:
      • スタイル:ドロップダウンメニューからテキストのスタイルを選択します。
      • フォント:ドロップダウンメニューからテキストのフォントを選択します。
      • フォントサイズ:スライダーをドラッグしてフォントのサイズを調整します。
      • 書式設定:テキストに斜体または太字の効果を追加します。
    • 間隔:スライダーをドラッグして、テキストの位置を調整します。
ページ内メニューのデザインパネル。 カーソルが斜体のボタンに乗っている。

メニューのレイアウトを選択する

メニューのデザインをカスタマイズできるだけでなく、サイトの配置に合わせてレイアウトを選択することもできます。

メニューのレイアウトを選択する方法:

  1. エディタ内のページ内メニューをクリックします。
  2. レイアウト」アイコン  をクリックします。
  3. 次に実行する内容を選択します:
    • テキスト配置:テキストをメニューコンテナの左揃え、右揃え、中央揃えのいずれかにします。
    • サブメニューの矢印の位置を選択:サブメニューの矢印をアイテムテキストの左揃えにするか右揃えにするかを選択します。
テキスト配置と矢印ボタンのオプションが表示された、レイアウトパネルのスクリーンショット。

ページ内メニューの位置を変更する

ページ内メニューはフローティングメニューであるため、ページ上のどこにいても、サイト訪問者に常に表示されます。メニューの位置とページの端からの距離を簡単に変更できるので、レイアウトに合わせてメニューを表示できます。

メニューの位置を変更する方法:

  1. ページ内でメニューをクリックします。
  2. 固定された画面」アイコン  をクリックします。
  3. 固定位置から新しい位置を選択します。
  4. (オプション)スライダーをドラッグして、横の位置または縦の位置を調整します。
エディタの「画面に固定」パネル。カーソルが縦の位置スライダーにマウスオーバーしています。
ページ内メニューをフローティング表示したくない場合:
画面に固定設定パネルからメニューの固定を解除できます。これは、メニューが所定の位置に留まり、訪問者がメニューからスクロールして離れるとメニューが表示されないことを意味します。

お役に立ちましたか?

|