CMS:色フィールドを追加・接続する

読了時間:13分
CMS(コンテンツ管理システム)コレクションに、「色」フィールドを追加して要素に接続し、サイト上の要素の色を管理します。「色」フィールドを使用すると、サイト全体で各要素の色を動的に変化させることができます。コレクションのアイテムごとに特定の色を指定し、接続されたテキスト要素、ボタン要素、セクションの背景色などに、その色を適用することができます。これにより、エディタから各要素の色を手動で変更することなく、ダッシュボードの CMS コレクションから、それらの色をまとめて更新することができます。

たとえば、ネットショップを運営している場合なら、「色」フィールドを使用することで、商品名のテキストの色や商品の背景色を、CMS コレクションのアイテムで指定した色でまとめて更新することができます。

この機能は、サイト共同管理者がエディタからではなく、ダッシュボードからサイト上の要素の色を管理できるようにしたいパートナーにとって特に便利です。
重要:
現在、「色」フィールドは段階的にリリース中のため、一部の Wix アカウントではご利用いただけない場合があります。
ボタン要素のさまざまな部分を、「色」フィールドに接続した様子を示したスクリーンショット。

コレクションに「色」フィールドを追加する

CMS コレクションに移動して「色」フィールドを追加し、各アイテムの色を指定します。各アイテムに複数の色を使用したい場合は、「色」フィールドを複数作成することができます。たとえば、テキストの色として使用する「色」フィールドを作成し、それとは別にセクションの背景色として使用する「色」フィールドを作成することができます。

コレクションに「色」フィールドを追加する方法:

  1. サイトダッシュボードの「CMS」にアクセスします。あるいは、エディタ内で「CMS をクリックし、「あなたのコレクション」をクリックします。
  2. 該当するコレクションをクリックします。
  3. フィールドを管理」をクリックします。
  4. +フィールドを追加」をクリックします。
  5. 」を選択し、「フィールドタイプを選択」をクリックします。
  6. フィールド名」にフィールド名を入力します。
  7. (コーディングのみ)サイトのコードで使用されている「フィールド ID」を更新します。この ID は後で更新することはできません。
  8. (オプション)コレクションにツールチップを表示する場合は、フィールド名の横に「ヘルプテキスト」を入力します。
  9. 保存」をクリックします。
コレクションに「色」フィールドを追加する様子を示したスクリーンショット。
  1. 該当するアイテムの「色」フィールドにマウスオーバーし、「色を選択」アイコン をクリックします。
    ヒント:16進数カラーコードで色を指定したい場合は、該当するアイテム横のフィールドで、「色を選択」アイコン をクリックする代わりに 16進数カラーコードを貼り付けます。
コレクションの「色」フィールドで、アイテムの色を選択する様子を示したスクリーンショット。
  1. サイトのテーマカラーまたは保存しているカラーから色を選択します。
    ヒント:「マイカラー」横の「+追加」をクリックすると、新しくカスタムカラーを追加することができます。
  2. コレクションのアイテムごとに、手順 10~11 を繰り返します。

テキスト要素を「色」フィールドに接続する

コレクションに「色」フィールドを追加したら、テキスト要素を「色」フィールドに接続することができます。これにより、テキスト要素の色が、接続された「色」フィールドの色に基づいて変化するようになります。
注意:
現在、折りたたみ可能テキスト、マーキーテキスト、テキストマスク要素を「色」フィールドに接続することはできません。
Wix エディタ
Wix Studio エディタ
  1. エディタで該当するページにアクセスします
  2. ページにテキスト要素を追加します:
    1. エディタ左側で「パーツを追加 をクリックします。
    2. テキスト」をクリックします。
    3. 追加するテキストの種類(おすすめテキストタイトル段落)をクリックします。
    4. 選択したテキストをクリック&ドラッグして、ページに追加します。
