グリッド設定
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
グリッドシステムは、ウェブサイトを簡単に構成できるHTML/CSSコンポーネントのライブラリです。グリッドシステムは、一貫したデザインを持ち、クロスブラウザ対応を保証するレスポンシブなウェブサイトを作成するのに役立ちます。SXAグリッドレイアウトの仕組みを理解することで、グリッド設定の使い方や変更、クラスの追加に役立ちます。
グリッドシステム
デフォルトでは、サイトを作成する際にBootstrap 5が付属しており、これはjsDelivr、自動マージン、テンプレートスターターページを備えたレスポンシブでモバイルファーストのシステムです。デフォルトのデバイスは以下の通りです:
- モバイル
- モバイルの風景
- タブレット肖像
- Desktop small
- Desktop レギュラー
- Desktop large
また、Bootstrap 4、Tailwind、Foundationなど、他のグリッドシステム用の組み込みアイテムも用意されています。
サイト作成後にグリッドシステムを変更するには多くの手動変更が必要です。ページ上のグリッドシステムへの参照があるため、グリッドシステムを変更するとレイアウトが壊れてしまいます。
すべてのグリッドシステムには異なるシステムルール、クラス、オプションがあります。より詳しい情報は、各グリッドシステムのドキュメントを参照してください。
グリッド定義およびグリッド設定項目の設定
グリッドシステムはSitecoreの機能として保存されており(sitecore/System/設定/Feature/)、以下が含まれます:
- Grid Definition項目には、グリッドシステム固有の設定、デバイス、そしてコンテンツ作成者がエクスペリエンスエディターやページアプリケーションで使用できるクラスが含まれています。
- Grid Setup項目 – スキャフォールディング用のモジュールを設定するためのもので、依存関係の指定も含まれます。
Grid Definition項目には以下のフィールドが含まれています:
フィールド
概要
名称
サイト作成ウィザードで表示したいグリッドシステムの名前です。
レンダリングパラメータフィールドタイプ
グリッドパラメータのレンダリング方法を決定します。デフォルトのフィールドレンダラーは以下の通りです:
Sitecore.XA.Foundation.Grid.Fields.FieldRenderers.GridRenderingParametersFieldRenderer, Sitecore.XA.Foundation.Grid
デフォルトのコンポーネントレイアウト
ページ上でドラッグするレンダリングのデフォルトカラムサイズを設定します。異なる種類のデバイスごとに値を設定できます。その値は列の数を指定します。
グリッドテーマ
グリッドに使われているテーマへのリンク。
グリッドフィールドパーサータイプ
グリッドフィールドを解析するためのパーサータイプを決定します。デフォルトのグリッドフィールドパーサータイプは以下の通りです:
Sitecore.XA.Foundation.Grid.Parser.GridFieldParser,Sitecore.XA.Foundation.Grid
グリッドボディビューパス
ページの本文レイアウトを定義するCSHTMLファイルへのパス。
フレックス
固定サイズに設定されていない場合のプレースホルダーの挙動を決定するCSSクラスの一覧。例えば、 row expanded。
固定
プレースホルダーが固定されたときの挙動を決定するCSSクラスの集合。例えば、 row。
ロウクラス
CSSクラスは、Row Splitterレンダリング用に生成される div 要素に追加されました。
行コンテナクラス
CSSクラスはすべての行の親 div 要素に追加されました。
ラッピングタグ
ここで指定したタグでplaceholderタグをラップします。例えばdiv。クラスを指定するには、例えば rowの Wrapping class フィールドに入力してください。レンダリングにラッピングタグが必要ない場合は、両方のフィールドをクリアしてください。
> [!注]
> 使っているグリッドシステムによっては、このフィールドはすでに設定されている場合があります。
ラッピングクラス
Wrappingタグフィールドで指定されたタグにクラスを割り当てます。
> [!注]
> 使っているグリッドシステムによっては、このフィールドはすでに設定されている場合があります。
Grid Setup項目には以下の項目が含まれます。
フィールド
概要
名称
サイト作成ウィザードで表示したいグリッドシステムの名前です。
依存関係
機能のインストール順を自分で決められます。
グリッドの定義
Grid Definitionアイテムを指します。例えば、Foundationグリッドシステムの場合
/フィーチャー/エクスペリエンスアクセラレーター/Foundation/FoundationグリッドシステムのGrid Definition項目でコンポーネントのデフォルトレイアウト設定を変更することができます。例えば、Bootstrap 5グリッド(sitecore/System/Settings/Feature/Experience Accelerator/Bootstrap 5)の場合:
グリッドクラス
Grid Definition項目で定義されたクラスは、メディアライブラリのグリッドシステムの詳細に対応しています。例えば、Pagesの右側ペインでは、大きなデスクトップを使う訪問者のためにレンダリングを非表示にするオプションがあります。
このオプションはBootstrap 5グリッドシステムの ディスプレイ 設定(sitecore/System/Settings/Feature/Experience Accelerator/Bootstrap 5/Bootstrap 5/Large Desktop/Display/None)で設定されています:
このクラスは、メディアライブラリ(sitecore/Media Library/Feature/Experience Accelerator)に読み込まれたbootstrapmin.cssファイルから取られています:
