---
title: Kuroco管理画面のWYSIWYGエディタに任意のCSSを適用する
description: Kuroco管理画面のWYSIWYGエディタにCSSファイルを読み込ませて任意のCSSを適用する手順を説明します。
---

## 概要
Kuroco管理画面のWYSIWYGエディタにCSSファイルを読み込ませることで、コンテンツに任意のCSSを適用できます。

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

### 学べること
以下の手順でWYSIWYGエディタに任意のCSSを適用する方法を学びます。
- [WYSIWYGエディタにHTMLを書く](#wysiwygエディタにhtmlを書く)
- [CSSファイルを作成する](#cssファイルを作成する)
- [CSSをエディタに適用する](#cssをエディタに適用する)
- [スタイルの適用を確認する](#スタイルの適用を確認する)

## WYSIWYGエディタにHTMLを書く
コンテンツ定義の項目設定でWYSIWYG項目を作成し、ソースモードでHTMLを書きます。この段階では、HTMLはただのテキストリンクとして表示されます。

`<a class="style-button" href="">Button</a>`

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

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

## CSSファイルを作成する
`content-styles.css` というCSSファイルを作成します。ファイル名は自由に命名していただいて構いません。ただし、CSSセレクタの先頭には必ず .ck-content を付けてください。

:::danger
CSSセレクタの先頭に.ck-contentが無い場合、Kuroco管理画面の表示に影響を与える可能性があります。  
WYSIWYGエディタに適用するCSSには、必ず.ck-content を付与してください。  
参考：[CKEditor-Content styles](https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/content-styles.html)
:::

```css
.ck-content .style-button {
    padding: 8px 16px;
    border-radius: 8px;
    background-color: #2C7BE5;
    color: #fff;
    text-decoration: none;
}
```
このCSSファイルをファイルマネージャーにアップします。ここでは `/styles/wysiwyg/` というフォルダを作成し、その中にCSSファイルをアップロードします。

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

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/15654160e8b0344689b65d140c4af2b9.png)

## CSSをエディタに適用する
### 項目毎に設定する場合
CSSを読み込ませたいWYSIWYGエディタがあるコンテンツ定義編集ページに移動します。  
項目設定でWYSIWYG項目の[カスタムテンプレート]->[カスタマイズCSS]に `/files/user/styles/wysiwyg/content-styles.css` と入力します。

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

### 全てのWYSIWYGに対して設定する場合
コンテンツ編集画面の全てのWYSIWYGエディタにCSSを読み込ませる場合は、コンテンツ定義の[詳細設定]->[カスタマイズCSS]に `/files/user/styles/wysiwyg/content-styles.css` と入力します。

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

## スタイルの適用を確認する
WYSIWYGエディタに戻り、ソースモードで先ほどと同じHTMLを入力します。ソースモードから通常モードに切り替えると、ボタンに設定したスタイルが適用されていることが確認できます。  

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

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