ブランドカラーを使う.
セクション、テキスト、ボタンにブランドカラーを適用し、すべてのページが同じサイトの一部に見えるようにします。DXPR Builderのすべての色フィールドにはテーマのパレットがスウォッチとして表示されるため、コードを推測する代わりにブランドカラーを選べます。例ではセクションにプライマリーブランドカラーを付け、白テキストにします。
動画では下記の手順に従います。セクションをブランドスウォッチで着色し、テキストを白にしています。
始める前に
- ブランドカラーはテーマにあります。DXPR ThemeではAppearance > Settings > DXPR Theme (
/admin/appearance/settings/dxpr_theme)のColorsパネルで設定します。 - DXPR Builderはそのパレットの最初の異なる10色をスウォッチとして表示します。
セクションを着色する
- セクションにホバーしてMoreを開き、Settingsを選びます。
- 開くのはStyleパネルです。
- クリックするのはBackgroundのカラーボタンです。カラーピッカーがスウォッチ付きで開きます。
- プライマリーブランドスウォッチをクリックします。
- クリックするのはFont colorのカラーボタンで、白を選びます。
- クリックするのはSaveです。段落テキストは白に変わり、見出しはテーマの見出し色を保ちます。
- 見出しも白にするには、そのTextエレメントのSettingsを開き、StyleパネルでFont colorに白を選んでSaveをクリックします。
表示内容
セクションはブランドカラーで埋まり、段落テキストと見出しは白になります。同じスウォッチがすべての色フィールドに表示されます。StyleとHover styleパネル、セクションのGradient背景のStart colorとEnd colorが含まれます。
パレット外の色を使うには、ピッカーのテキストフィールドにコードを入力します(例: #2196F3)。透ける色には不透明度スライダーを動かします。Clearは色を除去します。
色をテーマに連動させる
スウォッチは色のコードをエレメントにコピーします。後からテーマパレットを変更しても、そのエレメントは古い色を保ちます。
エレメントをパレットに追従させるには、代わりにカラークラスを使います。エレメントのSettingsを開き、HTML classes配下のチップを選びます。
| チップ | 動作 |
|---|---|
| Primary background、Secondary backgroundなど | テーマのBootstrapカラー |
| Primary text color、Secondary text colorなど | テーマのBootstrapテキストカラー |
| Background color: DXPR Theme primary | DXPR ThemeのPrimaryカラーと対応するテキストカラー |
| Text color: DXPR Theme accent1 | テキスト用のDXPR ThemeのSecondaryカラー |
対象はDXPR Themeチップで、DXPR Theme有効時のみ表示されます。
エレメントごとの色フィールド
| 場所 | 着色対象 |
|---|---|
| Styleパネル。Font color、Border color、Background | エレメント自体 |
| Hover styleパネル。同じフィールド | ポインターがある間のエレメント |
| ButtonのType | 既製のボタンの配色 |
| CardのType | カード全体の背景とテキスト |
| AlertのType | Success、Info、Warning、Danger |
| SectionのBackground effects > Gradient | 2色のブレンド |
読みやすい色
- テキストと背景のコントラストを十分に保ちます。WCAG 2.1レベルAAは通常テキストに最低4.5対1を求めます。
- 意味の伝達に色だけを使わず、ラベルやアイコンと組み合わせます。
- 白、ライトグレー、ブランドカラーなどセクション背景を交互に使い、長いページにリズムを付けます。
色が表示されない場合
- カラーピッカーにスウォッチがありません。サイトのデフォルトテーマにカラーパレットがありません。カラーコードを入力するか、DXPR Themeのようなパレット付きテーマを使います。
- テーマパレット変更後もエレメントが古い色のままです。スウォッチは固定のカラーコードを保存します。新しいスウォッチを選ぶか、パレットに追従するHTML classes配下のカラーチップに切り替えます。
- カードではBackgroundやFont colorが効きません。カードのTypeがDefault以外の場合、テーマクラスで色が設定されて優先されます。先にTypeをDefaultにします。
次のステップ
- ホバーでエレメントを反応させる：訪問者がエレメントを指したら色を変える。
- カードをスタイルする：カードに色を適用する。
- カスタムCSS：パネルで対応できないブランドルールを設定する。