グリッド設定

グリッドシステム

デフォルトでSXAは以下のグリッドシステムを搭載しています:

• Bootstrap 3 – レスポンシブでモバイルファーストのグリッドシステムで、12列レイアウトであらかじめ定義されたクラスを含みます。デフォルトのデバイスは以下の通りです:
  • 電話
  • タブレット
  • デスクトップ
  • 大型デスクトップ
• Foundation – 12列の柔軟なグリッドを持ち、任意のサイズまで拡大可能なレスポンシブでモバイルファーストのグリッドシステム。デフォルトのサイズは以下の通りです:
  • 小さい
  • メディア
  • 大きい
• グリッド960 – 幅960ピクセルに基づく12列グリッド。デフォルト設定は以下の通りです:
  • サイズ
  • 接頭辞
  • 接尾辞

!注すべてのグリッドシステムは異なるシステムルール、クラス、オプションを持っています。詳細については、各グリッドシステム独自のドキュメントを参照してください。

サイトを作成する際にグリッドシステムを選択できます。

!注サイト作成時にグリッドを選択しない場合、デフォルトでBootstrapグリッドが適用されます。

サイト設定フォルダ(Sitecore/Content/Tenant/Site/Settings)の グリッド セクションの グリッドマッピング フィールドで、デバイスを特定のグリッドシステムにマッピングできます。

!注新しいデバイスを追加するたびに、グリッドマッピングを手動で設定する必要があります。サイト作成ウィザードで選択したのと同じグリッドシステムを選択しなければなりません。

例えば、モバイルデバイス向けにGrid 960システムを利用できます:

!注サイト作成後にグリッドシステムを変更するには多くの手動変更が必要であることを理解しておくことが重要です。ページ上のグリッドシステムへの参照があるため、グリッドシステムを変更するとレイアウトが壊れてしまいます。

グリッドの定義

グリッドシステムはSitecoreの機能として保存されており(sitecore/System/設定/Feature/)、以下が含まれます:

• グリッド定義項目 – すべてのグリッドシステム固有の項目(デバイスおよびそのクラス)を含みます。
• グリッド設定項目 – 新しい エクスペリエンスアクセラレーター作成の ドロップダウンリストにグリッドを含めるための足場項目です。

グリッド定義項目には、コンテンツエディターがエクスペリエンスエディターで使用できるグリッドシステム固有のすべての項目が含まれます。

グリッド定義項目には以下のフィールドが含まれています:

フィールド

概要

名称

サイト作成ウィザードで表示したいグリッドシステムの名前です。

レンダリングパラメータフィールドタイプ

グリッドパラメータのレンダリング方法を決定します。デフォルトのフィールドレンダラーは以下の通りです:

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タグフィールドで指定されたタグにクラスを割り当てます。

> [!注]
> 使っているグリッドシステムによっては、このフィールドはすでに設定されている場合があります。

グリッドセットアップ項目には以下のフィールドが含まれます:

フィールド

概要

名称

サイト作成ウィザードで表示したいグリッドシステムの名前です。

依存関係

機能のインストール順を自分で決められます。

グリッドの定義

グリッド定義項目を指します。例えば、Foundationグリッドシステムの場合

グリッドシステムのグリッド定義項目でレンダリングのデフォルトレイアウト設定を変更することができます。例えば、Foundationグリッド(sitecore/System/Settings/Feature/Experience Accelerator/Foundation)の場合:

グリッドクラス

グリッド定義項目で定義されたクラスは、メディアライブラリ内のグリッドシステムの詳細に対応しています。例えば、エクスペリエンスエディターでは、大きなデスクトップを使う訪問者のためにレンダリングを非表示するオプションがあります。

このオプションはBootstrapグリッドシステムの可視化設定(sitecore/System/Settings/Feature/Experience Accelerator/Bootstrap/Bootstrap/Largeデスクトップ/Visibility/Hideのみ、大規模デスクトップのみ)で設定されています。

このクラスは、メディアライブラリ(sitecore/Media Library/Feature/Experience Accelerator)に読み込まれたbootstrap.cssファイルから取得しています: