---
title: "カスタムグリッドを作成する"
slug: "create-a-custom-grid"
abstract: "グリッドテーマ、定義アイテム、セットアップアイテムの作成方法を学びましょう。"
---
# カスタムグリッドを作成する

デフォルトでSXAには4つのグリッドシステムが付属しています。ブートストラップ(3または4)、Foundation、またはGrid960のグリッドシステムを使いたくない場合は、独自のカスタムCSSフレームワークを追加できます。

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

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

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

カスタムグリッドにはグリッドテーマが割り当てられている必要があります。SXAにはスクリプトやスタイルを含むベースのグリッドテーマが付属しています。このベーステーマをカスタムグリッドテーマに使うことができます。

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

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.  新しいグリッドテーマを右クリックして「 **Insert**, **Styles**」をクリックします。すべてのスタイルをここにアップロードしてください。

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

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

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

1.  *sitecore/System/settings/Feature/*に移動してグリッド用の新しいフォルダを作成してください。デフォルトのグリッドはExperience Acceleratorフォルダ(*sitecore/Media Library/Feature/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.  サイト作成時にカスタムグリッドを選択できるようになりました。