Wix ホーム
ログイン/新規登録
少々お待ちください...

Wix Studio エディタ:セクショングリッドをカスタマイズする

読了時間:6分
Wix Studio エディタでは、セクションに(セクション全体を収容する)単一のセルを含む組み込みのグリッドがインストールされています。セクションをより多くのセルに分割することで、コンテンツにレスポンシブな構造を持たせることができ、さまざまなカスタマイズ可能なレイアウトから選択できます。
この記事では、以下の項目について説明します:
コンテナにセルを追加したい場合:
コンテナに高度な CSS グリッドを適用できます。

セクションにセルを追加する

セクションにセルを追加して、レスポンシブで構造化されたレイアウトを作成します。要素を別々のセルに配置することで、すべての画面で所定の位置に留まります。レイアウトを選択し、要素をセル内にに移動します。セルはいつでも分割したり、新しく追加することができます。

セクションにセルを追加する方法:

  1. エディタで該当するセクションを選択します。
  2. セクション上部の「空白」ドロップダウンをクリックします。
セクションを選択すると開くツールバーと、利用可能なレイアウトのドロップダウンのスクリーンショット。
  1. 」、「」、「コラージュ」など、レイアウトを選択します。
    ヒント:レイアウトはドロップダウンからいつでも変更できます。要素は移動しません。
  2. (オプション)該当するセルに要素をドラッグします。

グリッド内のセルを入れ替える

セルを入れ替えて、セクショングリッドをすばやく効率的に再編成します。ドラッグアンドドロップを使用すると、2つのセルを瞬時に入れ替えることで、グリッド上で互いの位置を把握することができます。

セルを入れ替える方法:

  1. エディタで該当するセクションを選択します。
  2. 最初のセルを選択します。
  3. セルの上部にあるドラッグアイコン  を押したまま、セルを他のセルにドラッグします。
    ヒント:「コンテンツを入れ替える」が表示された場合は、セルをドロップできることを意味します。
ドラッグアンドドロップを使用してセクショングリッドで 2つのセルを入れ替えています

セクショングリッドをカスタマイズする

セルとグリッドを希望通りの見た目にします。既存のセルを分割・結合したり、新しいセルを追加したり、グリッド線をドラッグしてサイズを調整したりできます。ギャップを追加して、セル間にスペースを作成することもできます。

セクショングリッドをカスタマイズする方法:

  1. エディタで該当するセクションを選択します。
  2. グリッドのカスタマイズ方法を選択します:
注意:
現在、セルを複製することはできません。

高度な CSS グリッドに切り替える

高度な CSS グリッドに切り替えると、ブレイクポイントごとにレイアウトをより正確に制御できます。必要な行数と列数を選択し、レスポンシブ測定(例:fr、最小 / 最大、%)を使用してサイズを設定できます。

セクショングリッドから CSS グリッドに切り替える方法:

  1. エディタで該当するセクションを選択します。
  2. エディタ右上の「要素設定パネルを開く」矢印アイコン  をクリックします。
  3. レイアウト」までスクロールダウンします。
  4. 高度な CSS グリッド」横の「切り替える」をクリックします。
  5. CSS グリッドに切り替える」をクリックします。
要素設定パネルで高度なグリッドに切り替えるオプションを示したスクリーンショット

お役に立ちましたか?

|
セクションを選択すると開くツールバーと、利用可能なレイアウトのドロップダウンのスクリーンショット。
ドラッグアンドドロップを使用してセクショングリッドで 2つのセルを入れ替えています
要素設定パネルで高度なグリッドに切り替えるオプションを示したスクリーンショット