でテーマを管理または編集する テーマビルダー

テーマとスタイリングを時間とコスト効率の高い方法でカスタマイズおよび管理します。カスタマイズ後、新しいテーマをインスタンスの Web 実装またはモバイル実装に公開します。

始める前に

必要なロール：admin

手順

1. 次のように移動する。 All (すべて) > Now Experience フレームワーク > テーマ > Theme Builder (テーマビルダー).
   テーマビルダーのランディングページがホームページビューに表示されます。
2. ホームページビューで、マネージャーページビューまたはエディターページビューから編集するテーマを選択します。

   図 : 1. ページメニュー

   

   • マネージャーページビューから、既存のテーマを 2 つの方法で表示できます。グリッドビューまたはリストビューを選択できます。
     注:

     グリッドビューとリストビューの両方で、公開済みのテーマと未公開のテーマは別々にグループ化されます。公開されたテーマは、ユーザーのテーマ設定に表示されるテーマです。[ Web ] または [モバイル ] ボタンを選択して、Web テーマとモバイルテーマを表示します。

     図 : 2. グリッドビュー

     

     図 : 3. リストビュー

     

     公開されたテーマの [その他のアクション] には、次のオプションが含まれています。

     • 重複
     • 削除
     • 代替カラーパレットを追加
     • 非公開
     • デフォルトとしてマークする
       注:

       このオプションは、テーマが現在のデフォルトテーマでない場合に表示されます。
     代替カラーパレットが定義されている公開テーマの [その他のアクション] アイコン (その他の には、次のオプションが含まれています。

     • グループ名を編集
     • 重複
     • 削除
     • 非公開
     • デフォルトとしてマークする
       注:

       このオプションは、テーマが現在のデフォルトテーマでない場合に表示されます。
     未公開テーマのその他のアクション ( アイコンには、次のオプションが含まれています。

     • 重複
     • 削除
     • 代替カラーパレットを追加
     • 公開
   • エディターページビューでは、テーマドロップダウンリストから編集するテーマを選択できます。エディターページビューでは 選択したテーマのみが表示されます。作成したすべてのテーマを同じ画面に表示するには、[マネージャー] ページビューに切り替えます。

     図 : 4. [テーマ] ドロップダウン リストからテーマを選択します

     

   注:

   作業するテーマを選択するときは、アプリケーションスコープピッカーからテーマの正しいスコープを選択していることを確認してください。

   図 : 5. アプリケーションスコープピッカー

   

3. 必要に応じてグローバルスタイルを確認し、更新します。

   図 : 6. グローバルスタイルをレビューします

   

   注:

   テーマで次のスタイルレコードが生成されます。

   • ブランドパレット:ブランドのインターフェイスの色を更新します。
   • ロゴ:ロゴを更新します。テーマの適用中に、画像または概要ページからロゴをアップロードできます。詳細については、「でテーマを公開するときにロゴをアップロードする テーマビルダー」を参照してください。
   • フォントファミリー:エクスペリエンスにグローバルに適用されるフォントを更新します。フォントは、見出し、タイトル、サブタイトル、本文テキスト、キャプションに使用されます。
   • 形状:画面上のコンポーネントのコーナー形状を更新します。
   1. オプション: 自動生成された UI の色を変更してさらに詳細に編集するには、[グローバルスタイル] カラーパネルから [カラー ] アイコンを選択します。各 UI 要素の横にあるドロップダウンリストを使用して、色のオプションにアクセスします。
      注:

      カラーフックのいずれかへの変更を保存すると、[上書きを削除]記号が表示されます。[上書きを削除] 記号を選択して、変更を元の自動生成された色に戻します。

      

4. オプション: インスタンスに公開する前にテーマをプレビューするには、[ エクスペリエンスプレビュー ] タブを選択します。

   

   [エクスペリエンス] ドロップダウンリストからプレビューするエクスペリエンスを選択します。

   

   すべてのテーマの選択が適用された状態で実際のライブインスタンスが表示されます。選択したテーマを実際のインスタンスに実装する前にプレビューできます。

   注:

   [新しいタブで開く] アイコンを選択して、 新しいタブでエクスペリエンスを開きます。未公開のテーマが選択したエクスペリエンスとどのように相互作用するかを確認できます。

   図 : 7. テーマが適用されたエクスペリエンスのプレビュー

   

   注:

   公開されたテーマの場合、エクスペリエンスプレビューのデータはライブデータです。プレビューで行った変更はインスタンスに反映されます。
5. テーマを公開します。
   詳細については、「でテーマを公開する テーマビルダー」を参照してください。

• コアスタイル、色、バリアント、および代替カラーパレット
  コアスタイル、バリアント、および代替カラーパレットを構成することで、さまざまなユーザーに合わせて ネクストエクスペリエンス UI のルックアンドフィールをカスタマイズできます。
• 代替カラーパレットを追加
  テーマの代替カラーパレットを作成してインスタンスに公開することで、 テーマビルダー テーマをカスタマイズします。
• コンポーネントのプレビュー
  テーマを作成または管理しながら、インスタンスに含めることができるコンポーネントをプレビューできます。
• コンポーネントの編集
  個々のコンポーネントを編集して テーマビルダー ブランドに適合させ、アクセシビリティのコンプライアンス基準を満たすようにします。編集できるテーマフックは、各タイプのコンポーネントに固有です。