Wix エディタ:モバイルサイトのタブを調整・カスタマイズする

読了時間:10分
タブは、コンテンツを整理および分類するための高度な方法です。デスクトップで追加したタブは自動的にモバイルサイトに表示され、必要に応じて小さな画面に合わせて調整できます。
この記事では、以下の項目について説明します:
注意:
タブはデスクトップパーツであるため、モバイル専用のタブを追加することはできません。

モバイルサイトでタブを非表示にする

モバイルサイトにタブを表示したくない場合は、簡単に非表示にすることができます。タブパーツを非表示にした後、「モバイル上で非表示」パネルからアクセスして再度表示することができます。

モバイルサイトでタブを非表示にする方法:

  1. モバイルエディタを開きます。
  2. タブパーツをクリックします。
  3. 非表示にする」アイコン  をクリックします。

モバイルでタブのレイアウトを調整する

小さな画面に合うように、モバイルサイトのタブのレイアウトを編集します。タブの間隔と方向を変更したり、トップメニューに収まらないタブをモバイル訪問者に表示する方法を選択したりできます。

モバイルサイトでタブのレイアウトを調整する方法:

  1. モバイルエディタでタブパーツをクリックします。
  2. レイアウト」アイコン  をクリックします。
  3. タブのレイアウトを調整する方法を選択します:
    • タブメニューレイアウト:タブメニューをどのくらい引き伸ばすかを選択します:
      • 均等割付:メニューはボックスの幅に収まりません。メニューアイテムをボックスの左揃え、中央揃え、または右揃えにするかを選択できます。
      • ストレッチ:メニューはボックス全体の幅に収まります。メニューのコンテンツは、ボックスの左揃え、中央揃え、または右揃えにできます。
    • タブの間隔:タブアイテム間の間隔を調整します。
    • タブとボックスの間隔:メニューとコンテンツボックス間の間隔を調整します。
    • 横方向の余白:メニューアイテムの左右の余白を調整します。
    • 縦方向の余白:アイテムの上下の余白を調整します。
    • 収まらないタブの表示方法:メニューに収まらないアイテムの表示方法を選択します。
      • スクロール:訪問者はメニューをスクロールしてすべてのアイテムを表示できます。
      • 折り返し:すべてのアイテムを表示するために別の行が追加されます。スライダーを使用して、行間の間隔を調整します。
    • アイテムの表示順:トップメニューのアイテムを左から右に、または右から左に表示します。

モバイルでタブのデザインをカスタマイズする

モバイルサイトのデザインに合わせてタブパーツのデザインを変更します。モバイルエディタで行う変更はデスクトップサイトには反映されないため、テキストや塗りつぶしの色などのオプションを変更して、モバイルサイト訪問者に合わせてカスタマイズされたエクスペリエンスを作成できます。

タブのデザインを編集する方法:

  1. エディタでパーツをクリックします。
  2. デザインを変更」アイコン  をクリックします。
  3. 何をデザインしたいですか?」下でオプションを選択し、利用可能なオプションを使用してカスタマイズします:

お役に立ちましたか?