---
title: "カスタムグリッドを作成する"
slug: "create-a-custom-grid"
abstract: "グリッドテーマ、定義アイテム、セットアップアイテムを作成して、自分だけのカスタムCSSフレームワークを追加してください。"
---
# カスタムグリッドを作成する

デフォルトでは[SitecoreAI](https://doc.sitecore.com/sai/en/users/sitecoreai/sitecoreai.html)はBootstrap 5を搭載していますが、独自のカスタムCSSフレームワークを追加できます。

グリッドシステムはSitecoreの機能として保存されており、以下が含まれます:

-   グリッドテーマ – すべてのグリッドクラスを含むCSSファイルが含まれます。
    
-   グリッド定義項目 – すべてのグリッドシステム固有の項目(デバイスおよびそのクラス)を含みます。
    
-   グリッドセットアップアイテム – サイト作成ウィザードのドロップダウンリストにグリッドを含めるための足場項目です。
    
    ![Grids stored in Sitecore.](https://doc.sitecore.com/api/markdown-image/sai/ja/developers/sitecoreai/images/ce-bootstrap5-grid-definition-expanded.png)
    

## グリッドテーマを作成する

カスタムグリッドにはグリッドテーマが割り当てられている必要があります。 [SitecoreAI](https://doc.sitecore.com/sai/en/users/sitecoreai/sitecoreai.html)にはスクリプトやスタイルを含む基本のグリッドテーマが付属しています。このベーステーマをカスタムグリッドテーマに使うことができます。

グリッドテーマを作成するには:

1.  *sitecore/Media Library/Feature*に移動して、グリッドテーマ用の新しいフォルダを作成します。デフォルトのグリッドテーマは*Experience Accelerator*フォルダ(*sitecore/Media Library/Feature/Experience Accelerator*)に保存されています。SXAは標準のSXAセクションをSXAのアップデートで上書きするため、グリッドテーマ用の別のフォルダを作成することをお勧めします。
2.  新しいフォルダを右クリックして「 **テンプレートから挿入**」をクリックします。
3.  テンプレート **から挿入** するダイアログボックスで、 *sitecore/templates/Foundation/Experience Accelerator/Grid/* に移動してグリッド **テーマ**をクリックします。
4.  新しいグリッドテーマを右クリックして「 **挿入**」→ **「スタイル」**をクリックします。CSSファイルをここにアップロードしてください。

## グリッド定義項目を作成する

カスタムテーマには、グリッドシステム固有のアイテム(デバイスやクラス)を含むグリッド定義アイテムが必要です。

グリッド定義項目を作成するには:

1.  *sitecore/System/settings/Feature/*に移動して、グリッド定義項目用の新しいフォルダを作成します。デフォルトのグリッド定義項目はExperience Acceleratorフォルダ(*sitecore/system/Settings/Experience Accelerator*)に保存されています。SXAは標準のSXAセクションをSXAの更新で上書きするため、グリッド定義項目用に別フォルダを作成することをお勧めします。
2.  新しいフォルダを右クリックして「 **テンプレートから挿入**」をクリックします。
3.  テンプレート **から挿入** するダイアログボックスで、 */sitecore/templates/Foundation/Experience Accelerator/Grid/* に移動して **グリッド定義**をクリックします。
4.  以下の項目に記入してください:
    -   **名前** - サイト作成ウィザードで表示したいグリッドシステムの名前。
    -   **レンダリングパラメータフィールドタイプ** - グリッドパラメータのレンダリング方法を決定します。カスタマイズしたくない場合は、デフォルトのフィールドレンダラーを使いましょう: Sitecore.XA.Foundation.Grid.Fields.FieldRenderers.GridRenderingParametersFieldRenderer, Sitecore.XA.Foundation.Grid
    -   **デフォルトのコンポーネントレイアウト** - ページ上でドラッグするレンダリングのデフォルトのカラムサイズを設定します。
    -   **グリッドテーマ** - グリッドに使われているテーマへのリンク。
    -   **グリッドフィールドパーサータイプ** - グリッドフィールドを解析するためのパーサータイプを決定します。カスタマイズが不要なら、デフォルトの設定を使いましょう: Sitecore.XA.Foundation.Grid.Parser.GridFieldParser,Sitecore.XA.Foundation.Grid
    -   **グリッドボディビューパス** - ページのボディレイアウトを定義するcshtmlファイルへのパスです。ヘッダー、メイン、フッターなど、必要なプレースホルダーをすべて含めてください。

## グリッドスキャフォールディングのセットアップを作成しましょう

サイト作成ウィザードで新しいグリッドをグリッドオプションの一つとして追加するには、グリッド設定を追加する必要があります。

グリッドのセットアップを追加すると:

1.  新しいグリッドを右クリックして「 **テンプレートから挿入**」をクリックします。
2.  テンプレート **から挿入** するダイアログボックスで、 *sitecore/Templates/Foundation/Experience Accelerator/Scaffolding/Roots* に移動して **グリッド設定**をクリックします。
3.  以下の項目に記入してください:
    -   **名前** - サイト作成ウィザードで表示したいグリッドシステムの名前。
    -   **依存関係** - モジュールのインストール順を指定する。
    -   **グリッド定義** - グリッド定義項目を指します。例えば、この例のカスタムグリッドの場合: *Settings/Feature//*
4.  サイト設定の **グリッド** マッピング欄でカスタムグリッドを選択できます。