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