--- url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/design/colour-and-branding' title: 'ブランドカラーを使う | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:27:36+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- セクション、テキスト、ボタンにブランドカラーを適用し、すべてのページが同じサイトの一部に見えるようにします。DXPR Builderのすべての色フィールドにはテーマのパレットがスウォッチとして表示されるため、コードを推測する代わりにブランドカラーを選べます。例ではセクションにプライマリーブランドカラーを付け、白テキストにします。 動画では下記の手順に従います。セクションをブランドスウォッチで着色し、テキストを白にしています。 tags: - 'Design guides' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T11:27:36+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: ブランドカラーを使う description: |- セクション、テキスト、ボタンにブランドカラーを適用し、すべてのページが同じサイトの一部に見えるようにします。DXPR Builderのすべての色フィールドにはテーマのパレットがスウォッチとして表示されるため、コードを推測する代わりにブランドカラーを選べます。例ではセクションにプライマリーブランドカラーを付け、白テキストにします。 動画では下記の手順に従います。セクションをブランドスウォッチで着色し、テキストを白にしています。 image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T11:27:36+0000' dateModified: '2026-10-24T11:27:36+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/design/colour-and-branding' articleSection: デザインガイド - '@type': WebPage '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/design/colour-and-branding' description: |- セクション、テキスト、ボタンにブランドカラーを適用し、すべてのページが同じサイトの一部に見えるようにします。DXPR Builderのすべての色フィールドにはテーマのパレットがスウォッチとして表示されるため、コードを推測する代わりにブランドカラーを選べます。例ではセクションにプライマリーブランドカラーを付け、白テキストにします。 動画では下記の手順に従います。セクションをブランドスウォッチで着色し、テキストを白にしています。 breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: ホーム item: 'https://dxpr.com/ja' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: ja --- [ヘルプセンター](/ja/node/75)/[ドキュメント](/ja/hc/documentation) /[DXPR Builderを学ぶ](/ja/hc/documentation/learn-dxpr-builder) /[ページを作る](/ja/hc/documentation/learn-dxpr-builder/build) /[エレメントのスタイル](/ja/hc/documentation/learn-dxpr-builder/element-settings) /[デザインガイド](/ja/hc/documentation/learn-dxpr-builder/design/overview) # ブランドカラーを使う. DXPR Builderを学ぶページを作るエレメントのスタイルデザインガイド ## このガイドの内容 関連ガイド - [ホバーでエレメントを反応させる](/ja/hc/documentation/learn-dxpr-builder/design/hover-effects) - [カードをスタイルする](/ja/hc/documentation/learn-dxpr-builder/design/card-styles) - [テーマのCSSでビルダーコンテンツをスタイルする](/ja/hc/documentation/learn-dxpr-builder/customization/custom-css) セクション、テキスト、ボタンにブランドカラーを適用し、すべてのページが同じサイトの一部に見えるようにします。DXPR Builderのすべての色フィールドにはテーマのパレットがスウォッチとして表示されるため、コードを推測する代わりにブランドカラーを選べます。例ではセクションにプライマリーブランドカラーを付け、白テキストにします。 動画では下記の手順に従います。セクションをブランドスウォッチで着色し、テキストを白にしています。 ## 始める前に - ブランドカラーはテーマにあります。DXPR Themeでは**Appearance** > **Settings** > **DXPR Theme** (`/admin/appearance/settings/dxpr_theme`)の**Colors**パネルで設定します。 - DXPR Builderはそのパレットの最初の異なる10色をスウォッチとして表示します。 ## セクションを着色する 1. セクションにホバーして**More**を開き、**Settings**を選びます。 2. 開くのは**Style**パネルです。 3. クリックするのは**Background**のカラーボタンです。カラーピッカーがスウォッチ付きで開きます。 4. プライマリーブランドスウォッチをクリックします。 5. クリックするのは**Font color**のカラーボタンで、白を選びます。 6. クリックするのは**Save**です。段落テキストは白に変わり、見出しはテーマの見出し色を保ちます。 7. 見出しも白にするには、その**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**にします。 ## 次のステップ - [ホバーでエレメントを反応させる](/hc/documentation/learn-dxpr-builder/design/hover-effects)：訪問者がエレメントを指したら色を変える。 - [カードをスタイルする](/hc/documentation/learn-dxpr-builder/design/card-styles)：カードに色を適用する。 - [カスタムCSS](/hc/documentation/learn-dxpr-builder/customization/custom-css)：パネルで対応できないブランドルールを設定する。