> ## Documentation Index
> Fetch the complete documentation index at: https://dripart-docs-recommend-assets-api.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# ComfyUI の外観をカスタマイズする
> カラーパレットと高度な CSS オプションを使用して ComfyUI の外観をカスタマイズする方法を学びます
このページで説明されている設定は、**ComfyUI アプリ内の設定メニュー**にあります。**設定**（歯車アイコン）をクリックするか、`Ctrl + ,` キーボードショートカットを使用して設定パネルを開き、対応するカテゴリを選択してこれらのオプションを確認・設定できます。
ComfyUI は、インターフェースを好みに合わせてパーソナライズできる、柔軟な外観カスタマイズオプションを提供します。
## カラーパレットシステム
ComfyUI の外観をカスタマイズする主な方法は、組み込みのカラーパレットシステムを通じて行います。
これにより、以下のことが可能になります：
1. ComfyUI テーマの切り替え
2. 現在選択中のテーマを JSON 形式でエクスポート
3. JSON ファイルからカスタムテーマ設定を読み込み
4. カスタムテーマ設定を削除
カラーパレットでは満たせない外観のニーズについては、[user.css](#advanced-customization-with-user-css) ファイルを通じて高度な外観カスタマイズを行うことができます
### カラーテーマのカスタマイズ方法
カラーパレットを使用すると、多くの特定のプロパティを変更できます。以下は最も一般的にカスタマイズされる要素の一部で、色は 16 進数形式で表されています：
1. 以下の JSON コメントは説明用です。テーマが正常に機能しなくなるため、以下の内容をコピーして修正しないでください。
2. 頻繁に迭代を行っているため、以下の内容は ComfyUI フロントエンドの更新に伴って変更される可能性があります。修正が必要な場合は、設定からテーマ設定をエクスポートしてから修正してください。
```json theme={null}
{
"id": "dark", // 一意である必要があります。他のテーマ ID と同じにすることはできません
"name": "Dark (Default)", // テーマ名。テーマセレクターに表示されます
"colors": {
"node_slot": { // ノード接続スロットの色設定
"CLIP": "#FFD500", // CLIP モデル接続スロットの色
"CLIP_VISION": "#A8DADC", // CLIP Vision モデル接続スロットの色
"CLIP_VISION_OUTPUT": "#ad7452", // CLIP Vision 出力接続スロットの色
"CONDITIONING": "#FFA931", // 条件制御接続スロットの色
"CONTROL_NET": "#6EE7B7", // ControlNet モデル接続スロットの色
"IMAGE": "#64B5F6", // 画像データ接続スロットの色
"LATENT": "#FF9CF9", // 潜在空間接続スロットの色
"MASK": "#81C784", // マスクデータ接続スロットの色
"MODEL": "#B39DDB", // モデル接続スロットの色
"STYLE_MODEL": "#C2FFAE", // スタイルモデル接続スロットの色
"VAE": "#FF6E6E", // VAE モデル接続スロットの色
"NOISE": "#B0B0B0", // ノイズデータ接続スロットの色
"GUIDER": "#66FFFF", // ガイダー接続スロットの色
"SAMPLER": "#ECB4B4", // サンプラー接続スロットの色
"SIGMAS": "#CDFFCD", // Sigmas データ接続スロットの色
"TAESD": "#DCC274" // TAESD モデル接続スロットの色
},
"litegraph_base": { // LiteGraph ベースインターフェース設定
"BACKGROUND_IMAGE": "", // 背景画像。デフォルトは空
"CLEAR_BACKGROUND_COLOR": "#222", // メインキャンバス背景色
"NODE_TITLE_COLOR": "#999", // ノードタイトルテキスト色
"NODE_SELECTED_TITLE_COLOR": "#FFF", // 選択されたノードのタイトル色
"NODE_TEXT_SIZE": 14, // ノードテキストサイズ
"NODE_TEXT_COLOR": "#AAA", // ノードテキスト色
"NODE_TEXT_HIGHLIGHT_COLOR": "#FFF", // ノードテキストハイライト色
"NODE_SUBTEXT_SIZE": 12, // ノードサブテキストサイズ
"NODE_DEFAULT_COLOR": "#333", // ノードデフォルト色
"NODE_DEFAULT_BGCOLOR": "#353535", // ノードデフォルト背景色
"NODE_DEFAULT_BOXCOLOR": "#666", // ノードデフォルト枠線色
"NODE_DEFAULT_SHAPE": 2, // ノードデフォルト形状
"NODE_BOX_OUTLINE_COLOR": "#FFF", // ノード枠線アウトライン色
"NODE_BYPASS_BGCOLOR": "#FF00FF", // ノードバイパス背景色
"NODE_ERROR_COLOUR": "#E00", // ノードエラー状態色
"DEFAULT_SHADOW_COLOR": "rgba(0,0,0,0.5)", // デフォルトシャドウ色
"DEFAULT_GROUP_FONT": 24, // グループデフォルトフォントサイズ
"WIDGET_BGCOLOR": "#222", // ウィジェット背景色
"WIDGET_OUTLINE_COLOR": "#666", // ウィジェットアウトライン色
"WIDGET_TEXT_COLOR": "#DDD", // ウィジェットテキスト色
"WIDGET_SECONDARY_TEXT_COLOR": "#999", // ウィジェットセカンダリテキスト色
"WIDGET_DISABLED_TEXT_COLOR": "#666", // ウィジェット無効状態テキスト色
"LINK_COLOR": "#9A9", // 接続線色
"EVENT_LINK_COLOR": "#A86", // イベント接続線色
"CONNECTING_LINK_COLOR": "#AFA", // 接続中の線色
"BADGE_FG_COLOR": "#FFF", // バッジ前景色
"BADGE_BG_COLOR": "#0F1F0F" // バッジ背景色
},
"comfy_base": { // ComfyUI ベースインターフェース設定
"fg-color": "#fff", // 前景色
"bg-color": "#202020", // 背景色
"comfy-menu-bg": "#353535", // メニュー背景色
"comfy-menu-secondary-bg": "#303030", // セカンダリメニュー背景色
"comfy-input-bg": "#222", // 入力フィールド背景色
"input-text": "#ddd", // 入力テキスト色
"descrip-text": "#999", // 説明テキスト色
"drag-text": "#ccc", // ドラッグテキスト色
"error-text": "#ff4444", // エラーテキスト色
"border-color": "#4e4e4e", // 枠線色
"tr-even-bg-color": "#222", // テーブル偶数行背景色
"tr-odd-bg-color": "#353535", // テーブル奇数行背景色
"content-bg": "#4e4e4e", // コンテンツエリア背景色
"content-fg": "#fff", // コンテンツエリア前景色
"content-hover-bg": "#222", // コンテンツエリアホバー背景色
"content-hover-fg": "#fff", // コンテンツエリアホバー前景色
"bar-shadow": "rgba(16, 16, 16, 0.5) 0 0 0.5rem" // バーシャドウ効果
}
}
}
```
## キャンバス
### 背景画像
* **要件**: ComfyUI フロントエンドバージョン 1.20.5 以降
* **機能**: キャンバスにカスタム背景画像を設定し、よりパーソナライズされたワークスペースを提供します。画像をアップロードするか、ウェブ画像を使用してキャンバスの背景を設定できます。
## ノード
### ノードの不透明度
* **機能**: ノードの不透明度を設定します。0 は完全透明、1 は完全不透明を表します。
## ノードウィジェット
### テキストエリアウィジェットのフォントサイズ
* **範囲**: 8 - 24
* **機能**: テキストエリアウィジェット内のフォントサイズを設定します。テキスト入力ボックス内の文字表示サイズを調整し、可読性を向上させます。
## サイドバー
### 統一サイドバー幅
* **機能**: 有効にすると、異なるサイドバー之间を切り替える際、サイドバーの幅は統一された幅になります。無効にすると、異なるサイドバーは切り替え時にカスタム幅を維持できます。
### サイドバーサイズ
* **機能**: サイドバーのサイズを制御します。通常または小に設定できます。
### サイドバーの位置
* **機能**: サイドバーをインターフェースの左側または右側に表示するかを制御し、ユーザーが使用習慣に応じてサイドバーの位置を調整できるようにします。
### サイドバーのスタイル
* **機能**: サイドバーの視覚スタイルを制御します。オプションには以下が含まれます：
* **Connected**: サイドバーがインターフェースの端に接続されて表示されます。
* **Floating**: サイドバーがフローティングパネルとして表示され、インターフェースの端から視覚的に分離されます。
## ツリーエクスプローラー
### ツリーエクスプローラーのアイテムパディング
* **機能**: ツリーエクスプローラー（サイドバーパネル）内のアイテムのパディングを設定し、ツリー構造内のアイテム間の間隔を調整します。
## user.css を使用した高度なカスタマイズ
カラーパレットでは十分な制御ができない場合、user.css ファイルを通じてカスタム CSS を使用できます。この方法は、カラーパレットシステムで利用できない要素をカスタマイズする必要がある上級ユーザーに推奨されます。
### 要件
* ComfyUI フロントエンドバージョン 1.20.5 以降
### user.css の設定
1. ComfyUI ユーザーディレクトリ（ワークフローと設定と同じ場所 - 詳細は下記参照）に `user.css` という名前のファイルを作成します
2. このファイルにカスタム CSS ルールを追加します
3. ComfyUI を再起動するかページをリフレッシュして変更を適用します
### ユーザーディレクトリの場所
The ComfyUI user directory is where your personal settings, workflows, and customizations are stored. The location depends on your installation type:
```
C:\Users\<ユーザー名>\AppData\Roaming\ComfyUI\user
```
```
~//ComfyUI/user
```
```
~/.config/ComfyUI/user
```
ユーザーディレクトリは、ComfyUI のインストールフォルダー内にあります：
```
/user
```
たとえば、ComfyUI を `C:\ComfyUI` にクローンした場合、ユーザーディレクトリは `C:\ComfyUI\user\default` になります（カスタムユーザー名を設定している場合は、`C:\ComfyUI\user\john` のように変わります）。
ComfyUI では、1つのインストールに対して複数のユーザーをサポートしています。カスタムユーザー名を設定していない場合、デフォルトで「default」となります。各ユーザーには、`user` フォルダー内の個別のサブディレクトリが割り当てられます。
ユーザーディレクトリは、ComfyUI のポータブルフォルダー内にあります：
```
/ComfyUI/user
```
たとえば：`ComfyUI_windows_portable/ComfyUI/user/default`
ComfyUI では、1つのインストールに対して複数のユーザーをサポートしています。カスタムユーザー名を設定していない場合、デフォルトで「default」となります。各ユーザーには、`user` フォルダー内の個別のサブディレクトリが割り当てられます。
この場所には、ワークフロー、設定、およびその他のユーザー固有のファイルが格納されます。
上記のフォルダ場所を見つけた後、対応する CSS ファイルを対応するユーザーディレクトリにコピーしてください。デフォルトのユーザーフォルダは `ComfyUI/user/default` です。その後、ComfyUI を再起動するかページをリフレッシュして変更を適用します。
### user.css の例および関連説明
`user.css` ファイルはアプリケーション起動プロセスの早期にロードされます。そのため、デフォルトスタイルを上書きするために、CSS ルールで `!important` を使用する必要がある場合があります。
**user.css カスタマイズ例**
```css theme={null}
/* 可読性を向上させるために、入力欄とメニューのフォントサイズを大きくする */
.comfy-multiline-input, .litecontextmenu .litemenu-entry {
font-size: 20px !important;
}
/* 選択しやすくするために、コンテキストメニューの項目を大きくする */
.litegraph .litemenu-entry,
.litemenu-title {
font-size: 24px !important;
}
/* カラーパレットで利用できない特定の要素のカスタムスタイル */
.comfy-menu {
border: 1px solid rgb(126, 179, 189) !important;
border-radius: 0px 0px 0px 10px !important;
backdrop-filter: blur(2px);
}
```
**ベストプラクティス**
1. 大多数のカスタマイズには**まずカラーパレットを使用する**
2. カラーパレットでカバーされていない要素には、**必要な場合にのみ user.css を使用する**
3. 必要に応じて元に戻せるように、**大きな変更を行う前にテーマをエクスポートする**
4. 他者を刺激するために**テーマをコミュニティと共有する**
**トラブルシューティング**
* カラーパレットの変更が表示されない場合は、ページをリフレッシュしてみてください
* CSS カスタマイズが機能しない場合は、フロントエンドバージョン 1.20.5+ を使用しているか確認してください
* 適用されていない user.css ルールに `!important` を追加してみてください
* カスタマイズを簡単に復元できるようにバックアップを保持してください