2列および3列のレイアウトの使用

複数列のセクション・レイアウトを使用して、レイアウトに追加するコンポーネントの間隔や配置が自動的に決定されるようにすることができます。

1. 編集するページに移動し、が「編集」に設定されていることを確認します。
2. ページにレイアウトを追加します。
3. 他のコンテンツをセクション・レイアウトに配置するには、コンテンツをレイアウトにドラッグ・アンド・ドロップします。

   レイアウトが、実線の枠線および「アイテムの追加」と表示されるバナーで強調表示されます。
   
   図GUID-01FF01BB-7DB2-47CE-BEC2-EF46C1A8056F-default.pngの説明
   

   レイアウトにさらにアイテムを追加でき、レイアウトによってそれらが適宜フォーマットされます。他のセクション・レイアウトを追加して、高度なレイアウトを作成したり、コンポーネント・グループを追加することもできます。

   イメージ・コンポーネントがプレースホルダになった2列レイアウトを次に示します。

   
   
   図GUID-E47530CF-CB6F-4E41-ADC2-8BE0DE42F4CA-default.pngの説明
   

   アイテムを追加すると、そのアイテムは追加の行に表示されます。それぞれに最大2つのアイテムが入ります。

4. コンポーネントとその外観を編集するには、そのコンポーネントのメニュー・アイコンをクリックして、「設定」を選択します。
5. 「一般」タブを使用して、レイアウト内の個々のコンポーネントの設定を変更します。
   コンポーネント名をクリックして、そのコンポーネントの設定を表示します。
6. 「背景」タブを使用して、レイアウトの背景設定を変更します。
7. 「カスタム設定」を選択して、表示されるコンテンツの追加のデフォルトを設定します。

   • 最初の列の幅(%): 列の幅を、レイアウトに使用可能な領域のパーセントで指定します。

   • 2番目の列の幅(%): 列の幅を、レイアウトに使用可能な領域のパーセントで指定します。

   • 3番目の列の幅(%): 列の幅を、レイアウトに使用可能な領域のパーセントで指定します。

   • レスポンシブ・ブレークポイント(ピクセル): 使用可能な表示サイズが変わるとコンテンツが自動的に再フォーマットされるレスポンシブ・ページ設計の場合、セクション・レイアウトが標準の2列レイアウトと次で指定する「レスポンシブ動作」オプションの間で切り替わる幅(ピクセル)を指定します。

   • レスポンシブ動作: 使用可能な表示サイズがレスポンシブ・ブレークポイントの値より小さいときにレイアウトをどのように変更するかを選択します。

     • アクションなし: レイアウトの動作を調整しません。

     • 列の積上げ: 1列目のすべてのアイテム、2列目のすべてのアイテム、それ以降の列のアイテムの順に、アイテムを上から下に1つの列内に配置します。

     • 最初の列を非表示: 他の列の領域が大きくなるように、最初の列のコンテンツを非表示にします。

     • 2番目の列を非表示: 他の列の領域が大きくなるように、2番目の列のコンテンツを非表示にします。

     • 3番目の列を非表示: 他の列の領域が大きくなるように、3番目の列のコンテンツを非表示にします。

     • 両方の列を非表示: レイアウト内のすべてのコンテンツを非表示にします。

     • 2番目の列を最初の列の下に移動: 1列目のすべてのアイテム、2列目のすべてのアイテムの順に、アイテムを1つの列内に配置します。

     • 最初の列を2番目の列の下に移動: 2列目のすべてのアイテム、1列目のすべてのアイテムの順に、アイテムを1つの列内に配置します。