---
title: "攻略:カスタムグリッドの設定方法"
slug: "walkthrough--setting-up-a-custom-grid"
abstract: "カスタムグリッドの作成方法。"
---
# 攻略:カスタムグリッドの設定方法

ページエディターはSXAグリッドを使ってエディターの見た目や操作感を決定します。ページエディターでは、グリッドがコンポーネント表示のブレークポイントを指定します。標準のグリッド、Bootstrap 5、[またはカスタムグリッド](https://doc.sitecore.com/xp/en/developers/sxa/104/sitecore-experience-accelerator/create-a-custom-grid.html)を使うことができます。

> !重要レンダリングホストサイトで定義されたレイアウトは、使いたいグリッドシステムに対応するように設定する必要があります。

このウォークスルーでは、以下の方法を説明します:

-   グリッドブレークポイントを定義する
-   表示の種類を変更する
-   ボタンのページアイコンを指定する

## グリッドブレークポイントを定義する

ブレークポイントは、ブラウザ上で表示された際の要素の視覚的な位置を決定します。これらのブレークポイントは、Pagesデバイススイッチャーで定義されたサイズと必ずしも一致しません。カスタムグリッドを使う場合は、グリッドのブレークポイントを定義しなければなりません。

カスタムグリッドのブレークポイントを定義するには:

1.  */sitecore/system/Settings/Feature//*へナビゲート。
    
2.  例えばデバイスフォルダを開く、*Small*。
    
3.  **グリッドブレークポイント**のセクションで、**最小**値と**最大**値を入力します。
    
    ![You must set the min and max values for breakpoints for every device size in your grid.](https://doc.sitecore.com/api/markdown-image/sai/ja/developers/sitecoreai/images/62c8db95-7eee-4722-a1c2-079f8d6dc83b.png)
    
4.  これをすべてのデバイスで繰り返します。
    

> !注デフォルトでは、ブレークポイント値はピクセル単位です。EM単位を指定することもできます。フィールドを空にしておくと、SXA *Min*を \-Infinityとし、*Max*を +Infinityピクセルとみなします。

## 表示タイプの変更

SXAグリッドはデフォルトの表示タイプが設定されています。もし望むなら、編集者の見た目や雰囲気を変えることもできます。そのためには、グリッド固有のCSSクラスごとに他の [表示タイプ](https://doc.sitecore.com/sai/ja/developers/sitecoreai/content-modeling-and-presentation/sitecoreai-for-developers/pages-configuration/walkthrough--adding-a-custom-style-to-pages/display-types-for-styles.html "Display types for styles") を指定することができます。これにより、ページエディターでのスタイル表示に影響します。これらのCSSクラスは通常、*Size*、*Order*、*Offest*、*Float*、*Visibility*などの集合にまとめられています。利用可能なセットは選択したグリッドシステムによって異なります。

グリッドの表示タイプを設定するには:

1.  ブレークポイントを設定したデバイスに移動し、CSSクラスフォルダをクリックします。
2.  **データ**セクションで「**タイプ**」ドロップダウンメニューをクリックし、その後、希望する表示タイプをクリックしてください。
3.  表示タイプを変更したいクラスフォルダについては、ステップ1と2を繰り返します。

## ボタンのページビルダーアイコンを指定する

グリッド専用の表示タイプをボタンを使うものに変更する場合は、各ボタンごとにページアイコンを指定する必要があります。これをしないと、編集者は空白のボタンしか見てこなくなります。

ページアイコンを指定するには:

1.  グリッドに移動し、デバイスサイズを選択し、アイコン表示タイプを使うように設定したCSSクラスフォルダを展開します。
    
2.  アイコンを設定したい値をクリックしてください。
    
3.  **データ**セクションの**アイコン**フィールドで、アイコン用のCSSクラスを入力します。以下のスクリーンショットは、*Left*値に指定されたalign-leftクラスを示しています。
    
    ![Under Icon, you can specify a CSS class for the icon for each value in your CSS style.](https://doc.sitecore.com/api/markdown-image/sai/ja/developers/sitecoreai/images/c7e9b7b8-f690-4894-ad0e-5900300a14fd.png)
    
4.  クラスフォルダ内のすべての値に対してステップ3を繰り返します。