ページのレイアウトを変更する
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
SXAレイアウトはレスポンシブ グリッド レイアウトを使用します。使用するグリッドに応じて、ページは列に分割されます。行と列のスプリッターを使用するか、グリッド設定を変更することで、ページ構造を決定し、使用可能なスペースを水平方向と垂直方向に分割できます。
SXAでページを作成すると、デフォルトでは、ヘッダー、メイン、フッターの3つのプレースホルダーを含む基本レイアウトが含まれます。特にパーシャルデザインを追加する場合は、スプリッターを使用して、この基本的なレイアウトを必要なレイアウトに変えることができます。
スプリッター (列) レンダリングを使用してページのレイアウトを変更するには:
-
構造化するページで、ツールボックスから、スプリッター (列) レンダリングをページにドラッグします。
-
フローティングツールバーを使用して、グリッド列を分散します。たとえば、プレースホルダを2つのグループ (左側に4列、右側に8列) に分割します。
-
これで、作成したプレースホルダーにレンダリングを追加できます。たとえば、Image (Reusable) レンダリングをcolumn-1-1にドラッグして、ロゴを追加します。
-
列のグループを別々に分割するには、次のクリックを実行します。
-
Add a new column
: 現在選択されている列の隣に列を追加します。 -
Move the selected column to the right
: 現在選択されている列を1つ右に移動します。 -
Move the selected column to the left
: 現在選択されている列を1つ左に移動します。 -
Remove the selected column
: 現在選択されている列を削除します。
-
同様に、ページの行数を増減するには、エクスペリエンス エディターで、スプリッター (行) レンダリングをページにドラッグし、フローティング ツールバーを使用します。さらにスプリッターを埋め込んで行を細分化したり、他のレンダリングを行に直接追加したりすることもできます。
行を異なる方法で分割するには、次のクリックを実行します。
-
Add a new row
: 現在選択されている列の隣に列を追加します。 -
Move the selected row down
: 現在選択されている列を1つ右に移動します。 -
Move the selected row up
: 現在選択されている列を1つ左に移動します。 -
Remove the selected row
: 現在選択されている列を削除します。
また、レンダリングのグリッド設定を変更することで、ページのレイアウトを変更することもできます。