Styleパネルでのエレメントの見た目の変更.

1ページ内の1つのエレメントに独自の見た目が必要なときにStyleパネルを使います。色付きのカード、薄くしたロゴ、キャンペーンカラーのボタンなどです。変更はその場でページに反映されます。全ページ共通の見た目（すべてのボタンの色など）には、代わりにテーマを変えます。そこの1度の編集でサイト全体が更新されます。

動画では最初の手順どおりに、パートナーロゴをポインターが届くまで薄くしています。

始める前に

• ページをDXPR Builderで開きます。エレメントにポイントするとMore付きのコントロールバーが表示されます。ビルダーが初めての場合は最初のページをご覧ください。
• Save（ダイアログ）では、変更はエディター内に保持されます。コンテンツ上部のビルダーツールバーにあるSaveでページを保存し、「Saved field」と表示されます。

設定はStyleパネルで行い、1つのエレメントのものです。そのページのコンテンツに保存され、テーマには保存されません。来年にブランドカラーが変われば、手で色付けした各エレメントは編集するまで古い色のままです。

• 見た目を使い回すには、スタイル付きのエレメントをMore > Save as templateでテンプレートとして保存するか、HTML classesで共有クラスを付けます。ユーザーテンプレートとHTML IDとクラスをご覧ください。
• スウォッチから色を選びます。サイトにある場合はテーマのカラーパレット由来です。スウォッチは色をコピーするため、後のパレット変更は反映されません。

手順：ポインターが届くまでロゴを薄くする

パートナーロゴの列は、ロゴを薄くすると落ち着いて見えます。この手順では1つのロゴを薄くし、ホバーで戻します。

1. ロゴを表示するImageエレメントにカーソルを合わせ、More、Settingsの順にクリックします。
2. 次にStyleパネルを開き、Opacityを0.5にドラッグします。ドラッグに合わせてロゴが薄くなります。
3. 下のHover styleパネルを開き、Opacityを1にドラッグします。
4. ダイアログのSave、次にツールバーのSaveをクリックします。
5. ビルダーツールバーの表示メニュー（目アイコン）を開いてPreviewを選び、ロゴにポイントします。元の濃さに戻り、ポインターが離れると再び薄くなります。

列の各ロゴに手順を繰り返します。

手順：キャンペーンカラーのボタン

テーマはボタンにホバー色を持ちます。自分で設定したBackgroundはそのホバー色も置き換えるため、両方設定します。

1. ページ上でButtonエレメントにカーソルを合わせ、More、Settingsの順にクリックします。
2. 次にStyleパネルでBackgroundとFont colorを選びます。スウォッチをクリックするか、色フィールドに#e4002bのようなカラーコードを入力します。
3. ホバー時はHover styleパネルで濃いめのBackgroundを選びます。
4. ダイアログのSave、次にツールバーのSaveをクリックします。
5. 表示メニューでPreviewを選び、ボタンにポイントします。濃い色に変わります。

表示内容

ダイアログを開いている間、エレメントに各変更が表示されます。Previewでは、薄くしたロゴがポインターの下で元の濃さに戻り、キャンペーンボタンは濃い色に変わります。両方の見た目はページの再読み込み後も残ります。ツールバーのSaveで保存したためです。

各コントロールの範囲

範囲外の入力値は最も近い上限値に切り詰められます。ボックスモデルとロックの説明は間隔のページをご覧ください。

設定の振る舞い

テーマの初期値

空の色、0のスライダー、Theme defaultsの一覧、「-」表示のボックスモデル辺はすべて同じ意味です。DXPR Builderは何も書き込まず、テーマが決めます。そのためOpacityの0ではエレメントは隠れず、Font sizeの0ではテーマのサイズのままです。テーマの見た目に戻すには、カラーピッカーのClearをクリックするか、スライダーを0に戻すか、もう一度Theme defaultsを選びます。

設定の保存先

各Style設定はDrop shadowを除き、エレメントのインラインスタイルとして保存されます。インラインスタイルは通常のテーマCSSより優先されます。さらに勝つものが2つあります。!important付きのテーマルールと、HTML classesのBootstrapユーティリティクラス（こちらも!important付き）です。

一部のエレメントでは設定が内側に付きます。Buttonではボタン自体、Imageでは画像、Linkではリンク、Mapでは地図枠です。

すべての画面サイズ

スタイル設定にブレークポイントはありません。64 pxのパディングはスマートフォンでも64 pxです。パーセント値はページ幅に連動します。画面サイズ別の値には、HTML IDとクラスのページにあるレスポンシブクラスを使います。

Opacityは中のすべてを薄くする

Opacityはエレメント全体に作用します。ボックス、境界線、テキスト、中のすべてのエレメントを薄くします。濃いテキストの背後にある半透明ボックスには、Opacityを0のままにします。代わりに透明度付きのBackground色を選びます。カラーピッカーにはそのための不透明度スライダーがあります。

Hover style

Hover styleはStyleの下にある別のパネルです。独自のボックスモデルを含め、同じコントロールを持ちます。その値はポインターがエレメント上にある間に適用されます。Style値とは異なり、それ自体が!important付きのため、自分のStyle値、HTML classesのユーティリティクラス、ほとんどのテーマルールに勝ちます。

フェードインするのはDrop shadowのみで、0.15秒です。他のホバー変更はすぐに切り替わります。テーマがアニメーションする場合を除きます。Bootstrapボタンは0.15秒で色がフェードします。

スマートフォンとタブレットにポインターはありません。訪問者にはタップ後にのみホバー時の見た目が見えるため、必要な情報をそこに入れません。

独自設定を持つエレメント

同じ用途の独自設定を持つエレメントがあります。独自設定が優先され、Styleコントロールは効きません。

変更が表示されない場合

• ダイアログを閉じると変更が消えた。 Cancel、閉じるアイコン、Escapeキーで閉じたため、古い設定に戻っています。変更をやり直し、ダイアログのSaveをクリックします。
• ページの再読み込み後に変更が消えた。 Saveはダイアログではエディター内にのみ保持されます。ページを離れる前にツールバーのSaveをクリックします。
• テーマの見た目のままになっている。 HTML classesのBootstrapユーティリティクラスか、!important付きのテーマルールが優先されています。Generalパネルを開き、クラスチップ（例：Primary background）を外すか、テーマルールについてWeb担当者に確認します。
• コントロールがまったく効かない。 同じ用途の独自設定を持つエレメントがあります。独自設定を持つエレメントをご覧ください。
• ボタンのホバー色が変わらなくなった。 自分のBackgroundがテーマのホバー色を置き換えています。Hover styleパネルでもBackgroundを設定します。
• ボックスと一緒にテキストが薄くなった。 Opacityはエレメント全体を薄くします。0に戻し、透明度付きのBackground色を使います。
• Opacity 0でエレメントが隠れない。 0はTheme defaultsの意味です。代わりにHTML classesでHide element (d-none)クラスを追加します。

次のステップ

• 背景：見出しの背後に写真を置き、見出しを読みやすく保ちます。