> ## 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.

# Widget Studioカスタムコードエディタ

> Widget StudioコードエディタでカスタムCSSとJavaScriptを記述し、ウィジェット要素にスタイルを適用したり、オンデマンドでスクリプトを実行したりします。

Widget Studioでカスタム CSSまたはJSコードを作成し、任意のウィジェット要素にカスタムスタイルを適用したり、コマンドでスクリプトを実行したりできます。

この記事では、次の方法を学びます。

* カスタムCSSを追加する
* ウィジェット要素にCSSコードを適用する
* JSコードを追加する
* コードビューを変更する

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/insert-html-code-in-your-widget/widget-studio-custom-code-editor/0.png)
</Frame>

## ユースケースの例

カスタムコードの一般的なユースケースは、各要素にスタイルプロパティを手動で設定するのではなく、ウィジェット要素に同じスタイルを複数回適用することです。技術者でないユーザーは、開発者に事前定義のCSSクラスを作成してもらうとよいでしょう。

## カスタムCSSコードを追加する

1. 左メニューで **Custom code** をクリックします。**Custom CSS** オプションが選択された状態でページが開きます。
2. コードエディタにCSSコードを追加します。

## ウィジェット要素にCSSコードを適用する

1. **Design** セクションを開きます。
2. 要素を選択します。この要素は、コードエディタで作成したクラスの1つに従ってスタイル設定されます。
3. 下にスクロールして **Css and classes** セクションを展開します。
4. **Element ClassName** フィールドにクラス名を追加するか、親要素にこのクラスを適用したい場合は **Container ClassName** に追加します。

<Note>
  カスタムコードに従ってスタイル設定された選択された要素は、右側のプレビューエリアには表示されません。**カメラアイコン**をクリックして変更を確認する必要があります。
</Note>

## JSコードを追加する

JSコードを追加すると、ウィジェットでカスタムスクリプトをオンデマンドで実行できます。

1. 左サイドバーの **Custom code** をクリックします。
2. **Custom JS** をクリックします。
3. コードエディタにJSコードを追加します。

<Note>
  スクリプトの実行を確認するには、**カメラアイコン**をクリックします。
</Note>

## コードビューを変更する

CSSとJSコードの両方を扱っている場合、両方のコードを同時に読みたいことがあります。複数のコードエディタを追加するには:

1. コードエディタの上、右上隅にある **Add Panel** アイコンをクリックします。
2. 必要に応じて各パネルのサイズを手動で変更します。

パネルを閉じるには、コードブックマーク（JSまたはCSS）の右側にある **X** をクリックします。