攻略
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
HorizonエディターはSXAグリッドを使ってエディターの見た目や操作感を決定します。Horizonエディターでは、グリッドがコンポーネント表示のブレークポイントを指定します。 サイト作成時にグリッドを選択し、後からグリッドを変更することはできません。 標準のSXAグリッド を使うか、カスタムグリッドを使うことができます。
サイト作成時にカスタムグリッドを選択する場合は、そのブレークポイントを定義しなければなりません。望むなら、表示タイプをデフォルトから外すこともできます。その場合、特定の表示タイプごとにアイコンを指定する必要があるかもしれません。
このウォークスルーでは、以下の方法を説明します:
- グリッドブレークポイントを定義する
- 表示の種類を変更する
- ボタンにはHorizonのアイコンを指定する
グリッドブレークポイントを定義する
ブレークポイントはブラウザ上で表示された際の要素の視覚的な位置を決定します。これらのブレークポイントは必ずしもHorizonデバイススイッチャーで定義されたサイズと一致しません。カスタムグリッドを使用する場合は、グリッドのブレークポイントを定義しなければなりません。
カスタムグリッドのブレークポイントを定義するには:
-
*/sitecore/system/Settings/Feature//*へナビゲート。
-
例えばデバイスフォルダを開く、Small。
-
グリッドブレークポイントのセクションで、最小値と最大値を入力します。
-
これをすべてのデバイスで繰り返します。
!注デフォルトでは、ブレークポイント値はピクセルです。em単位を指定することもできます。フィールドを空にしておくと、SXAMin-Infinity、Maxを+Infinityピクセルとみなします。
表示タイプの変更
SXAグリッドにはデフォルトの表示タイプが設定されています。必要に応じて、エディターの見た目や操作感を変更することもできます。そのためには、グリッド固有のCSSクラスごとに他の 表示タイプ を指定することができます。これにより、Horizonエディタ上でスタイルの表示方法がユーザーに表示されるようになります。これらのCSSクラスは通常、Size、Order、Offest、Float、Visibilityなどのセットにまとめられています。利用可能なセットは選択したグリッドシステムによって異なります。
グリッドの表示タイプを設定するには:
- ブレークポイントを設定したデバイスに移動し、CSSクラスフォルダをクリックします。
- データセクションで「タイプ」ドロップダウンメニューをクリックし、その後、希望する表示タイプをクリックしてください。
- 表示タイプを変更したいクラスフォルダについては、ステップ1と2を繰り返します。
ボタンの代わりにHorizonのアイコンを指定します
グリッド固有の表示タイプをボタンを使うものに変更する場合は、各ボタンごとにHorizonアイコンを指定する必要があります。これをしないと、編集者は空白のボタンしか表示されません。
Horizonアイコンを指定するには:
-
グリッドに移動し、デバイスサイズを選択し、アイコン表示タイプを使うように設定したCSSクラスフォルダを展開します。
-
アイコンを設定したい値をクリックしてください。
-
データセクションのアイコンフィールドで、アイコン用のCSSクラスを入力します。以下のスクリーンショットは、Left値に指定されたalign-leftクラスを示しています。
-
クラスフォルダ内のすべての値に対してステップ3を繰り返します。