1. グリッド

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

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

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

デフォルトではSitecoreAIはBootstrap 5を搭載していますが、独自のカスタムCSSフレームワークを追加できます。

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

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

  • グリッド定義項目 – すべてのグリッドシステム固有の項目(デバイスおよびそのクラス)を含みます。

  • グリッドセットアップアイテム – サイト作成ウィザードのドロップダウンリストにグリッドを含めるための足場項目です。

    Grids stored in Sitecore.

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

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

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

  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. サイト設定の グリッド マッピング欄でカスタムグリッドを選択できます。
この記事を改善するための提案がある場合は、 お知らせください!