--- title: "ページのレイアウトを変更する" slug: "change-the-layout-of-a-page" abstract: "仕切りと列・行の分割器を使ってページのレイアウトを変更してください。" --- # ページのレイアウトを変更する SXAレイアウトはレスポンシブグリッドレイアウトを使用します。使用するグリッドによって、ページは列に分割されます。行と列の分割器を使うか、グリッド設定を変更することで、ページ構造を決定し、利用可能なスペースを水平・垂直に分割できます。 SXAでページを作成する際、デフォルトではヘッダー、メイン、フッターの3つのプレースホルダーを含む基本レイアウトが含まれています。特に部分的なデザインを追加する場合は、スプリッターを使ってこの基本レイアウトを必要なレイアウトに変えることができます。 スプリッター(カラム)レンダリングを使ってページのレイアウトを変更するには: 1. 構造化したいページで、ツールボックスからスプリッター(列)レンダリングをページにドラッグします。 ![Drag the splitter to the page](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/93/sitecore-experience-accelerator/images/0363A571E0EA44B887715C5BB72216EC.png) 2. 浮動ツールバーを使ってグリッドの列を配置します。例えば、プレースホルダーを2つのグループに分けます:左側に4列、右側に8列です。 3. これで作成したプレースホルダーにレンダリングを追加できます。例えば、画像(再利用可能)レンダリングを1-1列にドラッグしてロゴを追加します。 ![Add renderings to the placeholder column](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/93/sitecore-experience-accelerator/images/2C1F749B2C7A4D3F8DF470CE9B218EA2.png) 4. 列のグループを異なる方法で分割するには、以下をクリックしてください: - **新しい列を追加**![86BF10D028E34F7BACF503821AD256D5.png](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/93/sitecore-experience-accelerator/images/86BF10D028E34F7BACF503821AD256D5.png):現在選択中の列の隣に列を追加します。 - **選択した列を右に移動させる**現在選択中の列を右に1ポジション移動させます。 - **選択した列を左に移動させる**現在選択中の列を左に1つ移動させます。 - **選択した列を削除してください**現在選択中の列を削除するために: 同様に、ページ上の行数を増減するには、エクスペリエンスエディターでスプリッター(行)レンダリングをページにドラッグし、浮動ツールバーを使います。さらにスプリッターを埋め込んで行を細分化したり、他のレンダリングを直接行に加えたりすることもできます。 ![Drag the splitter to the page](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/93/sitecore-experience-accelerator/images/21E775FB3C3E4DEB910D3DF8811278BD.png) 行を別の分割方法としては、以下をクリックしてください: - **新しい行を追加**![302EB1DA28A54911B6AA77BB1901E292.png](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/93/sitecore-experience-accelerator/images/302EB1DA28A54911B6AA77BB1901E292.png)現在選択中の列の隣に追加します。 - **選択した行を下に移動させる**現在選択中の列を右に1つ移動させます。 - **選択した行を上に移動させる**現在選択中の列を左に1ポジション移動させる。 - **選択した行を削除します**: で現在選択中の列を削除します。 また、レンダリングのグリッド設定を変更することでページのレイアウトを変更することもできます。