header-logo
Wix の使用方法を学び、サイトとビジネスを構築する。
直感的な Wix 機能でサイトをデザインして管理する。
定期購入、プラン、請求を管理する。
ビジネスを運営し、サイト会員とつながる。
ドメインの購入、サイトへの接続と移管方法を学ぶ。
ビジネスとウェブプレゼンスを成長させるツールを入手する。
SEO とマーケティングツールで知名度を上げる。
より効率的な作業を支援する高度な機能を利用する。
解決策や既知の問題について確認し、問い合わせる。
placeholder-preview-image
コースとチュートリアルでスキルを習得する。
ウェブデザインやマーケティングなどのヒントを得る。
検索エンジンからのトラフィックを増やす方法について学ぶ。
フルスタックプラットフォームでカスタムサイトを構築する。
あなたの目標達成をサポートするエキスパートを見つけましょう。
placeholder-preview-image

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

4分
スタックは、縦または横の順序に関係なく、要素のグループを「ハグ」するフレックスボックスコンテナです。これにより、定義した間隔で要素が重ならないように整理されます。
また、負のマージンを使用して、要素を意図的に重ねることもできます。
この記事では、以下の項目について説明します:

スタックを適用する

  1. スタックに追加する要素をクリックします。
  2. Shift キーを押しながら、他のスタック要素を選択します。
  3. スタック」をクリックします。
  4. (オプション)要素間の縦線を長押しして、マージンを設定します。
スタックアイテム間の間隔をドラッグしてマージンを増やしています
ヒント:
マイナスのマージンを作成して、意図的に要素を重ねることもできます。
スタックのマージンを反対方向にドラッグして、画像とテキストの間に重なりを作成しています

スタックの方向を変更する

要素をスタックすると、要素の順序によって方向が自動的に決定されます。たとえば、要素が縦に配置されている場合、スタックは縦になります。
いずれの場合も、ドロップダウンを使用していつでも方向を切り替えることができます。これにより、要素が正しい順序になるよう、自動的に再配置されます。
横向きのスタックが縦向きになった例。要素は縦向きの順序になっています。

スタックを管理する

新しいコンテンツや要件に合わせて、いつでもスタックをカスタマイズできます。スタックにさらに要素を追加したり、ボタンをクリックするだけで移動させたり、不要になった要素を切り離したりします。

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

  1. 該当するスタックを選択します。
  2. 次に実行する内容を選択します:

スタックをデザインする

スタックは透明である必要はなく、ページ上でコンテンツが目立つようにデザインすることができます。背景色、枠線、影を追加したり、スタックの角の丸みを調整したりすることもできます。

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

  1. 該当するスタックを選択します。
  2. エディタ右上の「要素設定パネルを開く」矢印アイコン  をクリックします。
  3. デザイン」までスクロールダウンします。
  4. 利用可能なオプションを使用してスタックをデザインします:
    • 背景色と不透明度を設定します。
    • 枠線を追加してスタックを囲みます。
    • 角の丸みを選択します。
    • 影を有効にし、角度、位置、サイズなどの設定を管理します。
要素設定パネルとキャンバス上で選択されたスタックのスクリーンショットで、デザインオプションが表示されています。
スタックアイテム間の間隔をドラッグしてマージンを増やしています
横向きのスタックが縦向きになった例。要素は縦向きの順序になっています。
要素設定パネルとキャンバス上で選択されたスタックのスクリーンショットで、デザインオプションが表示されています。