Wix ヘルプ

Wix Studio Two エディタ:要素をスタックする

5分

この記事では、2026年11月にリリースされた新しい Wix Studio Two エディタについて説明します。Wix Studio エディタまたは Wix Studio Two エディタのどちらを使用しているか不明な場合は、こちらで詳細を確認してください。

スタックを使用すると、要素をグループ化して、それらを 1つのユニットとして配置することができます。画像横のテキストなど横並びのコンテンツや、サイトの各画面サイズに応じてレイアウトを維持する必要がある動的コンテンツなどに特に便利です。


スタックを作成する

スタックを作成して関連する要素をまとめ、グループとして間隔を制御することができます。これは、要素を横に並べて配置し、レイアウトを統一したい場合に特に役立ちます。

スタックを作成する方法:

  1. エディタに移動します。

  2. スタックしたい最初の要素を選択します。

  3. Shift キーを押しながら、スタックしたい他の要素をクリックします。

  4. アクションバーで「その他のアクション」アイコン  をクリックします。

  5. 「スタックする」にマウスオーバーし、「縦」または「横」を選択します。

「その他のアクション」メニューが開き、「スタックする」のサブメニューで「縦」と「横」が表示されている様子を示したスクリーンショット。
参考:

要素が隣り合って配置され、同じ軸に沿って配置されている場合、キャンバスに「スタック」アイコン  が表示されます。マウスオーバーして提案された要素を確認し、クリックしてスタックを作成します。


スタックを管理する

デザインの変更に伴い、いつでも要素を追加したり、既存の要素を並べ替えたり、スタックからアイテムを削除したり、すべてのスタックを解除してレイアウトを更新したりすることができます。

既存のスタックを管理する方法:

  1. エディタに移動します。

  2. 該当するスタックをクリックします。

  3. 実行する内容を選択します:


スタックレイアウトを調整する

スタックのレイアウトを設定して、要素の配置や間隔を制御します。デザインの見た目を変更したり、コンテンツを変更したりするたびに、これらの設定を調整します。

スタックレイアウトを調整する方法:

  1. エディタに移動します。

  2. 該当する要素を選択します。

  3. エディタ右上の「要素設定パネルを開く」アイコン  をクリックします。

Wix Studio Two エディタで、「要素設定パネル」を開く矢印をクリックしている様子を示したスクリーンショット。
  1. (まだ開いていない場合)「デザイン」タブをクリックします。

  2. 「レイアウト」までスクロールダウンします。

  3. 実行する内容を選択します:

    • スタックレイアウト:横方向のスタックと縦方向のスタックを切り替えます。これにより、新しいレイアウトに合わせて要素が自動的に再配置されます。

    • アイテムの間隔:スタック要素(スタックアイテム)間の間隔を均等にします。
      ヒント:キャンバス上で手動で間隔を調整して不均一になった場合、要素設定パネルの設定横に「mix」と表示されます。値を入力すると、間隔が統一されます。

    • アイテムの配置:スタックのバウンディングボックス内の要素を配置します。縦向きにスタックした場合は、左、中央、右に配置するか、全幅に引き延ばします。横向きにスタックした場合は、上、中央、または下に配置します。

    • (横スタックのみ)方向:要素を左から右に表示するか、その逆に表示するかを選択します。

スタックの要素設定パネルの「レイアウト」セクションに、「スタックレイアウト」、「アイテムの間隔」、「アイテムの配置」が表示されている様子を示したスクリーンショット

スタックをデザインする

枠線、角、影を追加して、スタックを視覚的なコンテナにします。これにより、グループ化された要素をページ上で目立たせることができます。

スタックをデザインする方法:

  1. エディタに移動します。

  2. 該当するスタックをクリックします。

  3. アクションバーで「すべてのデザインオプション」アイコン  をクリックします。

  4. (要素設定パネルで)利用可能なオプションを使用して、スタックをデザインします:

    • 枠線:スタックを目立たせるための枠線を追加し、色、太さ、スタイルを変更します。「個々の枠線を編集」アイコン  をクリックし、スタックの異なる側面に異なる枠線を適用することができます。

    • 角:角の丸みを調整します。

    • 影:影を追加して、スタックの背後に奥行きを出します。

    • 塗りつぶし:スタックの背景(例:単色、グラデーション、画像、動画)を選択し、不透明度を設定します。

「要素設定パネル」の「デザイン」タブで、「枠線」セクションが開き、枠線が適用されているスクリーンショット