> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt
> Use this file to discover all available pages before exploring further.

# テーマを作成する

> Theme Builder でブランドカラー、フォント、再利用可能なコンポーネントを定義し、チームのウィジェット用の標準デザインシステムを構築します。

テーマを作成すると、チーム向けの標準化されたデザインシステムを定義できます。Theme Builder で特定の色を設定したり、ブランドフォントをアップロードしたり、コンポーネントを事前構築したりできます。

## 新しいテーマを作成する

1. 左サイドバーで **Studio** > **Themes** に移動します。
2. **Add a theme** をクリックします。
3. テーマの名前を入力し、影響する **Project(s)** を選択します。
4. (オプション)説明とタグを追加します。
5. **Next** をクリックして **Theme Builder** を開きます。

### 色を定義する

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/themes/create-a-theme/colors.png)
</Frame>

**Colors** セクションで、ユーザーが利用可能なパレットを定義します。

特定のブランドカラーにユーザーを制限するには、**Define theme colors** を **ON** に切り替えます。

* **色を追加:** 16 進数コードを入力するか **+** アイコンをクリックします。グラデーションから色を選択したり、不透明度を調整したり、スポイトツールを使って画面からサンプリングしたりできます。
* **色を管理:** 色をドラッグ アンド ドロップで並び替えます。**ゴミ箱** アイコンをクリックして色を削除します。

<Note>
  **Define theme colors** が **ON** のときにテーマにコンポーネントを追加すると、そのコンポーネントのデフォルトの色がテーマカラーのリストに自動的に追加されます。
</Note>

ここで追加した色は、Widget Studio の **Theme Colors** で利用できます。

#### ロックされた色の変更

色がテーマ内のコンポーネントによって現在使用されている場合、その色を削除することはできません。ただし、色を編集することはできます。色を変更すると、その色を使用するテーマ内のすべてのコンポーネントに変更が自動的に適用されます。

### フォントを追加する

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/themes/create-a-theme/fonts.png)
</Frame>

**Fonts** セクションでは、ユーザーがアクセスできる個別のタイポグラフィを決定します。リストからフォントをチェックしてテーマに含めます。検索バーを使って特定のフォントを検索します。

<Important>
  テーマにコンポーネントを追加するには、少なくとも 1 つのフォントを選択する必要があります。現在使用中のフォントを削除した場合、システムはリストの最初のフォントをデフォルトとして使用します。
</Important>

フォントを追加するには:

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/themes/create-a-theme/add-a-font.png)
</Frame>

1. **+ Add font** をクリックします。
2. フォントソースを選択します。
   * **From your website:** Font Family 名を入力します。
   * **Link to a font file:** Font Family 名とファイルの URL を入力します。
   * **Embed code:** Font Family 名とインポートコードを入力します。
3. **Preview & add** をクリックします。
4. 含めたいフォントの太さを選択します。
5. **Add** をクリックします。

### コンポーネントを追加して管理する

**Components** セクションでは、チーム向けに要素(ボタン、画像、フォームなど)を事前構成し、テーマで許可されるコンポーネントを定義できます。同じコンポーネントタイプを複数回追加してバリエーションを作成できます。たとえば、別個の「Submit」ボタンと「Cancel」ボタンを作成できます。

#### コンポーネントを追加する

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/themes/create-a-theme/add-components.png)
</Frame>

1. **Components** の横の **+ Add** をクリックします。
2. コンポーネントを検索するか、左サイドバーのカテゴリを参照します。
3. 含めたいコンポーネントを選択します。
4. **Add components** をクリックします。

#### コンポーネントを編集してロックする

コンポーネントがリストに追加されたら、**secondary actions**(3 点)メニューをクリックして管理します。

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/themes/create-a-theme/secondary-actions.png)
</Frame>

* **Rename:** コンポーネントに説明的な名前を付けます(例: "Primary CTA")。
* **Edit:** コンポーネントエディタを開き、[Widget Studio ツール](../widgets/create-a-widget-with-the-widget-studio/edit-your-widgets) を使ってスタイルを調整します。
* **Lock:** このコンポーネントの編集権限を制限します。代わりに、**Secondary actions** メニューの横の **lock** アイコンをクリックしてコンポーネントをロックすることもできます。
  * **ロック時:** ユーザーはコンテンツ(テキスト/画像)、位置、サイズのみ変更できます。色や枠線などのデザイン要素は変更できません。
  * **ロック解除時:** ユーザーはデザインを変更する完全な制御権を持ちます。

## テーマを有効化する

テーマの構成が完了したら、右上隅の **Activate** をクリックします。これでテーマは実験やパーソナライゼーションで使用可能になります。

後でテーマを無効化するには、ステータスのドロップダウン(**Active**)をクリックして **Deactivate** を選択するか、Themes ダッシュボードを使用します。