画像スタイルの操作

  • リリースバージョン: Zurich
  • 更新日 2025年07月31日
  • 所要時間：2分

    • 画像スタイルを使用すると、イラストのさまざまな配色を試したり、デフォルトのイラストを独自のカスタム画像で置き換えたりできます。イメージスタイル機能を使用すると、テーマのビジュアル要素を柔軟にカスタマイズできます。

    空ステータスの図

    ネクストエクスペリエンス Web ページのコンポーネントまたは一部にデータが含まれていない場合は、空の状態の図が表示されます。空ステータスの図はテーマ可能で、インスタンスのテーマの色に適応します。
    重要:
    空ステータスの図はワークスペースに適用され、 コア UIではサポートされていません。
    図 : 1. 空のステート図
    利用可能なデータがありません空のステート図。
    画像スタイル機能には、小、中、大の各バージョンを含む次のタイプの空状態のイラスト タイプが用意されています。
    • 添付ファイルの追加
    • データを追加
    • 完了したタスク
    • 完了したタスク
    • エラー
    • 初めてのユーザー
    • 中断
    • アクティビティがありません
    • データがありません
    • 完了したタスク
    • 権限なし
    • 完了したタスク
    • 検索結果がありません
    • 完了したタスク
    • オフライン
    • 未構成

    カスタム画像

    カスタム画像を テーマビルダー にアップロードして、デフォルトの空ステータスの図を置き換えます。

    デフォルトの空ステータスのイラストをカスタム画像で上書きするには、各画像サイズを個別にアップロードします。空のステータスタイプの 1 つのサイズのみを上書きするか、3 つのサイズすべてを上書きするかを選択できます。3 つのファイルサイズそれぞれのサイズと形式の制限は次のとおりです。
    表 : 1. 小さい画像サイズと形式の制限
    フィールド 説明
    ディメンション制限 幅56×高さ56ピクセル
    フォーマット SVG
    ファイルサイズ制限 2 MB
    表 : 2. 中サイズの画像サイズと形式の制限
    フィールド 説明
    ディメンション制限 幅216×高さ168ピクセル
    フォーマット SVG
    ファイルサイズ制限 2 MB
    表 : 3. 大きな画像サイズと形式の制限
    フィールド 説明
    ディメンション制限 幅350×高さ318ピクセル
    フォーマット SVG
    ファイルサイズ制限 2 MB
    空状態のイラストは、その色を処理する2つのデザイントークンに依存しています。
    • --empty-state--main-object--fill
    • --empty-state--main-object—outline
    カスタム画像にテーマの色が自動的に反映されることはありません。画像をテーマ可能にするには、カスタム SVG を テーマビルダー にアップロードする前に、お好みのテキストエディターを使用してこれらのトークンをコードに追加します。これらのトークンを画像コードに追加すると、画像にテーマの色が採用され、 テーマビルダーアップロード時に色を編集できるようになります。
    次の例は、適用された設計トークンを示しています。 
    <style>
    .main-object--outline {
        fill:rgb(var(--empty-state--main-object--outline, var(--main-object--outline, var(--now-color--interactive-3, 51,53,123))));
    }
    .main-object--fill {
        fill:rgb(var(--empty-state--main-object--fill, var(--main-object--fill, var(--now-color--interactive-1, 144,146,213))));
    }
  </style>