---
title: "再利用可能なスタイル"
description: "テキストや色の設定をスタイルとして保存し、任意の要素に適用することで、それらを使用するすべての要素を一括更新できます。"
---

> **AI agents**: to search Adapty docs faster and with fewer tokens, install the Adapty skills: `npx adapty skills install --yes`

スタイルを作成してテキスト設定やフィル（カラー、グラデーション、背景画像など）を保存し、複数の画面上の要素で再利用できます。スタイルを編集すると、そのスタイルを使用しているすべての要素と画面に変更が反映されます。

スタイルのセットは各フローごとに独立しています。

**Styles** Styles パネルを開くと、フローのスタイルを作成・閲覧・編集できます：

- **テキストスタイル**: タイポグラフィ設定（フォント、ウェイト、サイズ）。
- **カラースタイル**: カラー、グラデーション、画像などの塗りつぶし。1つのカラースタイルに、ライトモードとダークモードそれぞれ別バージョンを含めることができます。

## テキストスタイル \{#text-styles\}

:::link
メイン記事：[テキストコンテンツ](onboarding-text)
:::

テキストスタイルは、フォントファミリー、ウェイト、サイズ、行間、文字間隔などのタイポグラフィ設定をまとめて保存したものです。すべてのフローテンプレートにはデフォルトのプリセットが含まれており、カスタムスタイルを作成することもできます。

テキストスタイルを作成するには：

1. **Styles** Styles パネルを開きます。
2. パネルヘッダーで Create style **Create style** をクリックします。
3. **Type** を **Text** に設定し、名前を入力してタイポグラフィ設定を行います。
4. **Create** をクリックします。

テキスト要素の現在のタイポグラフィ設定を新しいテキストスタイルとして保存するには、フォントピッカーのタブの横にある Create text style をクリックします。その要素には新しいスタイルが適用されます。

テキストスタイルを適用するには、テキスト要素を選択し、**Typography** セクションのフォントドロップダウンからスタイルを選択します。

テキストスタイルを編集するには、**Styles** パネルで対象のスタイルをクリックし、設定を変更して **Save** をクリックします。

## カラースタイル \{#color-styles\}