Wix エディタでテキスト要素を追加しているスクリーンショット。
  1. テキスト要素の「CMS に接続」アイコン  をクリックします。
  2. データセットを選択」ドロップダウンをクリックし、コレクションに接続されている既存のデータセットを選択します。または、「データセットを追加」をクリックし、接続するコレクションを選択します。
  3. テキストの接続先」ドロップダウンをクリックし、接続するフィールドを選択します。
ヒント:
  1. 文字色の接続先」ドロップダウンをクリックし、テキストに接続する「色」フィールドを選択します。
「文字色の接続先」で、「色」フィールドを選択した様子を示したスクリーンショット。
  1. プレビュー」をクリックし、接続をテストします。
  2. 変更内容を公開する準備ができたら、「公開」をクリックします。

ボタン要素を「色」フィールドに接続する

ボタン要素を「色」フィールドに接続し、CMS コレクションから直接ボタン要素の色を管理できるようにします。ボタンの状態(通常時、ホバー時、無効など)を選択し、ボタンのテキストの色、アイコンの色、枠線の色、背景色などのさまざまな部分に、「色」フィールドを接続することができます。
Wix エディタ
Wix Studio エディタ
  1. エディタで該当するページにアクセスします
  2. CMS に接続したいボタンをクリックします。ボタンを追加する方法はこちら
  3. CMS に接続」アイコン  をクリックします。
  4. データセットを選択」ドロップダウンをクリックし、コレクションに接続する既存のデータセットを選択します。または、「データセットを追加」をクリックし、接続するコレクションを選択し、データセットに名前を付けて「作成」をクリックすることもできます。
  5. クリック時の動作を選択」ドロップダウンをクリックし、該当するオプションを選択します。ボタンをクリックした際に指定できる動作についてはこちら
  6. 右側の「ボタンを接続」パネルで、「」までスクロールダウンします。
  7. 通常時」、「ホバー時」、「無効」タブから、接続するボタンの状態をクリックして選択します。
  8. 該当するドロップダウンをクリックし、接続する「色」フィールドを選択します:
    • 文字色の接続先:「色」フィールドを、ボタンのテキストの色に接続します。
    • アイコン色の接続先:「色」フィールドを、ボタンのアイコンの色に接続します(ボタンにアイコンがある場合)。
    • 枠線の色の接続先:「色」フィールドを、ボタンの枠線の色に接続します。
    • 背景色の接続先:「色」フィールドを、ボタンの背景色に接続します。
Wix エディタで、ボタン要素のさまざまな部分に「色」フィールドを接続するオプションが表示されている様子を示したスクリーンショット。
  1. 「色」フィールドを接続するボタンの状態ごとに、手順 7〜8 を繰り返します。
  2. プレビュー」をクリックし、接続をテストします。
  3. 変更内容を公開する準備ができたら、「公開」をクリックします。

セクションの背景色を「色」フィールドに接続する

セクションの背景色を、CMS コレクションの「色」フィールドに接続します。これにより、セクションの背景色が、接続された「色」フィールドの色に基づいて動的に変化するようになります。
Wix エディタ
Wix Studio エディタ
  1. エディタで該当するページにアクセスします
  2. 「色」フィールドに接続するセクションを選択します。
  3. CMS に接続」アイコン  をクリックします。
  4. データセットを選択」ドロップダウンをクリックし、コレクションに接続する既存のデータセットを選択します。または、「データセットを追加」をクリックし、接続するコレクションを選択し、データセットに名前を付けて「作成」をクリックすることもできます。
  5. 接続」下で、「セクション背景の接続先」ドロップダウンを「未接続」のままにします。
  6. 」下で、「セクション背景色の接続先」ドロップダウンをクリックし、接続する「色」フィールドを選択します。
セクションの背景色を、「色」フィールドに接続した様子を示したスクリーンショット。
  1. プレビュー」をクリックし、接続をテストします。
  2. 変更内容を公開する準備ができたら、「公開」をクリックします。

よくある質問

「色」フィールドの使用に関するよくある質問と回答については、以下をクリックしてください。