1. Grid

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

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

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

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

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

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

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

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

    Grids stored in Sitecore.

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

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

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

  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をクリックします。CSSファイルをここにアップロードしてください。

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

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

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

  1. sitecore/System/settings/Feature/に移動して、グリッド定義項目用の新しいフォルダを作成します。デフォルトのグリッド定義項目はExperience Acceleratorフォルダ(sitecore/system/Settings/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ファイルへのパス。ヘッダー、メイン、フッターなど、必要なプレースホルダーをすべて含めてください。

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

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

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

  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. サイト設定のGrid mapping欄でカスタムグリッドを選択できます。

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