レイアウト – 列

Layout​の下のPage Builder パネルで、Column​をステージにドラッグします。

{width="600" modal="regular"}

列グループは、同じ幅の2つの列に分割されました。 各列はコンテンツ用の個別のコンテナであり、独自のツールボックスオプションのセットがあります。

{width="600" modal="regular"}

列グループの左上隅にある​グリッド ツール （ ）をクリックし、必要に応じてグリッドサイズを調整します。

コンテンツをグリッドに配置することで、コンテンツを一貫して調整し、デスクトップとモバイルデバイスの両方でページを正しくレンダリングすることができます。 詳しくは、Page Builder設定の「高度なコンテンツツール ​」セクションを参照してください。

{width="600" modal="regular"}

2つの列の境界線にカーソルを合わせます。

境界線がハイライト表示され、選択した列のツールボックスが表示されます。

{width="600" modal="regular"}

マウスボタンを押しながらグリッドを表示し、境界線をグリッドの新しい位置にドラッグします。

両方の列の幅は、変更を反映するように調整されます。 各列の新しい幅は、ラベルの後に表示されます。例えば、4/12 （12人中4人）、8/12 （12人中8人）などです。

{width="600" modal="regular"}

削除する列にカーソルを合わせてツールボックスを表示し、削除 （ {width="20"}）アイコンを選択します。

{width="600" modal="regular"}

列にコンテンツが含まれている場合は、OK​をクリックして確認します。

今後のプロセスを高速化するには、Do not show this again チェックボックスを選択して、確認ステップをスキップします。

列グループに1つの列（12/12）とグリッドが追加されました。 グリッドは列でのみ使用できるため、この手法を使用してグリッドを表示できます。

{width="600" modal="regular"}

列グループで残りの列を行またはステージの全幅に拡張する場合は、次の手順を実行します。

• 列にカーソルを合わせてツールボックスを表示し、設定 （ {width="20"}）アイコンを選択します。

• Advanced​セクションまでスクロールし、4つの​ Padding ​値をすべて0に設定します。

  {width="600" modal="regular"}

• 右上隅の「Save」をクリックして、Edit Column​ページを閉じます。

ワークスペースの右上隅にある​フルスクリーンを閉じる （ {width="20"}）アイコンをクリックし、右上隅にある​ Save ​をクリックします。

列にカーソルを合わせてツールボックスを表示し、設定 （ {width="20"}）アイコンを選択します。

{width="600" modal="regular"}

必要に応じて​ Appearance ​設定を変更します。

• コンテナに対する列の位置を決定する整列設定を選択します。

  table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
  オプション	説明
  Full Height	列は、コンテナの高さを完全に拡張します。
  Top Aligned	列は、コンテナの上部に配置されます。
  Centered	の列は、コンテナの中央に配置されます。
  Bottom Aligned	列はコンテナの下部に配置されます。

• 必要に応じて、列の​ Minimum Height ​を入力します。 例えば、背景画像の高さに合わせて最小の高さを設定することができます。

• 最小高さを設定する場合は、Vertical Alignment​を設定して、列（Top、Center、またはBottom）に追加されるコンテンツコンテナの位置を制御します。

列の内容の背景を変更します。

• Background Color – 色見本を選択するか、カラーピッカーをクリックするか、有効なカラー名または同等の16進数値を入力して、カラーを指定します。 この設定により、列の背景色が決まります。

• Background Image – 必要に応じて、提供されたツールを使用して、列に適用する背景画像を選択します。

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  ツール	説明
  Upload	ローカルコンピューターからギャラリーに画像ファイルをアップロードし、それを列の背景画像として適用します。
  Select from Gallery	ギャラリーの既存の画像を列の背景画像として選択するよう求めるプロンプトが表示されます。
  {width="25"}	画像をカメラタイルにドラッグするか、ローカルファイルシステムで画像を参照できます。

• Background Mobile Image – 必要に応じて、同じツールを使用して、モバイルデバイスでの表示に使用する異なる背景画像を選択します。

• Background Size – この設定を変更して、列の幅に対する背景画像の拡大縮小の方法を決定します。

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  オプション	説明
  Cover	背景画像は、列の幅をカバーしています。
  Contain	背景画像は、コンテンツ領域の幅に制限されます。
  Auto	現在のテーマのスタイルシートで指定されているデフォルトの背景サイズを適用します。

• Background Position – この設定を変更して、列に対する画像のアンカーポイントを決定します。 オプション：Top Left、Top Center、Top Right、Center Left、Center、Center Right、Bottom Left、Bottom Center、またはBottom Right

• Background Attachment – この設定を変更して、スクロール ページに対して背景画像がどのように移動するかを決定します。

  table 0-row-2 1-row-2 2-row-2 layout-auto
  オプション	説明
  Scroll	背景画像は、ページがスクロールするにつれて下に移動するように同期されます。
  Fixed	（モバイルでは利用できません） コンテナが画像をスクロールしても背景の画像が移動せず、指定した背景位置に固定されます。

• Background Repeat – 背景画像を繰り返してスペースを塗りつぶす場合は、この設定Yesを変更します。

必要に応じて​ Advanced ​設定を更新します。

• 列に追加されるコンテンツコンテナの水平方向の配置を制御するには、Alignment​を選択します。

  table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
  オプション	説明
  Default	現在のテーマのスタイルシートで指定されている整列のデフォルト設定を適用します。
  Left	コンテンツコンテナを列コンテナの左端に沿って、指定された任意のパディングを許可して整列させます。
  Center	コンテンツコンテナを列コンテナの中央に配置し、指定されたパディングを許可します。
  Right	コンテンツコンテナを列コンテナの右端に沿って、指定された任意のパディングを許可して整列させます。

• 列コンテナのすべての4つの側面に適用される​Border スタイルを設定します。

  table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto
  オプション	説明
  Default	関連付けられたスタイルシートで指定されたデフォルトの境界線スタイルを適用します。
  None	コンテナの境界を表示しません。
  Dotted	コンテナの境界線が点線で表示されます。
  Dashed	コンテナの境界線が破線で表示されます。
  Solid	コンテナの境界線が実線として表示されます。
  Double	コンテナの境界線が2行で表示されます。
  Groove	コンテナの境界線は、溝付き線として表示されます。
  Ridge	コンテナの境界線は、うね付きの線として表示されます。
  Inset	コンテナの境界線がインセット線として表示されます。
  Outset	コンテナの境界線がアウトセット線として表示されます。

• None以外の境界線スタイルを設定する場合は、境界線の表示オプションを完了します。

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  オプション	説明
  Border Color	色見本を選択するか、カラーピッカーをクリックするか、有効なカラー名または同等の16進数値を入力して、カラーを指定します。
  Border Width	境界線の幅のピクセル数を入力します。
  Border Radius	境界線の各隅を丸めるために使用する半径のサイズを定義するピクセル数を入力します。

• （オプション）列コンテナに適用する現在のスタイルシートから​ CSS classes ​の名前を指定します。

  複数のクラス名はスペースで区切ります。

• Margins and Padding​の値をピクセル単位で入力して、列の外側の余白と内側の余白を指定します。

  列コンテナダイアグラムに対応する各値を入力します。

  table 0-row-2 1-row-2 2-row-2 layout-auto
  コンテナ領域	説明
  Margins	コンテナのすべての側面の外側のエッジに適用される空白スペースの量。 オプション：Top / Right / Bottom / Left
  Padding	コンテナのすべての側面の内側エッジに適用される空白スペースの量。 オプション：Top / Right / Bottom / Left

完了したら、Save​をクリックして設定を適用し、Page Builder ワークスペースに戻ります。