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