文字サイズと色の変更.

リード文を大きくする、引用をブランドカラーにする、濃い写真の上の見出しを白くする。こうした変更はStyleパネルのFont sizeとFont colorで行い、1つのエレメント内のすべてのテキストに適用されます。テキストの一部には、代わりにテキストエディターのツールバーを使います。全ページ共通のサイズや色にはテーマを使います。

動画では以下の手順どおりに、1文を大きめのサイズとブランドカラーのリード文に変えています。

始める前に

• ページをDXPR Builderで開きます。エレメントにポイントするとMore付きのコントロールバーが表示されます。ビルダーが初めての場合は最初のページをご覧ください。
• 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で以下のコントラストが求められます。

写真上では、テキスト背後の最も明るい部分で測ります。WebAIM contrast checkerのようなコントラストチェッカーで色の組み合わせを試します。

表示されない場合

• テキスト内の見出しが大きくならない。 見出しはテーマ由来の独自サイズです。テキストエディターで他の見出しレベルを選ぶか、フォントサイズツールを使います。
• リンクと見出しが色を保っている。 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の目標を適用します。
• 写真上のテキストが読みにくい。 コントラストが低すぎます。背景のページの手順で、写真をグラデーションで濃くします。
• ボタンのホバー文字色がなくなった。 自分のFont colorがテーマのホバー色を置き換えています。Hover styleでもFont colorを設定します。

次のステップ

• HTML IDとクラス：テキストスタイルは各エレメントへの設定ではなく、クラスで使い回します。