アイコン図をカスタム画像で上書きする

デフォルトのアイコン図を変更または独自のカスタム画像で上書きして、会社のブランディングを反映する視覚要素を促進します。アイコンを上書きすると、インターフェイス全体で使用されているすべてのアイコンを更新 テーマビルダー 。

始める前に

必要なロール：ui_builder_admin

詳細なロールの詳細については、「 Granular admin roles」を参照してください。

このタスクについて

基本イメージを置き換えると、 テーマビルダー では新しい基本イメージのサイズが自動的に変更され、他のサイズのアイコンが作成されます。つまり、1つのソースファイルを維持するだけでよく、 テーマビルダー すべてのサイズを同期させます。自動的に生成されたサイズの鮮明さや重要なディテールが失われた場合は、任意のサイズを個別に置き換えることができます。

単一の基本イメージを介してアイコンセット全体を上書きしたり、サイズ固有のアセットを提供して正確に制御したりできます。

次の場合に基本イメージの上書きを使用します。

• 信頼できる唯一の情報源を使用して迅速に行動したいと考えています。
• スケーリングによるわずかな変更は許容されます。

次の場合に、サイズごとの上書きを使用します。

• サイズ全体で均一なストロークの重みが必要です。
• 細かいディテールは12×12または16×16で失われ、簡素化された小さなサイズのアートが必要です。
• デザインチームは、サイズに応じて特注のアイコンセットを維持します。

重要:

カスタムイメージはワークスペースに適用され、 コア UIではサポートされていません。

手順

1. 移動先 すべて > Now Experience フレームワーク > テーマビルダー.
   テーマビルダーランディングページが新しいタブで開き、ホームページビューに表示されます。
2. [ページ] ドロップダウンリストを使用して、[エディター] ページビューを選択します。

   図 : 1. エディターページビュー

   

3. [テーマ] ドロップダウン リストから、編集するテーマを選択します。
4. 一般的なスタイルパネルから [画像スタイル] タブを選択し、[アイコン] を展開 します。
5. 次のいずれかのオプションを使用して、上書きするアイコン図セットを選択します。
   • フィルターアイコン を選択し、アイコンカテゴリを展開して、上書きする特定の図セットを選択します。変更したアイコンのみを表示するには、[ 変更した画像のみを表示 ] を有効にします。
   • 検索フィールドにテキストを入力して、アイコンライブラリをフィルタリングします。入力すると結果が更新され、テーマのアイコンライブラリで利用可能な一致するデフォルトアイコンとカスタムアイコンが表示されます。
   • メインステージのアイコンイラストのリストをスクロールします。[records-per page] コントロールを使用すると、一度に 10、20、50、または 100 個のアイコンを表示しながら参照できます。
   イラストを選択すると、プロパティパネルが開きます。

   図 : 2. アイコンが展開された [画像スタイル] タブ

   

6. プロパティパネルから、上書きするアイコンサイズのファイル名を選択します。
   注:

   すべてのサイズを更新するには、基本イメージを置き換えます。他のサイズを置き換えると、そのサイズにのみ影響します。基本イメージを上書きすると、小さいサイズがすべて自動的に拡大縮小され、既に適用した個々のサイズの上書きが置き換えられます。
7. カスタム画像をアップロードするには、次のいずれかのオプションを使用します。
   • [参照] を選択し、コンピューターのファイル ブラウザーからカスタム イメージ ファイルを選択して、[開く] を選択します。
   • コンピューターのファイルブラウザーからカスタム画像ファイルをドラッグし、画像を直接モーダルにドロップします。
   サイズと形式の制限については、画像のアップロードモーダルを参照するか、 テーマビルダーのアイコン図を参照してください。カスタム画像が必要なサイズと形式を満たしていない場合、画像は保存されません。
8. モーダル内で画像をプレビューし、[ 保存] を選択します。
   カスタム画像は、選択したアイコンイラストタイプのメインステージに表示されます。これで、カスタムイメージのファイル名がプロパティパネルに一覧表示されます。
9. オプション: [上書きを削除] アイコン を選択して、デフォルトのアイコン図を復元します。
   注:

   基本イメージの上書きを削除すると、アイコンがデフォルトの状態にリセットされ、個々のサイズの上書きがすべてクリアされます。
10. テーマをインスタンスに公開する前に、編集内容をプレビューします。

    アイコンのスケーリングにより、ライブエクスペリエンスでのみ見られる鮮明さやディテールの問題が発生する可能性があります。

    1. [グローバルスタイル] パネルから [エクスペリエンス ] タブを選択します。
    2. [エクスペリエンス] ドロップダウンリストからプレビューするエクスペリエンスを選択します。
    3. [新しいタブで開く] アイコン を選択して、エクスペリエンスを新しいタブで開きます。

       図 : 3. エクスペリエンスのプレビュー

       

タスクの結果

テーマが公開されている場合、更新時にテーマが適用されているユーザーにカスタム画像が表示されます。テーマの発行の詳細については、「 テーマビルダーでテーマを公開する」を参照してください。