グリッドを作成します。

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

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

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

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

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

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

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

    Sitecore に保存されたグリッド。

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

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

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

  1. sitecore/メディアライブラリ/機能に移動し、グリッド用の新しいフォルダーを作成します。デフォルトのグリッドはエクスペリエンス アクセラレーター フォルダー (sitecore/メディア ライブラリ/機能/エクスペリエンス アクセラレータ) に保存されます。SXA は標準の SXA セクションを SXA 更新で上書きするため、グリッド用に別個のフォルダーを作成することをお勧めします。

  2. 新しいフォルダーを右クリックして、[テンプレートから挿入] をクリックします。

  3. [テンプレートから挿入] ダイアログ ボックスで、sitecore/テンプレート/Foundation/エクスペリエンス アクセラレーター/グリッド/ に移動し、[グリッド テーマ] をクリックします。

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

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

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

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

  1. sitecore/システム/設定/機能/に移動し、グリッド用の新しいフォルダーを作成します。デフォルトのグリッドはエクスペリエンス アクセラレーター フォルダー (sitecore/メディア ライブラリ/機能/エクスペリエンス アクセラレーター) に保存されます。SXA は標準の SXA セクションを SXA 更新で上書きするため、グリッド用に別個のフォルダーを作成することをお勧めします。

  2. 新しいフォルダーを右クリックして、[テンプレートから挿入] をクリックします。

  3. [テンプレートから挿入] ダイアログ ボックスで、sitecore/テンプレート/Foundation/エクスペリエンス アクセラレーター/グリッド/ に移動し、[グリッド定義] をクリックします。

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

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

    • [レンダリング パラメーター フィールド タイプ] - グリッド パラメーターがレンダリングされる方法を指定します。カスタマイズしたくない場合は、デフォルトのフィールド レンダラーを使用します: Sitecore.XA.Foundation.Grid.Fields.FieldRenderers.GridRenderingParametersFieldRenderer, Sitecore.XA.Foundation.Grid

    • [デフォルト コンポーネント レイアウト] - ページにドラッグするレンダリングのデフォルトの列サイズを設定します。

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

    • [グリッド フィールド パーサー タイプ] - グリッド フィールドを解析するパーサー タイプを指定します。カスタマイズが必要ない場合は、デフォルトを使用します: Sitecore.XA.Foundation.Grid.Parser.GridFieldParser,Sitecore.XA.Foundation.Grid

    • [グリッド本文ビュー パス] - ページ本文のレイアウトを定義する cshtml ファイルへのパス。ヘッダー、メイン、フッターなど、必要なすべてのプレースホルダーを含める必要があります。

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

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

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

  1. 新しいグリッドを右クリックして、[テンプレートから挿入] をクリックします。

  2. [テンプレートから挿入] ダイアログ ボックスで、sitecore/テンプレート/Foundation/エクスペリエンス アクセラレーター/Scaffolding/ルートに移動し、[グリッド設定] をクリックします。

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

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

    • [依存関係] - モジュールをインストールする順序を指定します。

    • [グリッド定義] - グリッド定義アイテムを参照します。たとえば、この例のカスタム グリッドの場合は、設定/機能/<My custom grid>/<My custom grid definition> になります。

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

何かフィードバックはありますか?

この記事を改善するための提案がある場合は、