Color Picker
EmDash CMS 内でエディターフレンドリーなビジュアル設定を行うためのカラーピッカー フィールド ウィジェットを追加します。
プラグイン
Color Picker
EmDash CMS 内でエディターフレンドリーなビジュアル設定を行うためのカラーピッカー フィールド ウィジェットを追加します。
カラー ピッカーは、エディター エクスペリエンスに焦点を当てたプラグインです。カラー ピッカー フィールド ウィジェットが追加されるため、管理者はプレーン テキスト フィールドに 16 進コードを入力する代わりに、ブランド カラーを視覚的に設定できます。これは、EmDash プラグインが高度な統合だけでなく、日常の編集 UX も向上させることを示しています。 EmDash リポジトリの packages/plugins/color を参照してください。
インストール
- EmDash 管理者から Color Picker プラグインを有効にします。
- コンテンツ モデルまたはスキーマで、デザイナーが色を選択する必要があるフィールド (テーマのアクセント、ボタンの色、カテゴリ バッジ) にカラー ウィジェットをアタッチします。
- 管理 UI をプレビューして、ピッカーが表示され、保存時に値が保持されることを確認します。
構成
通常は次のように定義します。
- デフォルトの色 — 新しいエントリのブランドセーフな開始点。
- 許可される形式 — テーマが使用する内容に応じて、16 進数、RGB、または CSS 変数。
- コントラストまたはアクセシビリティに関するヒント - 特定の色が既知の背景に対して WCAG コントラストを満たす必要がある場合、一部のチームはフィールドの説明にメモを追加します。
例 (概念的): マーケティング テンプレートは、primaryColor および secondaryColor を #2563eb および #64748b として保存し、ビルド時に設定される CSS 変数を介して Astro コンポーネントで参照される場合があります。
使用シナリオ
- テーマのカスタマイズ — 新しい展開を行わずに、各キャンペーンにわずかに異なるアクセントが必要なマーケティング サイト。
- デザイン システム — 散在するインライン スタイルではなく、構造化フィールド内にパレットの選択肢を保持します。
- ホワイトラベル製品 — パートナーは、定義したガードレール内の色を選択します。
運用上のヒント
- エンジニアが重複をハードコーディングしないように、色がフロントエンド トークンにどのようにマッピングされるかを文書化します。
- ヘルスケア ブランド サイトでネオン グリーンをブロックする必要がある場合は、保存時に値を検証します。
- コンテンツをエクスポートするときは、再インポートによってスタイルが失われないように、移行チェックリストにカラー フィールドを含めます。
レジストリの状態（2026-10-21 確認）： 当日に確認した EmDash 公開レジストリの結果にこの項目はありませんでした。参照用に既存ページの URL は維持しています。