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