メインコンテンツにスキップ

リスト:アイテムごとに色を変える

カラープロパティを使って、リスト内のアイテムごとにボックスの色を個別管理する方法を説明します。カテゴリーごとに色を分けたい場合などに活用できます。

Point:リストとは

リストは、同じレイアウトのボックスをまとめて管理できる機能です。

テキストや画像などのデータを一元管理できるほか、Studio CMSなどと接続すれば、更新に応じて内容が自動反映される動的リストとしても使えます。

デフォルトでは、静的なリストとして機能します。

リスト機能の概要については、リストの記事を参照してください。

(1)リストにカラープロパティを追加する

リストに色を管理するカラープロパティを追加します。

  1. レイヤーパネルを開き、先頭に水色のリストアイコン が付いた要素を選択します。スクリーン上では、対象の要素の左上にリストアイコンが表示されます。

  2. 右パネルの[データ]タブを開きます。パネルが閉じている場合は、右パネルを開いてください。

  3. プロパティ一覧の右端にある[+]アイコンをクリックします。

  4. 追加するプロパティの種類から[カラー]を選択し、カラープロパティを追加します。

(2)アイテムごとに任意のカラーを設定する

追加したカラープロパティに、各アイテムの色を設定します。

  1. 右パネルのプロパティ管理表で、色を登録するセルをクリックします。

  2. 表示されたカラーピッカーで色を選ぶか、カラーコードを入力して、アイテムごとに異なる色を設定します。

(3)ボックスの塗りにカラープロパティを紐づける

設定したカラープロパティを、ボックスに紐づけて塗ります。

  1. リストアイテムを編集モードに切り替えます。スクリーン上での操作が難しい場合には、レイヤーパネルでリストアイテムのレイヤーを選択します。

  2. 対象のボックスを選択します。

  3. 右パネルの[データ]タブで、カラープロパティの左側にあるコネクタ(ハンドル)をドラッグします。パネルが閉じている場合は、右パネルを開いてください。

  4. 対象のボックスにドロップします。

こちらの回答で解決しましたか?