---
title: WYSIWYGエディタの使用方法
description: KurocoのWYSIWYGエディタの使用方法を説明します。Kurocoで利用するWYSIWYGエディタは、Microsoft Wordのような直観的で、誰でも簡単にコンテンツを作成・編集することができます。
---

Kurocoで利用するWYSIWYGエディタは、Microsoft Wordのような直観的で、誰でも簡単にコンテンツを作成・編集できます。  
また、Sourceモードに切り替えると、直接HTMLを編集できますので、HTMLの知識がある方はより柔軟にコンテンツ制作が行えます。  
Sourceモードへの切替えはアイコンツールの[Source]のクリックで切り替わりますので、デザインやレイアウトを確認しながらHTML編集をスムーズに行うことができます。

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

:::info
WYSIWYGエディタでは、空のタグが消される、scriptタグが消される、不明なタグが補完されるなど、HTMLのタグに自動で修正が入る場合があります。
HTMLを厳密に管理したい場合は[HTML](/ja/docs/reference/list-of-extra-column-available-on-content/#html)の項目を利用してください。
:::

## アイコンツールの説明

|項目   |説明  |
| :--- | :--- |
|![Image from Gyazo](https://t.gyazo.com/teams/diverta/2fe7885c70b33aa4b05afa72b4c90458.png)<br/>ソース|デザイン編集とHTML編集モードの切り替えを行います。|
|![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/b06cfd6ad14623f42983d0a85e4353c3.png)<br/>FullScreen|WYSIWYGエディタをフルスクリーンモードにします。|
|![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/aafe2e2e823c00ad6f8c52c6f1b6f265.png)<br/>見出し|見出しタグを設定します。|
|![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/6bd418b102ddab3508e927d0c8571198.png)<br/>文字揃え|文章の[左揃え]、[右揃え]、[中央揃え]、[均等揃え]を制御します。|
|![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/471fb7cc8057b2721462fa10b3253fc2.png)<br/>ボールド|太文字(B.png)を設定します。|
|![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/4a358b5b7e2e96715cefbde8aa32bb9e.png)<br/>イタリック|イタリック文字(I.png)を設定します。|
|![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/78b9908b7dde184f768e593955c8d6a1.png)<br/>アンダーライン|下線(U.png)を設定します。|
|![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/d7136bac6f4a83d7fedc0adb4426a897.png)<br/>画像やファイルの挿入|KurocoFilesに保存した画像を選択して挿入することができます。|
|![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/56dc20f03a40c3f2f961ba79b982679f.png)<br/>画像挿入|直接自分のローカル（デスクトップ等）から画像を挿入します。挿入した画像は自動的にKurocoFilesの/fiese/user/topoics_img/配下もしくは「リソースを指定」で設定したディレクトリに保存されます。|
|![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/b4f77a48df55e4a613f17a20ec8e1561.png)<br/>メディアの挿入|動画を挿入します。アイコンをクリックすると下記のウィンドウが表示されますので、URLを入力してください。<br/>![Image from Gyazo](https://t.gyazo.com/teams/diverta/957b93bf67060b08e7352e87efa7b254.jpg)<br/>利用可能なMedia URLについては[CKEditorのドキュメント](https://ckeditor.com/docs/ckeditor5/latest/features/media-embed.html#media-providers.png)をご参照ください。|
|![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/d952980c2163a5095d361c79c88908c5.png)<br/>リンク|リンクの挿入と編集を行います。リンクを設定したい文字列をドラッグし、アイコンをクリックしてください。リンクを設定する場合は、下記のウィンドウが表示されますので、URLを入力してください。<br/>![Image from Gyazo](https://t.gyazo.com/teams/diverta/58fae71fc209823748edf0af1f03247f.jpg)<br/>Open in a new tabを有効にすると、aタグに`target="_blank"`が設定されます。|
|![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/3ab58abf3a3ed03173ef05b2b0538bc7.png)<br/>表の挿入|表を挿入します。アイコンをクリックすると下記のウィンドウが表示されるので、行・列を指定します。<br/>![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/fe4f28ad40de52e152ec21bb2c7975bd.png)|
|![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/fc34fc74b0d01e857aac5350ab428d8e.png)<br/>フォントサイズ|文字の大きさを変更できます。|
|![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/514f8ae01bbacd7482fdd06b4cb78158.png)<br/>文字色|文字の色を設定します。|
|![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/8c195675e43d6bad0b64d77aff2cece8.png)<br/>背景色|文字の背景の色を設定します。|
|![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/ca13556f1e27711097fbd44dccb132ba.png)<br/>フォントファミリー|文字の種類（フォント）を変更できます。|
|![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/4177acb84ad445d4afe6732c3effa904.png)<br/>箇条書きリスト|文章をリスト形式で表示します。箇条書きにしたい文章をドラッグし、アイコンをクリックしてください。|
|![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/d998943aea249210da54487e7640828a.png)<br/>番号付きリスト|文章を数字のリスト形式で表示します。箇条書きにしたい文章をドラッグし、アイコンをクリックしてください。|
|![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/5ed3834d0237ae930aee6cebdb1d8e38.png)<br/>ブロッククオート（引用）|文書を引用する際に使用します（段落ごと引用する場合など）|
|![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/6438a2c7a1c8e9b2062f01b618717a73.png)<br/>コードブロックの挿入|コードブロックを追加します。コードブロックしたいソース部分をドラッグし、アイコンをクリックしてください。|
|![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/92e8b22d947b761bff1fe3994c397a26.png)<br/>元に戻す|行った編集作業を元に戻すことができます。|
|![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/19502810ce053dd607f14a89be7a63ef.png)<br/>やり直し|元に戻した作業をやり直すことができます。|
|![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/a793d8b1523f4ac18b23d0978a5b7719.png)<br/>検索して置換|検索と置換ができます。アイコンをクリックすると下記のウィンドウが表示されます。<br/>![Image from Gyazo](https://t.gyazo.com/teams/diverta/8cd938bf304f62f3898d50249d98ff32.png)|
|![Image from Gyazo](https://t.gyazo.com/teams/diverta/60927c2982f24d146604a25b3be3cada.png)<br/>Templates|事前に保存したWYSIWYGテンプレートを呼び出します。|
|![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/c5776fe89346736e4d450ae9a839bb16.png)<br/>他の項目を表示|隠れているアイコンを表示します。|

## アイコンツールの編集方法

WYSIWYGエディタを拡張項目で設定する場合、表示するアイコンは[コンテンツ定義編集の拡張項目](/ja/docs/management/content-structure-topics-group/#%E6%8B%A1%E5%BC%B5%E9%A0%85%E7%9B%AE)で調整が可能です。  
設定可能な項目は主に以下になります。
- 横幅
- 縦幅
- 削除するプラグイン
- カスタムカラー
- 大きなカラーパレット
- シンプルなツールバー
- フォントサイズをpx指定

### 設定例
コンテンツ定義画面の拡張項目の項目設定で以下のように設定してください。

```
横幅:800
縦幅:500
削除するプラグイン:italic, underline
大きなカラーパレット:有効にする
```

<a href="https://diverta.gyazo.com/58604ac3a601809de5d9fe01bffd54b9" className="no-zoom" target="_blank" rel="noopener noreferrer"><img src="https://t.gyazo.com/teams/diverta/65a825e664be4e98683b5ab8a10073ea.jpg" alt="Image from Gyazo" width="799"/></a>

### 表示例

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

### 削除するプラグインで指定できる文字列の一覧

項目設定の「削除するプラグイン」フィールドに文字列を指定することで、ツールバーより不要なアイコンを削除できます。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/928d2d2c5677c2a1a714f261156c64d6.jpg)

フィールドに利用可能な文字列は以下の通りです。

|項目   |文字列  |
| :--- | :--- |
|   ソース  |`SourceEditing`|
|   FullScreen  |`fullScreen`|
|   見出し |`heading`   |
|   文字揃え  |`alignment`|
|   ボールド    |`bold`|
|   イタリック  |`italic`|
|   アンダーライン   |`underline`|
|   画像やファイルの挿入  |`ckfinder`|
|   画像挿入    |`insertImage`   |
|   メディアの挿入    |`mediaEmbed`|
|   リンク    |`link`|
|   表の挿入    |`insertTable`   |
|   フォントサイズ   |`fontSize`|
|   文字色  |`fontColor`|
|   背景色   |`fontBackgroundColor`   |
|   フォントファミリー |`fontFamily`|
|   箇条書きリスト   |`bulletedList`|
|   番号付きリスト   |`numberedList`|
|   ブロッククオート（引用） |`blockQuote`|
|   コードブロックの挿入   |`codeBlock`|
|   元に戻す    |`undo`|
|   やり直し    |`redo`|
|   検索して置換    |`findAndReplace`|
|   Templates | `templates`|

## 相対パスの補完

WYSIWYGエディタ内で`/files/`から始まる相対パスはAPIで取り出す際に、KurocoFilesドメイン(`kuroco-img.app`)が自動で付与されます。

## 関連ドキュメント
- [WYSIWYG カスタムカラーの設定方法](/ja/docs/reference/wysiwyg-custom-color-settings/)
- [Iframely自動変換を利用するには？](/ja/docs/faq/how-to-auto-convert-iframes/)
- [WYSIWYGエディタに入力されたソースが自動変換されないように出来ますか？](/ja/docs/faq/can-i-prevent-sources-entered-into-the-wysiwyg-editor-from-being-automatically-converted/)
- [コンテンツ定義で利用できる拡張項目一覧](/ja/docs/reference/list-of-extra-column-available-on-content/#wysiwyg)