空ステータスの図とカスタム画像の色をカスタマイズする

  • リリースバージョン: Zurich
  • 更新日 2025年07月31日
  • 所要時間:2分
  • 空の状態のイラストとカスタム画像に自動的に適用される色をカスタマイズおよび制御して、ブランド認知度を維持しながら視覚的なエクスペリエンスを魅力的に保ちます。

    始める前に

    カスタム画像の色を編集する前に、画像を テーマビルダーにアップロードする前に、画像コードに 2 つのデザイントークンを追加する必要があります。詳細については、「空ステータスの図をカスタム画像で上書きする」を参照してください。

    必要なロール:admin

    このタスクについて

    カテゴリとして、すべての空のステート図はカラーフックマッピングを共有します。その結果、1 つの空の状態の図の種類に適用した色は、空の状態の図のカテゴリ全体にも適用されます。
    重要:
    空ステータスのイラストの色のカスタマイズはワークスペースに適用され、 コア UIではサポートされていません。

    手順

    1. 移動先 すべて > Now Experience フレームワーク > テーマ > テーマビルダー.
      テーマビルダーランディングページが新しいタブで開き、ホームページビューに表示されます。
    2. [ページ] ドロップダウンリストを使用して、[エディター] ページビューを選択します。
      図 : 1. エディターページビュー
      エディターページの表示例。
    3. [テーマ] ドロップダウン リストから、編集するテーマを選択します。
    4. 一般スタイルパネルから [ 画像スタイル ] タブを選択します。
      編集可能な空ステータスのイラストがメインステージに表示され、タイプ別にグループ化されます。
      図 : 2. [画像スタイル] タブが選択されました
      選択された [画像スタイル] タブで、空ステータスの図がメインステージに一覧表示され、プロパティパネルが開いています。
    5. メインステージから空ステータスのイラストタイプを選択します。
      注:
      空ステータスのイラストタイプの色をカスタマイズすると、選択したタイプに関係なく、空ステータスカテゴリ全体に色の変更が適用されます。
      プロパティパネルが自動的に開きます。
    6. プロパティパネルから [ ] タブを選択します。
      図 : 3. プロパティパネルの [色] タブ
      [色] タブが選択されたプロパティパネル。
    7. 画像の色を選択し、カラーピッカーを使用して色を編集します。
      図 : 4. カラーピッカー
      カラーピッカー。
      注:
      デフォルトでは、[マイカラー] タブにイラストレーションで使用可能なすべての色が表示されます。[カスタム] タブを使用して新しい色を選択することもできます。
    8. 変更が完了したら、[ 変更の保存] を選択します。
      注:
      カラーフックのいずれかへの変更を保存すると、[上書きを削除]記号が表示されます。[上書きを削除] シンボルを使用すると、色の変更を元の自動生成された色に戻すことができます。
      上書き記号を削除します。

    タスクの結果

    新しい色は、デザイントークンが適用された状態で以前にアップロードしたカスタム画像を含む、すべての空の状態のイラストタイプに適用されます。

    テーマが公開されている場合、空ステータスのイラストの編集内容は、リフレッシュ時にテーマを適用しているユーザーに表示されます。テーマの発行の詳細については、「 でテーマを公開する テーマビルダー」を参照してください。