グリッド設定
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
グリッドシステムは、Webサイトを簡単に構築できるHTML / CSSコンポーネントのライブラリです。グリッドシステムは、一貫したデザインを持ち、クロスブラウザサポートを確保するレスポンシブWebサイトを作成するのに役立ちます。SXAグリッド レイアウトの仕組みを理解すると、グリッド設定の使用方法と変更方法、およびクラスの追加方法についての洞察が得られます。
グリッドシステム
グリッドシステム
デフォルトでは、SXAには次のグリッド システムが付属しています。
-
Bootstrap 3 – レスポンシブでモバイルファーストのグリッドシステムで、事前定義されたクラスを含む12列のレイアウトを備えています。デフォルトのデバイスは次のとおりです。
-
携帯 電話
-
錠剤
-
デスクトップ
-
大型デスクトップ
-
-
Bootstrap 4 - レスポンシブでモバイルファーストのグリッドシステムで、事前定義されたクラスを含む12列のレイアウトを備えています。デフォルトのデバイスは次のとおりです。
-
コンパクト電話
-
携帯 電話
-
錠剤
-
ラップトップ
-
デスクトップ
-
-
Bootstrap 5 - jsDelivr、自動マージン、テンプレートスターターページを備えたレスポンシブでモバイルファーストのシステム。デフォルトのデバイスは次のとおりです。
-
コンパクト電話
-
携帯 電話
-
錠剤
-
ラップトップ
-
デスクトップ
-
大型デスクトップ
-
-
Foundation – 任意のサイズにスケールアウトできる12列の柔軟なグリッドを備えた、レスポンシブでモバイルファーストのグリッドシステム。デフォルトのサイズは次のとおりです。
-
小さい
-
中程度
-
大きい
-
-
グリッド960 – 12列のグリッド、960ピクセルの幅に基づく。デフォルト設定は次のとおりです。
-
大きさ
-
接頭辞
-
接尾辞
-
すべてのグリッド・システムには、異なるシステム・ルール、クラス、およびオプションがあります。詳細については、各グリッドシステムのマニュアルを参照してください。
サイトの作成時にグリッド システムを選択できます。サイト作成プロセス中にグリッドを選択しない場合、デフォルトではBootstrap 5グリッドが適用されます。
サイトのSettingsフォルダ(Sitecore/Content/Tenant/Site/Settings)で、GridセクションのGrid Mappingフィールドで、デバイスを特定のグリッドシステムにマッピングできます。新しいデバイスを追加するたびに、グリッド マッピングを手動で構成する必要があります。サイト作成ウィザードでサイトに選択したものと同じグリッド・システムを選択する必要があります。たとえば、モバイルデバイス用のGrid 960システムを使用できます。
サイトの作成後にグリッド システムを変更するには、多くの手動変更が必要になることに注意してください。ページ上で以前のグリッド システムを参照しているため、グリッド システムに変更を加えるとレイアウトが壊れます。
グリッド定義
グリッド定義
グリッド システムはSitecoreの機能 (sitecore/システム/設定/機能/) として保存され、次のものが含まれます。
-
グリッド定義アイテム – すべてのグリッドシステム固有のアイテム (デバイスとそのクラス) が含まれます。
-
グリッド設定アイテム - Create a new Experience Accelerator siteウィザードのドロップダウンリストにグリッドを含めるためのスキャフォールディングアイテム。
グリッド定義アイテムには、コンテンツ エディターがエクスペリエンス エディターで使用できるすべてのグリッド システム固有のアイテムが含まれます。
グリッド定義 アイテムには、次のフィールドが含まれます。
|
Field |
Description |
|---|---|
|
名前 |
サイト作成ウィザードに表示するグリッド システムの名前。 |
|
レンダリング パラメーター フィールド タイプ |
グリッド パラメータのレンダリング方法を決定します。デフォルトのフィールドレンダラーは次のとおりです。 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)。クラスを指定するには、Wrapping classフィールドに入力します (例: row)。ラッピングタグをレンダリングする必要がない場合は、両方のフィールドをクリアします。 手記 使用しているグリッド・システムによっては、このフィールドがすでに構成されている場合があります。 |
|
ラッピングクラス |
Wrapping tagフィールドで指定したタグにクラスを割り当てます。 手記 使用しているグリッド・システムによっては、このフィールドがすでに構成されている場合があります。 |
グリッド設定項目には、次のフィールドが含まれます。
|
Field |
Description |
|---|---|
|
名前 |
サイト作成ウィザードに表示するグリッド システムの名前。 |
|
依存 関係 |
機能がインストールされる順序を決定できます。 |
|
グリッド定義 |
グリッド定義アイテムを参照します。たとえば、Foundationグリッド システムの場合、次のようになります。 Settings/Feature/Experience Accelerator/Foundation/Foundation |
レンダリングのデフォルトのレイアウト設定は、グリッドシステムのグリッド定義アイテムで変更できます。たとえば、Foundationグリッド (sitecore/System/Settings/Feature/Experience Accelerator/Foundationの場合、次のようになります。
グリッドクラス
グリッドクラス
「グリッド定義」項目で定義されたクラスは、メディアライブラリのグリッドシステムの詳細に対応します。たとえば、エクスペリエンス エディターでは、大きなデスクトップを使用している訪問者のレンダリングを非表示にするオプションがあります。
このオプションは、Bootstrapグリッド システムの 表示設定 設定 (sitecore/システム/設定/機能/エクスペリエンス アクセラレーター/Bootstrap/Bootstrap/Large Desktops/表示/大きなデスクトップのみ で設定します)。
このクラスは、メディア ライブラリ (sitecore/メディア ライブラリ/機能/エクスペリエンス アクセラレーター) にロードされたbootstrap.cssファイルから取得されます。
