チュートリアル : カスタム グリッドの設定
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
Horizonエディターは、SXAグリッドを使用してエディターのルック アンド フィールを決定します。Horizonエディタでは、グリッドはコンポーネントを表示するためのブレークポイントを指定します。 サイトの作成時にグリッドを選択し、後でグリッドを変更することはできません。 標準のSXAグリッド の1つまたは カスタム グリッドのいずれかを使用できます。
サイトの作成時にカスタム グリッドを選択した場合は、そのブレークポイントを定義する必要があります。必要に応じて、表示タイプをデフォルトから変更することもできます。その場合は、特定の表示タイプのアイコンを指定しなければならない場合があります。
このチュートリアルでは、次の方法について説明します。
-
グリッドブレークポイントの定義
-
表示タイプの変更
-
ボタンの水平線アイコンの指定
グリッドブレークポイントの定義
グリッドブレークポイントの定義
ブレークポイントは、ブラウザに表示されるサイト上の要素の視覚的な位置を決定します。これらのブレークポイントは、Horizonデバイス スイッチャーで定義されたサイズと常に一致するとは限りません。カスタムグリッドを使用する場合は、グリッドのブレークポイントを定義する必要があります。
カスタムグリッドのブレークポイントを定義するには:
-
/sitecore/system/Settings/Feature/<My project>/<My grid>に移動します。
-
デバイスフォルダを開きます(例: Small)。
-
Grid Breakpointsセクションで、MinとMaxの値を入力します。
-
これをすべてのデバイスで繰り返します。
デフォルトでは、ブレークポイントの値はピクセルです。em単位を指定することもできます。フィールドを空のままにすると、SXAはMinを -Infinityとみなし、Maxを +Infinityピクセルと見なします。
表示タイプの変更
表示タイプの変更
SXAグリッドには、デフォルトの表示タイプが設定されています。必要に応じて、エディターのルックアンドフィールを変更できます。これを行うには、グリッド固有のCSSクラスのセットごとに他の 表示タイプ を指定できます。これは、Horizonエディターでのスタイルの表示方法に影響します。これらのCSSクラスは通常、Size、Order、Offest、Float、Visibilityなどのセットにグループ化されます。使用可能なセットは、選択したグリッドシステムによって異なります。
グリッドの表示タイプを設定するには:
-
ブレークポイントを設定したデバイスに移動し、CSSクラスフォルダをクリックします。
-
Dataセクションで、Typeドロップダウン メニューをクリックし、目的の表示タイプをクリックします。
-
表示タイプを変更するクラスフォルダについて、手順1と2を繰り返します。
ボタンの水平線アイコンの指定
ボタンの水平線アイコンの指定
グリッド固有の表示タイプをボタンを使用する表示タイプに変更する場合は、各ボタンに水平線アイコンを指定する必要があります。これを行わないと、エディターには空白のボタンのみが表示されます。
Horizonアイコンを指定するには:
-
グリッドに移動し、デバイス サイズを選択し、アイコン表示タイプを使用するように設定したCSSクラス フォルダーを展開します。
-
アイコンを設定する値をクリックします。
-
DataセクションのIconフィールドに、アイコンのCSSクラスを入力します。次のスクリーンショットは、Left値に指定されたalign-leftクラスを示しています。
-
classフォルダ内のすべての値に対して手順3を繰り返します。