グリッドの設定

概要

SXA グリッドの定義、その設定、およびクラス。

グリッド システムは、Web サイトを簡単に構成できる HTML/CSS コンポーネントのライブラリです。グリッド システムは、一貫したデザインを持ち、クロスブラウザー サポートを確実にする応答性の高い Web サイトを作成するのに役立ちます。SXA グリッド レイアウトがどのように機能するかを理解すると、グリッド設定の使用方法と変更方法、およびクラスを追加する方法についての洞察が得られます。

デフォルトでは、SXA には次のグリッド システムが付属しています。

  • Bootstrap 3 – 事前定義されたクラスを含む 12 列のレイアウトを備えた、応答性の高いなモバイル ファーストのグリッド システム。デフォルトのデバイスは次のとおりです。

    • 電話

    • タブレット

    • デスクトップ

    • 大型デスクトップ

  • Bootstrap 4 – 事前定義されたクラスを含む 12 列のレイアウトを備えた、応答性の高いなモバイル ファーストのグリッド システム。デフォルトのデバイスは次のとおりです。

    • コンパクトな電話

    • 電話

    • タブレット

    • ラップトップ

    • デスクトップ

  • Foundation – 任意のサイズにスケールアウトできる 12 列の柔軟なグリッドを備えた、応答性の高いなモバイル ファーストのグリッド システム。デフォルトのサイズは次のとおりです。

  • グリッド 960 – 960 ピクセルの幅に基づく 12 列のグリッド。デフォルト設定は次のとおりです。

    • サイズ

    • プレフィックス

    • サフィックス

注記

すべてのグリッド システムには、異なるシステム ルール、クラス、およびオプションがあります。詳細については、それぞれのグリッド システムのドキュメントを参照してください。

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

SXA-grids.png

注記

サイト作成プロセス中にグリッドを選択しない場合、デフォルトで Bootstrap 4 グリッドが適用されます。

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

注記

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

たとえば、モバイル デバイスに Grid 960 システムを使用できます。

SXA-grid-mobile.png

注記

サイトの作成後にグリッド システムを変更するには、多くの手動変更が必要になることに注意してください。ページは以前のグリッド システムを参照しているため、グリッド システムに変更を加えるとレイアウトが壊れます。

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

  • グリッド定義アイテム – グリッド システム固有のすべてのアイテム (デバイスとそのクラス) が含まれます。

  • グリッド設定アイテム – 新しいエクスペリエンス アクセラレーター サイトを作成するウィザードのドロップダウン リストにグリッドを含めるための基本となるアイテムです。

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

SXA-grid-960.PNG

グリッド定義アイテムには、次のフィールドが含まれます。

[フィールド]

説明

名前

サイト作成ウィザードに表示されるグリッド システムの名前。

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

グリッド パラメーターのレンダリング方法を決定します。

デフォルトのコンポーネント レイアウト

ページにドラッグするレンダリングのデフォルトの列サイズを設定します。

グリッド テーマ

グリッドに使用されるテーマへのリンク。

グリッド フィールド パーサー タイプ

グリッド フィールドを解析するパーサー タイプを決定します。

グリッド本文ビュー パス

ページの本文のレイアウトを定義します。

Flex

プレースホルダーが固定サイズに設定されていない場合の動作を決定する CSS クラスのリスト。例: row expanded

Fixed

プレースホルダーが固定サイズに設定されている場合の動作を決定する CSS クラスのリスト。例: row

Row class

行スプリッターのレンダリングのために生成された DIV に追加された CSS クラス。

Row Container Class

すべての行の親 DIV に追加された CSS クラス。

グリッド設定アイテムには、次のフィールドが含まれます。

フィールド

説明

名前

サイト作成ウィザードに表示されるグリッド システムの名前。

依存関係

機能をインストールする順序を決定できます。

グリッドの定義

グリッド定義アイテムを参照します。たとえば、Foundation グリッド システムの場合は、Settings/Feature/Experience Accelerator/Foundation/Foundation を参照します。

[en]  

グリッド システムのグリッド定義アイテムで、レンダリングのデフォルトのレイアウト設定を変更できます。Foundation グリッド ( sitecore/システム/設定/機能/エクスペリエンス アクセラレーター/Foundation) の例は次のとおりです。

SXA-default-component-layout-foundation.PNG

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

8F9FCD535695467BAA228219635649EA.png

このオプションは、Bootstrap グリッドシステムの表示設定 ( sitecore/システム/設定/機能/エクスペリエンス アクセラレータ/Bootstrap/Bootstrap/Large Desktops/Visibility/Hide only for Large Desktops/) で設定されています。

B99FF684D0F7443994AD0EF2FF68CDF5.png

のクラスは、メディアライブラリ (sitecore/メディア ライブラリ/機能/エクスペリエンス アクセラレーター) に読み込まれている bootstrap.css ファイルから取得しています。

887645316B134986BAD9BF89C777F423.png