---
title: "ページのレイアウトを変更する"
slug: "change-the-layout-of-a-page-973887"
abstract: "カラムスプリッターと行スプリッターコンポーネントを使ってページのレイアウトを変更する方法。"
---
# ページのレイアウトを変更する

> !注このトピックで説明されている手順はエクスペリエンスエディターを使用してください。

レイアウトはレスポンシブグリッドを使ってページを列に分割します。Row SplitterやColumn Splitterコンポーネントを使って、ページ構造をさらに定義し、利用可能なスペースを水平・縦に分割できます。

ページを作成すると、デフォルトで3つのプレースホルダー(ヘッダー、メイン、フッター)を含む基本レイアウトが含まれます。これらのプレースホルダーにカラムスプリッターや行スプリッターのコンポーネントを追加できます。最後に、新たに追加されたカラムや行にコンポーネントを追加します。

また、コンポーネントのグリッド設定を変更することでページのレイアウトを変更することもできます。

## カラムスプリッターコンポーネントを追加する

カラムスプリッターコンポーネントは、ページをカラムに分割することでページに構造を加えることができます。カラムスプリッターコンポーネントは他のコンポーネントのプレースホルダーであり、単独でコンテンツを保持することはできません。例えば、特定のカラムにテキストを追加するには、まずそのカラムにリッチテキストコンポーネントを追加する必要があります。

> !注このトピックでは、エクスペリエンスエディターのカラムスプリッターコンポーネントの使い方を説明します。ただし、Pagesでもこのコンポーネントを使うことができます。

カラムスプリッターコンポーネントをページに追加するには:

1.  ページを開き、次にツールボックスを開きます。
    
2.  **ページ構造**セクションから、カ**ラムスプリッター**コンポーネントを追加したいプレースホルダーにドラッグします。ドラッグしている間、プレースホルダーが青色に変わります。
    
    または、**ホーム** タブで **コンポーネント** をクリックして「 **レンダリングの選択** 」ダイアログボックスを開きます。
    
3.  フローティングツールバーで ![headless-site-add-column-row-icon.png](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/103/sitecore-experience-accelerator/images/headless-site-add-column-row-icon.png) ス **プリッターの最後に新しい列を追加**してください。追加した列を見るには、ツールバーの下のどこかをクリックしてください。
    
    ![The Column Splitter toolbar](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/103/sitecore-experience-accelerator/images/headless-site-column-splitter-toolbar.png)
    
4.  列を追加または並べ替えるには、新しいツールバーで以下をクリックしてください:
    
    -   **新しい列を追加します**\- 現在選択中の列の隣に列を追加します。
    -   **選択した列を右に移動させます**\- 現在選択されている列を右に1つ移動させるため。
    -   **選択した列を左に移動させます**\- 現在選択中の列を左に1つ移動します。
    -   **選択した列を削除します**\- 現在選択中の列を削除します。
5.  コンポーネントをカラムに追加するには、ツールバーからコンポーネントをドラッグするか、カラムを選択してから「 **ここに追加**」をクリックしてください。例えば、ロゴを追加するために画像コンポーネントを挿入します。
    
    ![headless-site-add-rendering-to-column.png](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/103/sitecore-experience-accelerator/images/headless-site-add-rendering-to-column.png)
    

## Row Splitterコンポーネントを追加する

行分割コンポーネントはページを行に分割できます。行分割機能は他のコンポーネントのプレースホルダーであり、単独でコンテンツを保持することはできません。例えば、特定の行にテキストを追加するには、まずその行にリッチテキストコンポーネントを追加しなければなりません。

> !注このトピックでは、エクスペリエンスエディターの行分割器コンポーネントの使い方について説明します。ただし、Pagesでもこのコンポーネントを使うことができます。

ページにRow Splitterコンポーネントを追加するには:

1.  ページを開き、ツールボックスを開いてください。
    
2.  **ページ構造**セクションで、**Row Splitter**コンポーネントを追加したいプレースホルダーにドラッグします。ドラッグしている間、プレースホルダーが青色に変わります。
    
    または、**ホーム** タブで **コンポーネント** をクリックして「 **レンダリングの選択** 」ダイアログボックスを開きます。
    
3.  フローティングツールバーで、**スプリッターの最後に「新しい行を追加**」をクリックします。追加した行を見るには、ツールバーの下のどこかをクリックしてください。
    
    ![The Row Splitter toolbar](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/103/sitecore-experience-accelerator/images/headless-site-row-splitter-toolbar.png)
    
4.  行を追加または並べ替えるには、新しいツールバーで以下をクリックしてください:
    
    -   **新しい行を追加します**\- 現在選択中の列の隣に列を追加します。
    -   **選択した行を下に移動させます**\- 現在選択中の列を右に1つ移動します。
    -   **選択した行を上に移動させます**\- 現在選択中の列を左に1つ移動させるため。
    -   **選択した行を削除します**\- 現在選択中の列を削除します。
5.  コンポーネントを行に追加するには、ツールボックスからコンポーネントをドラッグするか、行を選択してから「 **ここに追加**」をクリックしてください。
    
    ![Add a component to a row](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/103/sitecore-experience-accelerator/images/headless-site-add-rendering-to-row.png)