カラースタイルとは、保存された[フィル](builder-styling#fill)のことで、単色・グラデーション・画像・動画、またはそれらの組み合わせを指します。[ダークテーマ](#dark-mode)を使用している場合は、テーマごとに異なるバージョンを設定できます。スタイルエントリに表示される数字は、そのスタイルを使用している要素と画面の数を示しています。

### カラースタイルを作成する \{#create-a-color-style\}

カラースタイルを作成するには：

1. **Styles** Styles パネルを開きます。
2. パネルヘッダーで Create style **Create style** をクリックします。
3. **Type** を **Color** に設定し、名前を入力します。
4. スタイルを設定します。レイヤーの色や[塗りつぶしタイプ](#edit-a-color-style)を変更したり、その上に[レイヤーを追加](#multi-layer-styles)したりできます。
5. **Save** をクリックします。

フィルレイヤーまたはカラーの現在の値をスタイルに変換するには、スウォッチをクリックし、**Custom** と **Styles** タブの横にある Create color style アイコンをクリックして、**Save** をクリックします。これでフィルレイヤーまたはカラーがそのスタイルを使用するようになります。

### カラースタイルを編集する \{#edit-a-color-style\}

カラースタイルを編集するには：

1. **Styles** Styles パネルを開きます。
2. **Colors** タブを選択します。
3. スタイルのエントリをクリックします。
4. 各バージョンには複数の[レイヤー](#multi-layer-styles)を設定できます。スウォッチをクリックして、塗りつぶしタイプに応じてレイヤーを設定します：
    - [単色](#solid-colors)
    - [グラデーション](#gradients)
    - [画像または動画](#images-and-videos)

#### 単色 \{#solid-colors\}

1. 色を設定します：16進数の値を入力するか、スウォッチをクリックして選択します。
2. スライダーで不透明度を設定します。
3. **Save** をクリックします。

#### グラデーション \{#gradients\}

1. Gradient **Gradient** フィルタイプを選択します。
2. ストップ、ストップカラー、および **Direction** を設定します。
3. **Save** をクリックします。

:::tip
背景画像の上にあるテキスト要素を読みやすくするには、その後ろにある[画像の端を暗くします](paywall-head-picture#tint-a-background)。画像の上に[レイヤー](#multi-layer-styles)としてグラデーションを追加し、その端の不透明なストップからもう一方の端の透明なストップへとグラデーションを流します。
:::

#### 画像と動画 \{#images-and-videos\}

画像・動画要素は、ダークテーマ用に別のファイルを設定することができません。代わりに、コンテナを作成して[背景をカラースタイルに設定](paywall-dark-mode#recipe-add-an-image-that-changes-with-the-theme)してください。各スタイルバージョンで、画像または動画レイヤーを設定します。

1. Image **Image** または Video **Video** のフィルタイプを選択します。
2. 下部ツールバーで選択した[ロケール](custom-media#localize-media)のソースファイルをアップロードします。すでにファイルがアップロードされている場合は、**Replace** をクリックして置き換えることができます。
3. **Save** をクリックします。

:::tip
画像や動画に色味を加えたい場合は、その上に半透明のカラー[レイヤー](#multi-layer-styles)を重ねてください。
:::

### マルチレイヤースタイル

カラースタイルの各バージョンには、複数のレイヤーを重ねることができます。マルチレイヤースタイルを使えば、色調補正された画像など、より複雑なビジュアルを作成できます。

レイヤーを追加するには、スタイルのエントリをクリックします。次に、**Properties**、**Light**、または **Dark** セクションで Plus ボタンをクリックします。既存のレイヤーの上に新しいレイヤーが追加されます。レイヤーの順序を変更するには、各行をドラッグしてください。新しいレイヤーを設定したら、**Save** をクリックします。

スタイルを適用するすべての場所にすべてのレイヤーが表示されるわけではありません。特定のプロパティや要素にスタイルを適用した場合にのみ表示されるレイヤーもあります：

- **塗りつぶし（入力フィールドとピッカー）**: 最下層のみ。他のレイヤーは無視されます。
- **塗りつぶし（その他すべての要素）**: すべてのレイヤー。
- **ボーダー（入力フィールドとピッカー）**: 単色またはグラデーションのみ。画像・動画レイヤーは無視されます。
- **ボーダー（その他すべての要素）**: 単色およびグラデーション。画像・動画レイヤーは無視されます。
- **テキストカラー**: 単色レイヤーのみ。グラデーション・画像・動画レイヤーは無視されます。バージョンに単色レイヤーがない場合、そのモードではテキストに色が設定されず、非表示になります。
- **アイコン、シャドウ、およびその他のカラー**: 複数レイヤーのスタイルには対応していません。単色の単一レイヤースタイルのみ適用できます。

### カラースタイルを適用する \{#apply-a-color-style\}

カラースタイルを要素に適用するには、フィルレイヤー、テキストカラー、ボーダーカラー、またはアイコンカラーのスウォッチをクリックします。**Styles** タブをクリックしてスタイルのエントリを選択し、静的な値をスタイルに置き換えます。必要な値のスタイルがない場合は、[現在の値をスタイルとして保存](#create-a-color-style)してください。

画面上の多くの要素にスタイルを一括適用するには、[AI Editor](flow-ai-editor) に依頼してください。たとえば、`Apply the Card background style to all cards` のように指示します。フロー全体にわたってスタイルを設定・適用するには、[flow-generator スキル](flow-generator-skill)を使用してください。

画像や動画要素にはフィルがないため、カラースタイルを適用できません。代わりにコンテナを作成し、[その背景を設定](paywall-dark-mode#recipe-add-an-image-that-changes-with-the-theme)してください。

## スタイルの管理 \{#manage-styles\}

**Styles** Styles パネルで:

- スタイルの名前を変更するには、エントリをクリックして **Name** フィールドを変更し、**Save** をクリックします。
- スタイルを複製するには、エントリを右クリックして **Duplicate** を選択します。
- スタイルを削除するには、エントリをクリックして **Delete style** をクリックします。要素に使用されているスタイルを削除する場合は、代替スタイルを選択します。
- スタイルの順序を変更するには、エントリをリスト上でドラッグして並べ替えます。
- スタイルを別のフローにコピーするには、エントリを選択し（複数選択する場合は Shift+クリック）、⌘C / Ctrl+C を押します。コピー先のフローで同じタブ（**Text** または **Colors**）を開き、⌘V / Ctrl+V を押します。

## ダークモード \{#dark-mode\}

:::link
メインの記事: [ダークモード](paywall-dark-mode)
:::

カラースタイルにはダークモード用の値を別途設定できます。ユーザーのデバイスがダークモードに設定されている場合、フローはその値を使用します。

ダーク値を使用するには、フローに[ダークテーマを追加](paywall-dark-mode#add-a-dark-theme)してください。次に、ダークモードで異なる表示にしたい各スタイルの[ダーク値を変更](paywall-dark-mode#configure-the-dark-theme)します。