グリッド設定
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
グリッドシステムは、Webサイトを簡単に構成できるようにするHTML / CSSコンポーネントのライブラリです。グリッドシステムは、一貫したデザインを持ち、クロスブラウザサポートを確保するレスポンシブWebサイトを作成するのに役立ちます。SXAグリッド レイアウトの仕組みを理解すると、グリッド設定の使用と変更、およびクラスの追加に役立ちます。
グリッドシステム
デフォルトでは、サイトを作成すると、jsDelivr、自動マージン、テンプレートスターターページを備えたレスポンシブなモバイルファーストシステムであるBootstrap 5が付属しています。デフォルトのデバイスは次のとおりです。
-
モビール
-
モバイルランドスケープ
-
タブレットの縦向き
-
Desktop small (小さい)
-
Desktopレギュラー
-
Desktop Large (大)
また、Bootstrap 4、Tailwind、Foundationなど、他のグリッド システム用の組み込みアイテムのセットもあります。
サイトの作成後にグリッド システムを変更するには、多くの手動変更が必要です。ページ上で以前のグリッド システムを参照しているため、グリッド システムに変更を加えるとレイアウトが壊れます。
すべてのグリッド・システムには、異なるシステム・ルール、クラス、およびオプションがあります。詳細については、さまざまなグリッドシステムのドキュメントを参照してください。
グリッド定義とグリッド設定項目の設定
グリッド システムは、Sitecore (sitecore/システム/設定/機能/) に機能として保存され、次のものが含まれます。
-
Grid Definition項目 – コンテンツ作成者がエクスペリエンス エディターとページ アプリケーションで使用できるすべてのグリッド システム固有の設定、デバイス、およびそれらのクラスが含まれます。
-
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アイテムを指します。たとえば、Foundationグリッド システムの場合、次のようになります。Settings/Feature/Experience Accelerator/Foundation/Foundation |
グリッドシステムのGrid Definitionアイテムのコンポーネントのデフォルトのレイアウト設定を変更することができます。たとえば、Bootstrap 5グリッド (sitecore/システム/設定/機能/エクスペリエンス アクセラレーター/Bootstrap 5) の場合:
グリッドクラス
Grid Definitionアイテムで定義されているクラスは、メディアライブラリのグリッドシステムの詳細に対応しています。たとえば、エクスペリエンス エディターでは、大きなデスクトップを使用している訪問者のレンダリングを非表示にするオプションがあります。
このオプションは、Bootstrap 5グリッド システムのDisplay設定 (sitecore/システム/設定/機能/エクスペリエンス アクセラレーター/Bootstrap 5/Bootstrap 5/ラージ デスクトップ/ディスプレイ/なし) で設定します。
このクラスは、メディア ライブラリ (sitecore/メディア ライブラリ/機能/エクスペリエンス アクセラレーター) に読み込まれたbootstrapmin.cssファイルから取得されます。
