---
title: WYSIWYG カスタムカラーの設定方法
description: Kurocoで利用するWYSIWYGのFont ColorやFont Background Colorの色を独自に設定する方法を説明します。
---

Kurocoで利用するWYSIWYGの[Font Color]や[Font Background Color]の色を、WYSIWYGごとに独自に設定できます。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/e279f0ab305bf431909a973a5d9d212a.png)
## 設定方法

設定したい[コンテンツ定義](/ja/docs/management/content-structure-topics-group/)の編集画面にて、色を変えたいWYSIWYGの項目設定を開きます。  
「カスタムカラー」にカンマ区切りでカラーコードを入力してください。  
入力したカラーコードの色をWYSIWYGで使用できます。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/5c6b18fa200a9c66d375699c8f655709.png)

:::info
コンテンツ定義編集画面への遷移方法、WYSIWYGの項目設定方法については、  
「[コンテンツ定義](https://kuroco.app/ja/docs/management/content-structure-topics-group/#%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E5%AE%9A%E7%BE%A9%E7%B7%A8%E9%9B%86)」「[コンテンツ定義で利用できる拡張項目一覧（WYSIWYG）](https://kuroco.app/ja/docs/reference/list-of-extra-column-available-on-content/)」をご確認ください。
:::

### 設定例

下記のように設定した場合。
```
#000000,#FFFFFF,#EEEEEE,#CBFFD3,#FFFFDD,#DDFFFF,#FFDDFF,#EE0000
```
下記の表示となり、色が変わっていることが分かります。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/44f30d139a5a5f3aebf3d8ff5c3dfe74.png)

### 注意点

- 使用している全てのWYSIWYGの項目設定に、設定して頂く必要があります。1つの記事グループ内で複数のWYSIWYGを使用している場合は注意してください。
- 1つのWYSIWYG内では同じ設定となります。例えば、[Font Color]と[Font Background Color]の色を1つのWYSIWYG内で変えることはできません。

## 16色以上の色を使用したい場合
項目設定のWYSIWYGでは、「大きなカラーパレット」を有効にすると、15色以上のカラーコードの設定が可能になります。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/8c55b6a73a6e8979dc42d7f4bc5ad874.png)

![Image from Gyazo](https://t.gyazo.com/teams/diverta/9e2ff218b502a163cf63584004743ef4.png)

## 「内容」のWYSIWYGを変更する場合
[コンテンツ定義](/ja/docs/management/content-structure-topics-group/)の[カスタムテンプレート][wysiwyg_options]に、`customColors::カラーコード1,カラーコード2,カラーコード3,,,`と記載をしてください。  

:::tip
15色までカラーコードの設定が可能です。
:::

![Image from Gyazo](https://t.gyazo.com/teams/diverta/7a675dc0bf3063350f5dcec12c0dd308.png)

![Image from Gyazo](https://t.gyazo.com/teams/diverta/8a0b52d6f848898f95af85c668af8905.png)
