Skip to main content
カスタムCSSとカスタムJSはどちらも任意です。1つのウィジェットで一方または両方を使用できます。 この記事では、次の方法を学びます。
  • カスタムCSSコードを追加する
  • ウィジェット要素にCSSコードを適用する
  • JSコードを追加する
  • 複数のコードエディタを表示する
Inactive なウィジェットの Widget Studio Custom code ビュー。Custom CSS が選択され、エディタに CSS のコメント例が表示されています

​
ユースケースの例

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

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

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

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

  1. Design セクションを開きます。
  2. コードエディタで作成したクラスの1つでスタイルを設定する要素を選択します。
  3. 下にスクロールして CSS and classes セクションを展開します。
  4. Element ClassName フィールドにクラス名を追加するか、親要素にこのクラスを適用したい場合は Container ClassName に追加します。
camera iconをクリックするまで、右のプレビューエリアにはカスタムスタイルは表示されません。

​
JSコードを追加する

JSコードを追加すると、ウィジェット用のカスタムスクリプトを記述できます。
  1. 左サイドバーの Custom code をクリックします。
  2. Custom JS をクリックします。
  3. コードエディタにJSコードを追加します。
スクリプトの実行を確認するには、camera iconをクリックします。

​
複数のコードエディタを表示する

CSSとJSコードの両方を扱っている場合、両方を同時に表示したいことがあります。複数のコードエディタを表示するには:
  1. コードエディタの右上隅にある Add Panel アイコンをクリックします。
  2. 必要に応じて各パネルのサイズを手動で変更します。
パネルを閉じるには、コードブックマーク（JSまたはCSS）の右側にある X をクリックします。