Experience Builder で、各ウィジェットのデフォルトのスタイル設定を変更して、サイズ、位置、アニメーション、背景、枠線、およびボックスの影などのプロパティをカスタマイズできます。 追加先のページ タイプ、またはサイズと位置を自動的に制御する親コンテナー (行や列など) によって課せられる制約に応じて、オプションは異なります。
スタイルの設定
ウィジェットの構成パネルの [スタイル] タブには、Web エクスペリエンスを構成するとき、ウィジェットを区別するアイコンとラベルを変更するためのオプションが含まれています。
注意:
次の画像形式をアップロードできます: PNG、GIF、JPG、JPEG、BMP。
アイコンと名前は、アクティブなページの [アウトライン] ビューおよびウィジェットを接続する際の選択リストに表示されます。
ウィジェットをキャンバス周辺にドラッグして移動およびサイズ変更するのではなく、サイズと位置の明示的な値を設定できます。 サイズと位置の設定は、ウィジェットが幅、高さ、および位置によってページ上にどのように配置されるかを定義します。 これらの値をピクセル (px) またはパーセント (%) で指定して、コンテンツの表示方法を決めることができます。 全画面ページまたはスクロール ページに追加されるウィジェットに適したサイズと位置の設定については、以下のセクションをご参照ください。
ヒント:
ウィジェットを整列し、正確に配置できるよう、キャンバス上でウィジェットをドラッグするとスナップ ラインと距離値が表示されます。あるいは、固定レイアウト (フルスクリーン ページ、ウィンドウ、サイドバー、リストなど) で手動で移動し、サイズ変更する方法もあります。 距離を計算できる場合、値は、ウィジェットからコンテナーの辺までの距離と、近くのウィジェットまでの距離を示します。 (位置にパーセンテージ、サイズ設定にピクセルを使用するウィジェットは計算できません。) スナップ ラインが表示されると、対応するウィジェットがすべての画面解像度でスナップします。
ほとんどのウィジェットに共通するスタイル設定には、次のものがあります。
- [親コンテナー内に維持] - ネストされたウィジェットが親ウィジェットの境界線の外にドラッグされないようにします。
- [アニメーション] - フライイン、スピン イン、フェード インなどの効果を使用して、目立つアニメーション スタイルを設定します。 また、セクション ビュー間を移動するトランジション モードを設定することもできます。
- [背景] - 塗りつぶし色または画像を選択して、ウィジェットの背景を設定します。 画像を選択した場合、[フィット]、[塗りつぶし]、[中央揃え]、[タイル]、または [ストレッチ] を使用してウィジェットの枠線内に配置できます。 [フィット] を選択すると、ウィジェットは画像の周りに背景の塗りつぶし色を表示します。
- [枠線] - 枠線の色、スタイル (破線または点線)、および幅 (ピクセル単位) を選択して、ウィジェットの枠線を設定します。 半径サイズ (ピクセルまたはパーセント) を変更して、ウィジェットの角を作成します。 すべての角に同じ半径を使用することも、それぞれの角で個別に半径サイズを指定することもできます。
- [ボックスの影] - 次の設定を使用してウィジェットの周囲に影の効果を追加します。
- [オフセット X] - 影の水平距離を設定します。 負の値にするとウィジェットの左側に影が配置され、正の値にすると右側に配置されます。
- [オフセット Y] - 影の垂直距離を設定します。 負の値にするとウィジェットの上側に影が配置され、正の値にすると下側に配置されます。
- [ぼかしの半径] - ぼかし効果を影に追加します。
- [拡張の半径] - 影のサイズを調整します。
- [色] - 影の色を選択します。
全画面ページのレイアウト
全画面ページをアプリに追加した場合、自由形状のレイアウト内でウィジェットを整理します。 ウィジェットをキャンバス周辺にドラッグして移動およびサイズ変更すると、それに応じて、[スタイル] パネルの [サイズと位置] の設定が更新されます。
[サイズ] 設定は、コンテナーの幅と高さの組み合わせです。 ウィジェットの幅と高さは、以下の 3 つのモードで設定できます。
- [カスタム] - デフォルトの [カスタム] モードで [幅] と [高さ] に特定の値を設定できます。 幅が [ストレッチ] または [カスタム] に設定されている場合、ロック アイコンをクリックすると、縦横比を維持したままドラッグしてサイズ変更することができます。
- [自動] - サイズ値を [自動] に設定すると、ウィジェットのコンテンツに基づいてプロパティが自動的に設定されます。 これは、動的コンテンツを表示するウィジェットに使用できます。
- [ストレッチ] - コンテナーのサイズに基づいてウィジェット サイズを設定します。
注意:
[サイズ] 設定の例外として、列ウィジェットや行ウィジェットの中にウィジェットを配置できます。 たとえば、列ウィジェットの中に画像ウィジェットを配置する場合、画像の [幅] には 2 つのモード ([ストレッチ] および [カスタム]) しかありませんが、どちらも [高さ] を [カスタム] に設定することで縦横比を維持したままサイズを設定できます。
ウィジェットの [位置] は、各辺からコンテナーまでの距離 (左、右、上、下) で定義されます。 たとえば、左はウィジェットの左端が親コンテナーの左端に対してオフセットされる距離を意味しています。 ウィジェットを追加する際、方向の入力ボックスに値を入力することで左と上の距離を指定でき、反対方向の [カスタムに変更] をクリックするか、カスタマイズされた方向の [自動に変更] をクリックして、カスタマイズされた方向を変更することができます。
[サイズ] モードを変更すると、それに応じて [位置] 設定も変更されます。 たとえば、幅が [カスタム] または [自動] に設定されている場合、左または右のどちらかを変更することはできますが、それ以外の位置は自動的に設定されます。 幅を [ストレッチ] に設定した場合、左および右の両側への距離をカスタマイズして位置を設定できますが、幅はコンテナー幅の残りの長さで自動的に設定されます。 高さも同様ですが、上と下に対応しています。
また、[スタイル] パネルの上部にあるツールバーのボタンをクリックして位置を変更することもできます。 たとえば、ウィジェットを親コンテナーの水平中央に配置できます。この場合、左と右の位置方向は両方とも [自動] モードになります。
位置とサイズの両方の長さ単位を変更することもできます。
- [px] - ピクセル単位の絶対値。
- [%] - コンテナーの幅と高さのパーセンテージ。
[回転] 設定に正の整数を指定することでウィジェットを時計回りに、負の整数を指定することでウィジェットを反時計回りに回転させることができます。
例
次に、推奨されるサイズと位置の設定の組み合わせについて説明します。
- カスタムの幅の場合、[左] または [右] のカスタム値を設定し、その他の値に [自動] を選択します。
- カスタムの高さの場合、[上] または [下] のカスタム値を設定し、その他の値に [自動] を選択します。
- 幅に [自動] を選択した場合、[左] と [右] のカスタム値を設定します。または、[左] または [右] のカスタム値だけを設定して、幅がウィジェットのコンテンツに合うようにします。
- 高さに [自動] を選択した場合、[上] と [下] のカスタム値を設定します。または、[上] または [下] のカスタム値だけを設定して、高さがウィジェットのコンテンツに合うようにします。
スクロール ページのブロック
スクロール ページをアプリに追加すると、そのレイアウトはブロック内に整理されます。 ブロックは、行ウィジェットで使用したようなマルチフィールドのグリッド レイアウトを使用します。
ブロックには次の [サイズ] と [位置] の設定があります。
- [幅] - 固定幅をページの割合で設定します。
- [高さ] - 高さをピクセル単位で設定するか、[自動] を選択して、ブロックの高さを自動的に設定します。
- [オフセット X] - 水平方向のオフセットをピクセル単位で設定します。
- [オフセット Y] - 垂直方向のオフセットをピクセル単位で設定します。
ヒント:
スクロール ページでウィジェットを表示したままにするには、ウィジェットのツールバーの [ピン] ボタンをクリックします。
ブロック内でネストされたウィジェット
ブロックに追加するウィジェットの幅は、ブロックのグリッド レイアウト内で 1 ～ 12 行の範囲です。 ブロック内でネストされたウィジェットの高さの値のみを指定できます。その幅はグリッドにより制御されます。
[高さ] モードには、次の 3 種類があります。
- [ストレッチ] - 親コンテナーの全高を使用します。 これがデフォルトです。
- [自動] - 高さの値は、ウィジェットのコンテンツに応じて自動的に設定されます。
- [カスタム] - 高さの値を px または % で指定できます。 [縦横比を維持] をオンにすると、縦横比を維持したままウィジェットをドラッグしてサイズを変更できます。
[自動] または [カスタム] を選択した場合、次の [配置] オプションのいずれかを選択できます。
- [上] - ウィジェットをブロックの上に垂直に揃えます。
- [下] - ウィジェットをブロックの下に垂直に揃えます。
- [中央] - ウィジェットをブロックの中央で垂直に揃えます。
[回転] 設定では、正または負の整数を指定してウィジェットを時計回りまたは反時計回りに回転させることができます。
アニメーション
アニメーションは Experience Builder でサポートされており、ウィジェットの表示方法をカスタマイズできます。 付属の効果とオプションを使用して、次のような環境を構築できます。
- アプリを読み込む際にウィンドウに回転アイコンを表示する。
- ページを下にスクロールする際にウィジェットがフライ インする。
- セクションを移動する際、後のビューが前のビューをプッシュする。
- カード ウィジェットの上にポインターを合わせると、説明がフェード インする。
次の 4 つのレベルのアニメーションがサポートされています。
- ページ/ウィンドウ レベル - フレームワークでサポートされ、ページ/ウィンドウ設定で使用できます。 第 1 レベルのすべてのウィジェットが表示される際のアニメーションを制御します。
注意:
第 1 レベルのウィジェットとは、ページ/ウィンドウに直接追加されたウィジェットを意味し、レイアウト ウィジェット内にネストされたウィジェットは含まれません。 ネスト関係は、[アウトライン] ビューで確認できます。
- コンテナー レベル - フレームワークでサポートされ、ブロック、固定パネル、サイドバー、行、列、セクション ウィジェットの [スタイル] タブで利用できます。 コンテナーの表示方法と、コンテナーに直接含まれているウィジェットが表示される際のアニメーションを制御します (ネストされたウィジェットは含まれません)。 セクション ウィジェットの場合は、ビューの切り替え方法も制御します。
- 単一ウィジェット レベル - フレームワークでサポートされ、ウィジェット設定の [スタイル] タブから使用できます。 ウィジェット自体の表示方法を制御します。
注意:
下位レベルのアニメーションは上位レベルのアニメーションをオーバーライドします。 たとえば、ウィジェットが行内に追加されている場合、ウィジェット設定でアニメーションをなしに設定すると、行で定義されたアニメーションが再生されます。 なしに設定されていない場合は、ウィジェット設定のアニメーションが再生されます。
- 内部ウィジェット レベル - ウィジェット自体でサポートされ、ウィジェット設定の [コンテンツ] タブで使用できます。 ウィジェット内でのユーザー操作のアニメーションを制御します。 たとえば、ブックマーク ウィジェットでは、ユーザーがブックマークを切り替えるとトランジション効果が再生され、カード ウィジェットではポインターを合わせると詳細が表示されるアニメーションが用意されています。
レイアウト コンテナーのアニメーション (ブロック、固定パネル、サイドバー、行、列) は、2 つの部分から構成されています。 コンテナー アニメーションでは、コンテナー パネルの表示方法をカスタマイズできます。 [含まれるウィジェット] アニメーションでは、コンテナー内に直接追加されたウィジェットの表示方法をカスタマイズできます。 2 つのアニメーション効果は同時に再生され、最終的なアニメーションはオーバーレイ効果となります。 組み合わせの結果をプレビューするには、[プレビュー] ボタンをクリックします。
セクション パネルの表示効果を制御する [イン] アニメーションのほか、セクション ウィジェットには [トランジション] アニメーションという名前の別のアニメーション設定があり、そのビューのアニメーションを制御します。 [ビュー] タブはビュー パネルのトランジション方法を制御し、[ウィジェット] タブはビュー内のウィジェットの表示方法を制御します。 セクションが表示される際 (ページが読み込まれた状態、またはスクロール中)、現在のビューのウィジェット アニメーションが [イン] アニメーションとともに再生されます。 ビューを切り替えると、ウィジェット アニメーションはビュー アニメーションの後に再生されます。
アニメーションの設定
- アニメーションのサムネイルまたは [変更] ボタンをクリックして、効果パネルを開きます。
- 効果のサムネイルをクリックし、単一の効果を選択してプレビューします。
- [プレビュー] ボタンをクリックして、全体の効果または効果の組み合わせをプレビューします。
- 一部の効果には、その他の設定オプションが用意されています。
- [効果] - 連続的で自然なマイクロ効果オプションが用意されています。
- [方向] - フライ インやフロート インなどの効果の動作方向を定義します。