1. Pages設定

攻略:カスタムグリッドの設定方法

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

PagesエディターはSXAグリッドを使ってエディターの見た目や操作感を決定します。Pagesエディターでは、グリッドがコンポーネントを表示するためのブレークポイントを指定します。標準のグリッド、Bootstrap 5、またはカスタムグリッドのどちらかを使うことができます。

大事な

レンダリングホストサイトで定義されたレイアウトは、使いたいグリッドシステムに対応するように設定する必要があります。

このウォークスルーでは、以下の方法を説明します:

  • グリッドブレークポイントを定義する

  • 表示の種類を変更する

  • ボタン用のPagesアイコンを指定する

グリッドブレークポイントを定義する

ブレークポイントは、ブラウザ上で表示された際の要素の視覚的な位置を決定します。これらのブレークポイントは、Pagesデバイススイッチャーで定義されたサイズと必ずしも一致しません。カスタムグリッドを使う場合は、グリッドのブレークポイントを定義しなければなりません。

カスタムグリッドのブレークポイントを定義するには:

  1. /sitecore/system/Settings/Feature/<My project>/<My grid>へナビゲート。

  2. Openデバイスフォルダ、例えばSmall。

  3. Grid BreakpointsセクションでMin値とMax値を入力します。

    You must set the min and max values for breakpoints for every device size in your grid.

  4. これをすべてのデバイスで繰り返します。

注記

デフォルトでは、ブレークポイント値はピクセル単位です。EM単位を指定することもできます。フィールドを空にしておくと、SXA Minを -Infinityとし、Maxを +Infinityピクセルとみなします。

表示タイプの変更

SXAグリッドはデフォルトの表示タイプが設定されています。もし望むなら、編集者の見た目や雰囲気を変えることもできます。そのためには、各グリッド固有のCSSクラスごとに他の 表示タイプ を指定することができます。これにより、Pagesエディターでのスタイル表示に影響します。これらのCSSクラスは通常、例えばSize、Order、Offest、Float、Visibilityなどの集合にまとめられます。利用可能なセットは選択したグリッドシステムによって異なります。

グリッドの表示タイプを設定するには:

  1. ブレークポイントを設定したデバイスに移動し、CSSクラスフォルダをクリックします。

  2. DataセクションでTypeドロップダウンメニューをクリックし、表示形式を選択してください。

  3. 表示タイプを変更したいクラスフォルダについては、ステップ1と2を繰り返します。

ボタンのページビルダーアイコンを指定する

グリッド固有の表示タイプをボタンを使うものに変更する場合は、各ボタンごとにPagesアイコンを指定する必要があります。これをしないと、編集者は空白のボタンしか見てこなくなります。

Pagesアイコンを指定するには:

  1. グリッドに移動し、デバイスサイズを選択し、アイコン表示タイプを使ったCSSクラスフォルダを展開します。

  2. アイコンを設定したい値をクリックしてください。

  3. DataセクションのIcon欄で、アイコンのCSSクラスを入力します。以下のスクリーンショットは、Left値に指定されたalign-leftクラスを示しています。

    Under Icon, you can specify a CSS class for the icon for each value in your CSS style.

  4. クラスフォルダ内のすべての値に対してステップ3を繰り返します。

この記事を改善するための提案がある場合は、 お知らせください!