1. グリッド

カスタムグリッドを作成する

Version:
日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

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

グリッド システムはSitecoreの機能として保存され、次のものが含まれます。

  • グリッドテーマ – すべてのグリッドクラスを含むcssファイルが含まれています。

  • グリッド定義アイテム – すべてのグリッドシステム固有のアイテム (デバイスとそのクラス) が含まれます。

  • グリッド設定アイテム – サイト作成ウィザードのドロップダウンリストにグリッドを含めるためのスキャフォールディングアイテム。

    Grids stored in Sitecore.

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

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

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

  1. sitecore/Media Library/Featureに移動し、グリッド用の新しいフォルダーを作成します。デフォルトのグリッドは、Experience Acceleratorフォルダ(sitecore/Media Library/Feature/Experience Accelerator)に保存されます。SXAは標準のSXAセクションをSXAの更新で上書きするため、グリッド用に別のフォルダーを作成することをお勧めします。

  2. 新しいフォルダを右クリックし、Insert from templateをクリックします。

  3. Insert from templateダイアログボックスで、sitecore/templates/Foundation/Experience Accelerator/Grid/に移動し、Grid Themeをクリックします。

  4. 新しいグリッド テーマを右クリックし、Insert、Stylesの順にクリックします。ここにすべてのスタイルをアップロードします。

グリッド定義アイテムの作成

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

グリッド定義アイテムを作成するには:

  1. sitecore/System/settings/Feature/に移動し、グリッド用の新しいフォルダーを作成します。デフォルトのグリッドは、Experience Acceleratorフォルダ(sitecore/Media Library/Feature/Experience Accelerator)に保存されます。SXAは標準のSXAセクションをSXAの更新で上書きするため、グリッド用に別のフォルダーを作成することをお勧めします。

  2. 新しいフォルダを右クリックし、Insert from templateをクリックします。

  3. Insert from templateダイアログボックスで、/sitecore/templates/Foundation/Experience Accelerator/Grid/に移動し、Grid Definitionをクリックします。

  4. 次のフィールドに入力します。

    • Name - サイト作成ウィザードに表示するグリッド システムの名前。

    • Rendering parameters field type - グリッドパラメータのレンダリング方法を決定します。カスタマイズしない場合は、デフォルトのフィールドレンダラーを使用します。 Sitecore.XA.Foundation.Grid.Fields.FieldRenderers.GridRenderingParametersFieldRenderer, Sitecore.XA.Foundation.Grid

    • Default component layout - ページ上でドラッグするレンダリングのデフォルトの列サイズを設定します。

    • Grid theme - グリッドに使用されるテーマへのリンク。

    • Grid field parser type - グリッド フィールドを解析するパーサーの種類を決定します。カスタマイズが不要な場合は、デフォルトを使用します。 Sitecore.XA.Foundation.Grid.Parser.GridFieldParser,Sitecore.XA.Foundation.Grid

    • Grid body view path - ページの本文レイアウトを定義するcshtmlファイルへのパス。header、main、footerなど、必要なすべてのプレースホルダを含める必要があります。

グリッド スキャフォールディング設定の作成

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

グリッド設定を追加するには:

  1. 新しいグリッドを右クリックし、Insert from templateをクリックします。

  2. Insert from templateダイアログボックスで、sitecore/Templates/Foundation/Experience Accelerator/Scaffolding/Rootsに移動し、Grid Setupをクリックします。

  3. 次のフィールドに入力します。

    • Name - サイト作成ウィザードに表示するグリッド システムの名前。

    • Dependencies - モジュールをインストールする順序を指定します。

    • Grid Definition - グリッド定義アイテムを参照します。たとえば、この例のカスタムグリッドの場合、次のようになります。 Settings/Feature/<My custom grid>/<My custom grid definition>

  4. これで、サイトの作成時にカスタム グリッドを選択できるようになりました。

この記事を改善するための提案がある場合は、 お知らせください!