Wix Harmony エディタ：タブを追加・カスタマイズする
11分
この記事内
- ページにタブを追加する
- タブのコンテンツをカスタマイズする
- タブを管理する
- タブをデザインする
- トランジションを追加する
タブを使用すると、関連するコンテンツを 1か所にグループ化することができ、訪問者がスクロールダウンしたりページを離れることなく、セクションを切り替えることができます。ページを整理して、訪問者が必要な情報に素早くアクセスできるようにしましょう。
ページにタブを追加する
ページがごちゃごちゃしないように、多くの情報を 1か所にまとめたい場合はタブを追加しましょう。好みのレイアウトを選択したら、サイトに合わせてカスタマイズします。
タブを追加する方法：
- エディタに移動します。
- エディタ左上の「＋追加」をクリックします。
- 左側で「ボックス」アイコン
をクリックします。 - 「タブ」をクリックします。
- 希望のデザインを選択し、ページにドラッグします。
ヒント：タブパーツを追加したら、デザインを完全にカスタマイズできます。
タブのコンテンツをカスタマイズする
タブパーツを追加したら、各タブの中にコンテンツを作成します。既存のデザイン内のパーツをクリックしてカスタマイズし、「パーツを追加」パネルからさらにコンテンツを追加します。
タブをカスタマイズする方法：
- エディタに移動します。
- 該当するタブパーツをクリックします。
- 左上のドロップダウンをクリックし、カスタマイズしたいタブを選択します。
- 実行する内容を選択します：
- 既存のパーツを編集する：タブ内のパーツをクリックし、アクションバーで利用可能なオプションを使用してカスタマイズします。
- さらにパーツを追加する：
- エディタ左上の「＋追加」をクリックします。
- 選択したパーツをタブにドラッグします。
- 「コンテナに添付」のメッセージが表示されたら、パーツをドロップします。
タブを管理する
「アイテムを管理」パネルを使用して、タブを最新の状態に保ちます。ここから、タブの順序を並べ替えたり、タブを追加・削除したり、効果的なタブを複製したり、内容と一致するよう各タブの名前を変更したりすることができます。
タブを管理する方法：
- エディタに移動します。
- 該当するタブパーツをクリックします。
- アクションバーで「アイテムを管理」をクリックします。
- 実行する内容を選択します：
タブの順序を変更する
新しいタブを追加する
タブを複製する
をクリックします。タブの名前を変更する
をクリックします。タブを削除する
タブをデザインする
タブの外観をサイトに適したものにします。タブパーツ全体の間隔を調整したり、タブメニューのスタイル（色、テキスト、枠線、レイアウトなど）を調整したり、タブコンテナをカスタマイズしたりして、統一感のあるデザインに仕上げることができます。タブメニューをスクロールするように設定している場合は、スクロールボタンのスタイルもそれに合わせて調整できます。
タブをデザインする方法：
- エディタに移動します。
- 該当するタブパーツをクリックします。
- アクションバーで「すべてのデザインオプション」アイコン
をクリックします。 - 「デザインする対象を選択」下で該当するオプションを選択し、パーツをデザインします：
タブ
：タブメニューの背景色を変更し、ブランドカラーまたはカスタムカラーを選択します。
：タブタイトルのデザインを制御して、フォント、太さ、サイズ、色、書式設定をカスタマイズします。テキストの背後に影を追加することもできます。
：タブメニューの枠線の色、太さ、スタイルを変更します。メニュー全体に枠線を追加するか、各メニューアイテムの周りに枠線を追加するか、またはその両方に枠線を追加することができます。
：スライダーをドラッグして、タブメニューの角の丸みを調整します。それぞれの角を個別にデザインする場合は、「個々の角を編集」アイコン 
をクリックします。
：タブメニューのコンテナに影を追加します。ぼかし、色、サイズなどを設定することができます。
：タブとタブメニューの間隔を調整し、コンテナのさまざまな側面に余白を追加して、コンテンツにゆとりを持たせます。
：タブメニューのアイテムの幅を設定し、サイト訪問者の画面が小さくてメニュー全体が表示できない場合の動作を決定します。さらに、サイトのテキストの方向をタブメニューに適用するかどうかを決定します。コンテンツコンテナ
：タブの枠線の色、太さ、スタイルを変更します。
をクリックします。スクロールボタン
：スクロールボタンに表示されるアイコンの色、サイズ、不透明度を設定します。
トランジションを追加する
トランジションエフェクトを追加して、訪問者がタブをスムーズに切り替えられるようにします。トランジションの種類（クロスフェードまたはスライド）を選択し、エフェクトの継続時間を設定します。
トランジションエフェクトを追加する方法：
- エディタに移動します。
- 該当するタブパーツをクリックします。
- アクションバーで「設定」アイコン
をクリックします。
- トランジションの種類を選択し、必要に応じて調整します：
- クロスフェード：訪問者がタブ間でクリックすると、タブがフェードイン・フェードアウトします。「トランジション継続時間」下のスライダーをドラッグして、トランジションが再生される時間を設定します。
- スライド：サイト訪問者がクリックするとタブがスライドします。
- トランジション継続時間：スライダーをドラッグして、トランジションが再生される時間を設定します。
- トランジション方向：タブが下からスライドするか、上からスライドするかを選択します。
