--- url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/element-settings/typography' title: '文字サイズと色の変更 | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T14:21:21+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- リード文を大きくする、引用をブランドカラーにする、濃い写真の上の見出しを白くする。こうした変更はStyleパネルのFont sizeとFont colorで行い、1つのエレメント内のすべてのテキストに適用されます。テキストの一部には、代わりにテキストエディターのツールバーを使います。全ページ共通のサイズや色にはテーマを使います。 動画では以下の手順どおりに、1文を大きめのサイズとブランドカラーのリード文に変えています。 tags: - 'Style your elements' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 文字サイズと色の変更 description: |- リード文を大きくする、引用をブランドカラーにする、濃い写真の上の見出しを白くする。こうした変更はStyleパネルのFont sizeとFont colorで行い、1つのエレメント内のすべてのテキストに適用されます。テキストの一部には、代わりにテキストエディターのツールバーを使います。全ページ共通のサイズや色にはテーマを使います。 動画では以下の手順どおりに、1文を大きめのサイズとブランドカラーのリード文に変えています。 image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T14:21:21+0000' dateModified: '2026-10-24T17:19:22+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/element-settings/typography' articleSection: エレメントのスタイル - '@type': WebPage '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/element-settings/typography' description: |- リード文を大きくする、引用をブランドカラーにする、濃い写真の上の見出しを白くする。こうした変更はStyleパネルのFont sizeとFont colorで行い、1つのエレメント内のすべてのテキストに適用されます。テキストの一部には、代わりにテキストエディターのツールバーを使います。全ページ共通のサイズや色にはテーマを使います。 動画では以下の手順どおりに、1文を大きめのサイズとブランドカラーのリード文に変えています。 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) # 文字サイズと色の変更. DXPR Builderを学ぶページを作るエレメントのスタイル ## このガイドの内容 関連ガイド - [セクションへのリンクとクラスの使い回し](/ja/hc/documentation/learn-dxpr-builder/element-settings/custom-css) リード文を大きくする、引用をブランドカラーにする、濃い写真の上の見出しを白くする。こうした変更は**Style**パネルの**Font size**と**Font color**で行い、1つのエレメント内のすべてのテキストに適用されます。テキストの一部には、代わりにテキストエディターのツールバーを使います。全ページ共通のサイズや色にはテーマを使います。 動画では以下の手順どおりに、1文を大きめのサイズとブランドカラーのリード文に変えています。 ## 始める前に - ページをDXPR Builderで開きます。エレメントにポイントすると**More**付きのコントロールバーが表示されます。ビルダーが初めての場合は[最初のページ](/ja/hc/documentation/learn-dxpr-builder/getting-started/first-page)をご覧ください。 - **Save**（ダイアログ）では、変更はエディター内に保持されます。コンテンツ上部のビルダーツールバーにある**Save**でページを保存し、「Saved field」と表示されます。 - **Styleパネル**を1つのエレメントに使います。リード段落、引用、写真上の見出しなどです。 - **テキストエディター**をテキストの一部や構造に使います。見出しは**Heading 2**や**Heading 3**で本物の見出しにし、大きめの**Normal**行で代用しません。スクリーンリーダーと検索エンジンはサイズではなくレベルを読みます。 - **エディターのStyles一覧**をブランドのテキストスタイルに使います。Web担当者が**General Settings** > **Text Editor** > **Custom styles**（`/admin/dxpr_studio/dxpr_builder/settings`）で設定します。 - **テーマ**を本文フォント、見出しサイズ、リンク色に使います。 ## 手順：ブランドカラーのリード文 1. エレメントは**Text**を追加し、1〜2文を**Normal**テキストで入力します。 2. カーソルを合わせ、**More**、**Settings**の順にクリックします。 3. 次に**Style**パネルを開き、**Font size**を20にドラッグします。ドラッグに合わせてテキストが大きくなります。 4. 次に**Font color**を開き、スウォッチからブランドカラーを選ぶか、色フィールドに#1a4d8fのようなコードを入力します。 5. ダイアログの**Save**をクリックします。20 pxの文は通常テキスト扱いのため、4.5対1のコントラストが必要です。色コードと背景色をコントラストチェッカーに入力します。白いページは#ffffffです。 6. ツールバーの**Save**をクリックします。 ## 表示内容 文が20 pxに大きくなり、ブランドカラーになります。同じTextエレメント内の見出しとリンクもその色になりますが、見出しは独自のサイズを保ちます。 ## 設定の仕組み ### Font size **Font size**は0から100 pxで、0ではテーマのサイズのままです。値は全画面サイズ共通です。デスクトップの48 pxの行はスマートフォンでも48 pxです。 サイズはエレメントに付きます。独自サイズのテキストはそれを保ちます。見出しは通常そうで、Bootstrapがページの基本サイズから決めています。エディターのフォントサイズツールで決めたテキストもサイズを保ちます。 ### Font color ピッカーには、サイトにある場合にテーマのパレットがスウォッチで表示されます。不透明度スライダーと、#1a4d8fのようなカラーコードを入力するフィールドもあります。ピッカーの**Clear**ではテキストがテーマ色に戻ります。 Text、Card、Alertのようなコンテンツエレメントでは、色は中のすべて（見出しとリンクを含む）に届きます。**Section**では、独自の色を持たないテキストにのみ届きます。テーマで色付けされた見出しとリンクは、そこではその色を保ちます。 Bootstrapカラークラスは`!important`付きのため、**Font color**に勝ちます。一例は**HTML classes**にある**Primary text color**チップです。他に、テキストの一部にある**Primary Brand Text**のようなエディタースタイルがあります。 対象が**Button**では、色はボタン自体に付き、テーマのホバー色を置き換えます。**Font color**は**Hover style**でも設定します。 ### Hover ホバー用の設定は**Hover style**パネルにあり、独自の**Font color**と**Font size**を持ちます。ホバーでサイズを大きくすると周囲のコンテンツがずれるため、色変更の方が通常は穏やかです。 ## コントラスト 多くの人が読めるテキストには、WCAG 2のレベルAAで以下のコントラストが求められます。 | テキスト | 背景とのコントラスト | |---|---| | 通常テキスト | 4.5対1以上 | | 大きなテキスト：24 px（18 pt）以上、または太字で19 px（14 pt）以上 | 3対1以上 | 写真上では、テキスト背後の最も明るい部分で測ります。[WebAIM contrast checker](https://webaim.org/resources/contrastchecker/)のようなコントラストチェッカーで色の組み合わせを試します。 ## 表示されない場合 - **テキスト内の見出しが大きくならない。** 見出しはテーマ由来の独自サイズです。テキストエディターで他の見出しレベルを選ぶか、フォントサイズツールを使います。 - **リンクと見出しが色を保っている。** Sectionでは、テーマ由来の色のテキストはそのままです。代わりにTextエレメントに**Font color**を設定します。 - **Font colorがまったく効かない。** **HTML classes**にある**Primary text color**や**White text**のようなカラークラスが優先されています。そのチップを外します。 - **テキストの一部が他の色のままになっている。** その箇所の**Primary Brand Text**のようなエディタースタイルが優先されています。テキストエディターでスタイルを外します。 - **カウンターでFont sizeが効かない。** Circle counterとNumber counterには独自の**Font size**があります。そちらを使います。 - **スウォッチの色がブランドと合わなくなった。** スウォッチは選択時に色をコピーします。パレット変更後は、スウォッチを選び直します。 - **ブランドカラーがコントラスト検査に通らない。** 濃いめの色味を選びます。またはテキストを24 px以上にし、3対1の目標を適用します。 - **写真上のテキストが読みにくい。** コントラストが低すぎます。[背景](/ja/hc/documentation/learn-dxpr-builder/element-settings/background)のページの手順で、写真をグラデーションで濃くします。 - **ボタンのホバー文字色がなくなった。** 自分の**Font color**がテーマのホバー色を置き換えています。**Hover style**でも**Font color**を設定します。 ## 次のステップ - [HTML IDとクラス](/ja/hc/documentation/learn-dxpr-builder/element-settings/custom-css)：テキストスタイルは各エレメントへの設定ではなく、クラスで使い回します。