Editor X：マルチステートボックスを使用する
読了時間：5分
Editor X は、代理店とフリーランサー向けの新しいプラットフォームである Wix Studio に移行します。Wix Studio について
マルチステートボックスを使用すると、同じコンテナボックス内で、状況に応じた異なるコンテンツを一度に 1つずつ表示させることができます。ボックスに含めるステート（状態）の数を選択し、隅々までデザインして、後でコードで使用する ID を作成します。
コードは、各ステートが表示されるタイミングを定義します。各ステートの条件を作成して自動的に表示させることも、訪問者が自身で操作したタイミングで表示させることも可能です。
始める前に：
- この機能にはいくつかのコードが必要なため、必ず開発モード（Velo by Wix）を有効にしてください。（英語）
- Editor X のマルチステートボックスは現在ベータ版です。只今、新しい機能の追加と、機能の全般的な改良を行っております。
ステップ 1 | マルチステートボックスを追加する
はじめに、「追加」パネルから直接マルチステートボックスをサイトに追加します。ボックスは、ページ上の希望する場所にドラッグすることができます。
こちらをクリックして手順を確認しましょう
をクリックします。
リピーター内でマルチステートを使用する：
マルチステートボックスをリピーターアイテムに追加すると、残りのアイテムも自動的に同じデザインで追加されます。これは、FAQ（よくある質問）や商品ギャラリーなど、アイテムを繰り返すリストに便利です。
ステップ 2 | ステートを追加してデザインする
ボックスを追加したら、表示されるステートをデザインします。ステートは、商品在庫などの小さなバッジ（例：「新商品」、「在庫なし」）に使用するか、または、ステートごとに異なるデザインを作成するかを選択してカスタマイズすることができます。
以下をクリックして詳細をご確認ください：
ステートを選択してデザインする
ステートを追加する
をクリックします。ステートの名前を変更する
ステートを削除する
ステートを並び替える
をクリックして上下にドラッグし、ステートの順序を変更します。
デザインのヒント：
ステートには異なる高さのプロパティが設定できるため、追加情報を表示することも可能です。ただし、ステートの幅については常に一定となります。
ステップ 3 | 開発モードでコードを追加する
最後に、マルチステートボックスを機能させるために、各ステートが表示されるタイミングを制御するコードを追加します。
マルチステートボックス用の Velo API で利用できる関数とイベントを使用して、ステートの表示とナビゲーションのルールを定義・実装することができます。
重要：
該当するコードを追加する際は、ステートの ID が正確に記述されていることを確認してください。（同じスペルと大文字であること）
次のステップ：
お役に立ちましたか？
|