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