---
title: "コンポーネントのレイアウトを変更する"
slug: "change-the-layout-of-a-component"
abstract: "エクスペリエンスエディターでコンポーネントのグリッド設定を変更する方法。"
---
# コンポーネントのレイアウトを変更する

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

デフォルトでは、ページにコンポーネントを追加すると、その列の幅全体を消費します。これはコンポーネントのグリッド設定で変更できます。デフォルト設定を永久に変更するには、コンテンツエディターでグリッド設定を変更する必要があります。

コンポーネントのレイアウトを変更するには:

1.  グリッドの列を見るには、リボンの **「ビュー** 」タブで「 **グリッド**」を選択してください。
    
2.  コンポーネントのツールバーで **「スタイルとレイアウトを編集**![586AA71710AB4A69914D478263FA86C4.png](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/103/sitecore-experience-accelerator/images/586AA71710AB4A69914D478263FA86C4.png)」をクリックします。
    
3.  **Grid**セクションの**Basic**タブでコンポーネントの幅を変更します。使用するグリッドシステムによって、異なるデバイスごとにカラム幅を設定できます。例えば、広告が表示されるカラム数を指定することができます。
    
4.  ページにもう一つのコンポーネントを追加すると、すでにページにあるコンポーネントの上に配置できます。
    
    ![Add a component above existing components.](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/103/sitecore-experience-accelerator/images/SXA-headless-ee-add-rendering-to-existing-rendering.png)
    
    > !注新しいコンポーネントは既存のコンポーネントのグリッド設定を使います。同じサイズの複数のコンポーネントを追加したい場合に便利です。例えば、同じサイズの広告を3つ使う場合などです。
    
5.  コンポーネントのより複雑な設定は **、Advanced**タブで変更できます。例えば、**Advanced**タブの**Display**オプションで「 **None**」を選択し、携帯電話で広い広告が表示されないようにします。
    

> !注グリッド設定のために特定のデバイスで隠れているコンポーネントを表示するには、「ビュー」タブで「隠されたコンポーネント」を選択してください。