Wix Studio エディタ：セクショングリッドをカスタマイズする
読了時間：6分
Wix Studio エディタでは、セクションに（セクション全体を収容する）単一のセルを含む組み込みのグリッドがインストールされています。セクションをより多くのセルに分割することで、コンテンツにレスポンシブな構造を持たせることができ、さまざまなカスタマイズ可能なレイアウトから選択できます。
この記事では、以下の項目について説明します：
コンテナにセルを追加したい場合：
コンテナに高度な CSS グリッドを適用できます。
セクションにセルを追加する
セクションにセルを追加して、レスポンシブで構造化されたレイアウトを作成します。要素を別々のセルに配置することで、すべての画面で所定の位置に留まります。レイアウトを選択し、要素をセル内にに移動します。セルはいつでも分割したり、新しく追加することができます。
セクションにセルを追加する方法：
- エディタで該当するセクションを選択します。
- セクション上部の「空白」ドロップダウンをクリックします。
- 「行」、「列」、「コラージュ」など、レイアウトを選択します。
ヒント：レイアウトはドロップダウンからいつでも変更できます。要素は移動しません。 - （オプション）該当するセルに要素をドラッグします。
グリッド内のセルを入れ替える
セルを入れ替えて、セクショングリッドをすばやく効率的に再編成します。ドラッグアンドドロップを使用すると、2つのセルを瞬時に入れ替えることで、グリッド上で互いの位置を把握することができます。
セルを入れ替える方法：
- エディタで該当するセクションを選択します。
- 最初のセルを選択します。
- セルの上部にあるドラッグアイコン
を押したまま、セルを他のセルにドラッグします。
ヒント：「コンテンツを入れ替える」が表示された場合は、セルをドロップできることを意味します。
セクショングリッドをカスタマイズする
セルとグリッドを希望通りの見た目にします。既存のセルを分割・結合したり、新しいセルを追加したり、グリッド線をドラッグしてサイズを調整したりできます。ギャップを追加して、セル間にスペースを作成することもできます。
セクショングリッドをカスタマイズする方法：
- エディタで該当するセクションを選択します。
- グリッドのカスタマイズ方法を選択します：
既存のセルを分割する
または「縦に分割」
の該当するアイコンをクリックします。
新しいセルを追加する
セルを結合する
セルのサイズを変更する
セルの間にギャップを追加する
セルを削除する
をクリックします。注意：
現在、セルを複製することはできません。
高度な CSS グリッドに切り替える
高度な CSS グリッドに切り替えると、ブレイクポイントごとにレイアウトをより正確に制御できます。必要な行数と列数を選択し、レスポンシブ測定（例：fr、最小 / 最大、%）を使用してサイズを設定できます。
セクショングリッドから CSS グリッドに切り替える方法：
- エディタで該当するセクションを選択します。
- エディタ右上の「要素設定パネルを開く」矢印アイコン
をクリックします。 - 「レイアウト」までスクロールダウンします。
- 「高度な CSS グリッド」横の「切り替える」をクリックします。
- 「CSS グリッドに切り替える」をクリックします。
お役に立ちましたか？
|