レイアウト – 列

最終更新日： 2024年11月14日
  • トピック：

作成対象：

  • 初心者
  • 中級
  • ユーザー

ステージ でページを複数の列に分割するには、Page Builder 列コンテンツタイプを使用します。 列を行、タブ、またはステージに直接追加すると、列グループは最初は同じ幅の 2 つの列に分割されます。 必要に応じて、列を追加または削除できます。 列のサイズを変更するには、2 つの列の間の境界線をドラッグします。 次の列の幅は、行、タブ、ステージ内の使用可能なスペースを埋めるように調整されます。 単一の列は、ステージまたはそのコンテナの全幅を拡張します。

列の追加

NOTE
Page Builder コンテンツに大きな変更を加える場合は、 管理者セッションの有効期間を増やして、作業中にセッションがタイムアウトしないようにすることをお勧めします。

2.4.5 リリースのアップデート

ページビルダーの機能が 2.4.5 リリースで更新され、ユーザーが個々の列の親コンテナとして Columns ​を使用できるようになりました。 この新しいコンテナでは、背景のプロパティもサポートされるようになり、列を一列に折り返す必要がなくなります。 これにより、不要なマークアップを減らし、ストアフロントの表示とエクスペリエンスをより詳細に制御できます。

グループ内の他の列の上または下に列をドラッグして積み重ねることで、Columns コンテナのレイアウトを変更できます。 これにより、開発者がカスタマイズする必要なしに達成できる、新しいさまざまなレイアウトの組み合わせが可能になります。

Columns コンテナを使用してページレイアウトを調整する方法のデモについては、このビデオをご覧ください。

列ツールボックス

各列には、コンテナの上にマウスポインターを置くと表示されるオプションのツールボックスがあります。

ツールアイコン説明
移動 移動アイコン 列とその内容を、他の列と相対的に別の位置に移動します。
（ラベル）列現在のコンテナを列として識別します。 列コンテナの上にマウスポインターを置くと、ツールボックスが表示されます。
設定 設定アイコン 列を編集ページを開きます。このページで、コンテナのプロパティを変更できます。
複製 複製アイコン 現在の列をコピーします。
削除 削除アイコン 現在の列とその内容を削除します。

柱通芯

グリッドを使用すると、コンテンツが一貫して列に配置され、デスクトップとモバイルデバイスの両方でページが正しくレンダリングされるようになります。 詳しくは、Page Builder 設定の 詳細なコンテンツツールの節を参照してください。

1 つの列を持つ行のグリッド分割

次の 2 列の例では、各列コンテナの上部のボーダーの括弧内の数値（6/12）は、各列のグリッド分割数と分割総数を示しています。 この場合、柱は、合計 12 のうち 6 つのグリッド単位の幅です。

2 列の行のグリッド分割

列を追加

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

    列のステージへのドラッグ

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

    2 つの等しい列

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

    コンテンツをグリッドに配置すると、コンテンツを一貫して配置でき、デスクトップとモバイルデバイスの両方でページを正しくレンダリングできます。 詳しくは、Page Builder 設定の 詳細なコンテンツツールの節を参照してください。

    2 列のグリッド分割

列のサイズ変更

  1. 2 つの列の境界線にポインタを合わせます。

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

    2 つの列の間のハイライト表示された境界線

  2. マウス ボタンを押したままにしてグリッドを表示し、グリッド上の新しい位置に境界線をドラッグします。

    両方の列の幅は、変更を反映して調整されます。 各列の新しい幅は、4/12 （4 out of 12）や 8/12 （8 out of 12）のように、ラベルの後に表示されます。

    サイズ変更された列

列の削除

  1. 削除する列の上にマウスポインターを置いてツールボックスを表示し、削除 （ 削除アイコン）アイコンを選択します。

    列ツールボックス

  2. 列にコンテンツが含まれている場合は、「OK」をクリックして確定します。

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

    列グループには、1 つの列（12/12）とグリッドが含まれるようになりました。 グリッドは列に対してのみ使用可能なので、この方法を使用してグリッドを表示できます。

    グリッド付き単一の列

  3. 列グループを使用して、残りの列を行またはステージの幅いっぱいに拡張する場合：

    • 列の上にマウスポインターを置いてツールボックスを表示し、「設定」（ 設定アイコン）アイコンを選択します。

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

      ゼロのパディングを使用

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

  4. ワークスペースの右上隅にある フルスクリーンを閉じる アイコン フルスクリーンアイコンを閉じる アイコンをクリックし、右上隅の「Save」をクリックします。

列設定の変更

  1. 列の上にマウスポインターを置いてツールボックスを表示し、「設定」（ 設定アイコン）アイコンを選択します。

    列ツールボックス

  2. 必要に応じて、Appearance の設定を変更します。

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

      オプション説明
      Full Height列は、コンテナの高さを最大にします。
      Top Aligned列はコンテナの一番上に配置されます。
      Centered列は、コンテナの中央に配置されます。
      Bottom Aligned列はコンテナの下部に配置されます。

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

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

  3. 列コンテンツの背景を変更します。

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

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

      ツール説明
      Uploadローカルコンピューターからギャラリーに画像ファイルをアップロードし、列の背景画像として適用します。
      Select from Gallery列の背景画像として、ギャラリーから既存の画像を選択するように求めるプロンプトを表示します。
      カメラアイコン 画像をカメラタイルにドラッグするか、ローカルファイルシステム内の画像を参照できます。

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

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

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

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

    • Background Attachment – この設定を変更して、スクロール ページに対する背景画像の移動方法を指定します。

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

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

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

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

      オプション説明
      Default現在のテーマのスタイル シートで指定されている線形の既定の設定を適用します。
      Leftコンテンツコンテナを列コンテナの左の境界線に沿って配置します。指定したパディングを使用できます。
      Centerコンテンツコンテナを列コンテナの中央に揃えます。指定したパディングに余裕があります。
      Rightコンテンツコンテナを列コンテナの右端に沿って配置します。指定したパディングに余裕があります。

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

      オプション説明
      Default関連付けられたスタイル シートで指定されている既定の罫線スタイルを適用します。
      Noneコンテナの境界線の表示はしません。
      Dottedコンテナの境界線は点線で表示されます。
      Dashedコンテナの境界線は破線で表示されます。
      Solidコンテナの境界線は実線で表示されます。
      Doubleコンテナの境界線は二重線で表示されます。
      Grooveコンテナの境界線は溝付き線で表示されます。
      Ridgeコンテナの境界線は、境界線として表示されます。
      Insetコンテナの境界線は、インセットされた線として表示されます。
      Outsetコンテナの境界線は、先頭行として表示されます。

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

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

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

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

    • 列の外側の余白と内側のパディングを指定する Margins and Padding の値をピクセル単位で入力します。

      対応する各値を列コンテナ図に入力します。

      コンテナ領域説明
      Marginsコンテナのすべての側面の外側の端に適用される空白スペースの量。 オプション：Top/Right/Bottom/Left
      Paddingコンテナのすべての側面の内側の端に適用される空白のスペースの量です。 オプション：Top/Right/Bottom/Left

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

前のページ行
次のページタブ

Commerce