Experience Builder で、各ウィジェットのデフォルトのスタイル設定を変更して、サイズ、位置、背景、枠線、およびボックスの影などのプロパティをカスタマイズできます。追加先のページタイプ、またはサイズと位置を自動的に制御する親コンテナー (行や列など) によって課せられる制約に応じて、オプションは異なります。
スタイルの設定
ウィジェットの構成パネルの [スタイル] タブには、Web エクスペリエンスを構成するとき、ウィジェットを区別するアイコンとラベルを変更するためのオプションを含まれています。アイコンと名前は、アクティブなページの [アウトライン] ビューおよびウィジェットを接続する際の選択リストに表示されます。
ウィジェットをキャンバス周辺にドラッグして移動およびサイズ変更するのではなく、サイズと位置の明示的な値を設定できます。サイズと位置の設定は、ウィジェットが幅、高さ、および位置によってページ上にどのように配置されるかを定義します。これらの値をピクセル (px) またはパーセント (%) で指定して、コンテンツの表示方法を決めることができます。全画面ページまたはスクロール ページに追加されるウィジェットに適したサイズと位置の設定については、以下のセクションをご参照ください。
すべてのウィジェットに共通するスタイル設定には、次のものがあります。
- [親コンテナー内に維持] - ネストされたウィジェットが親ウィジェットの境界線の外にドラッグされないようにします。
- [背景] - 塗りつぶし色または画像を選択して、ウィジェットの背景を設定します。画像を選択した場合、[フィット]、[塗りつぶし]、[中央揃え]、[タイル]、または [ストレッチ] を使用してウィジェットの枠線内に配置できます。[フィット] を選択すると、ウィジェットは画像の周りに背景の塗りつぶし色を表示します。
- [枠線] - 枠線の色、スタイル (破線または点線)、および幅 (ピクセル単位) を選択して、ウィジェットの枠線を設定します。半径サイズ (ピクセルまたはパーセント) を変更して、ウィジェットの角を作成します。設定をロックして、4 つの角すべての半径を同期します。
- [ボックスの影] - 次の設定を使用してウィジェットの周囲に影の効果を追加します。
- [オフセット X] - 影の水平距離を設定します。負の値にするとウィジェットの左側に影が配置され、正の値にすると右側に配置されます。
- [オフセット Y] - 影の垂直距離を設定します。負の値にするとウィジェットの上側に影が配置され、正の値にすると下側に配置されます。
- [ぼかしの半径] - ぼかし効果を影に追加します。
- [拡張の半径] - 影のサイズを調整します。
- [色] - 影の色を選択します。
全画面ページのレイアウト
全画面ページをアプリに追加した場合、自由形状のレイアウト内でウィジェットを整理します。ウィジェットをキャンバス周辺にドラッグして移動およびサイズ変更すると、それに応じて、[スタイル] パネルの [位置] と [サイズ] の設定が更新されます。
次の [位置] 設定を設定できます。
- [左] - ウィジェットの左端が親コンテナーの左端の右側にオフセットされる距離を指定します。
- [上] - ウィジェットの上端が親コンテナーの上端の下側にオフセットされる距離を指定します。
- [左] - ウィジェットの右端が親コンテナーの右端の左側にオフセットされる距離を指定します。
- [下] - ウィジェットの下端が親コンテナーの最下部の上側にオフセットされる距離を指定します。
すべての位置のプロパティ値は同時には有効になりません。このプロパティ値は 2 つの設定の組み合せです。
- [左] と [上] または [下]
- [右] と [上] または [下]
定義する値を手動で選択するには、[自動] から [カスタム] に切り替えます。位置の値を [自動] に設定すると、そのプロパティは自動的に設定されます。
メモ:
[上] と [下] にカスタム値を設定すると、[上] の値が使用されます。[左] と [右] にカスタム値を設定すると、ブラウザーの言語が左から右 (英語や中国語など) の場合は [左] の値が使用され、ブラウザーの言語が右から左 (ヘブライ語やアラビア語など) の場合は [右] の値が使用されます。
位置のプロパティごとに単位を変更することもできます。
- [px] - ピクセル単位の絶対値。
- [%] - コンテナーの幅 (左、右) と高さ (上、下) のパーセンテージ。
[サイズ] 設定は、コンテナーの幅と高さの組み合せです。特定の値を [幅] と [高さ] に設定することも、[自動] 選択して自動的に設定されるようにすることもできます。
さらに細かく制御するには、[高さモード] オプションを変更します。
- [固定] - 幅と高さを別々に設定します。これがデフォルトです。
- [縦横比] - 幅の値および幅と高さの縦横比だけを設定します。
例
次に、推奨されるサイズと位置の設定の組み合せについて説明します。
- カスタムの幅の場合、[左] または [右] のカスタム値を設定し、その他の値に [自動] を選択します。
- カスタムの高さの場合、[上] または [下] のカスタム値を設定し、その他の値に [自動] を選択します。
- 幅に [自動] を選択した場合、[左] と [右] のカスタム値を設定します。または、[左] または [右] のカスタム値だけを設定して、幅がウィジェットのコンテンツに合うようにします。
- 高さに [自動] を選択した場合、[上] と [下] のカスタム値を設定します。または、[上] または [下] のカスタム値だけを設定して、高さがウィジェットのコンテンツに合うようにします。
スクロール ページのブロック
スクロール ページをアプリに追加すると、そのレイアウトはブロック内に整理されます。ブロックは、行ウィジェットで使用したようなマルチフィールドのグリッド レイアウトを使用します。
ブロックには次の [サイズ] と [位置] の設定があります。
- [幅] - 固定幅をページの割合で設定します。
- [高さ] - 高さをピクセル単位で設定するか、[自動] を選択して、ブロックの高さを自動的に設定します。
- [オフセット X] - 水平方向のオフセットをピクセル単位で設定します。
- [オフセット Y] - 垂直方向のオフセットをピクセル単位で設定します。
ブロック内でネストされたウィジェット
ブロックに追加するウィジェットの幅は、ブロックのグリッド レイアウト内で 1 ～ 12 行の範囲です。ブロック内でネストされたウィジェットの高さの値のみを指定できます。その幅はグリッドにより制御されます。高さの設定を [自動] に変更すると、自動的に設定されます。
[高さ] 設定には、次の 3 種類があります。
- [コンテナーに合わせる] - 親コンテナーの全高を使用します。これがデフォルトです。
- [固定] - 高さをピクセル単位でカスタム設定します。
- [縦横比] - 幅および幅と高さの縦横比に基づいて高さを自動的に計算します。
[固定] または [縦横比] を選択した場合、次の [配置] オプションのいずれかを選択できます。
- [上] - ウィジェットをブロックの上に垂直に揃えます。
- [下] - ウィジェットをブロックの下に垂直に揃えます。
- [中央] - ウィジェットをブロックの中央で垂直に揃えます。