統一ナビゲーションコンポーネントを使用してブランドに合わせる

  • リリースバージョン: Australia
  • 更新日 2026年03月12日
  • 所要時間:3分
  • 統一ナビゲーションコンポーネントとそのサブコンポーネントを編集して、エクスペリエンスをよりブランドに近づけます。

    始める前に

    必要なロール:ui_builder_admin

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

    このタスクについて

    統一ナビゲーションコンポーネントは、個別にスタイルを設定する必要がある複数のサブコンポーネントで構成されています。テーマビルダー 5.0 リリースでは、統一ナビゲーションの編集はヘッダーとメニューに制限されていますが、一部のスタイリングは 統一ナビゲーション コンポーネントとサブコンポーネントのすべての側面に適用される場合があります。

    手順

    1. 移動先 すべて > Now Experience フレームワーク > テーマビルダー.
    2. [ページ] ドロップダウンリストから、[エディター] ページビューを選択します。
      図 : 1. エディターページビュー
      [エディター] ページのビュー。
    3. [テーマ] ドロップダウンリストから、 統一ナビゲーション コンポーネントを編集するテーマを選択します。
    4. [コンポーネントスタイル] タブを選択します。
    5. [ 編集中 ] タブを選択します。
      コンポーネントスタイルの [編集] タブ。
    6. リストをフィルタリングして、 統一ナビゲーション コンポーネントを表示します。
      1. [フィルター] アイコン () を選択します。
      2. ナビゲーションカテゴリを展開し、 統一ナビゲーション コンポーネントを選択します。
        図 : 2. 統一ナビゲーション コンポーネント
        フィルターリストから選択された統一ナビゲーションコンポーネント。
    7. コンポーネントエディターにアクセスすると、次の 2 つの方法のいずれかを使用して、 統一ナビゲーション コンポーネントのさまざまな側面をスタイル設定できます。
      • 統一ナビゲーションコンポーネントタイルをダブルクリックします。
      • 統一ナビゲーション編集パネルから、[サブコンポーネントのスタイル] を選択します。
      図 : 3. 統一ナビゲーション 編集パネル
      [サブコンポーネントのスタイル] ボタンを含む統一ナビゲーションコンポーネント編集パネル。
    8. [ヘッダー] または [メニュー] タイルを選択して、利用可能なテーマフックを編集できる構成可能なスタイルパネルを開きます。
      使用可能な編集可能なテーマフックは、選択したサブコンポーネントのタイプによって異なります。たとえば、ヘッダーサブコンポーネントを選択すると、ヘッダーの背景色を編集できます。メニューサブコンポーネントを選択すると、背景、テキスト、およびアイコンの色を編集できます。
      注:
      カラーフックのいずれかへの変更を保存すると、「上書きを削除」シンボルが表示されます。[上書きを削除] 記号を選択すると、変更内容が元の自動生成色に戻されます。
      上書き記号を削除します。
    9. [ヘッダー] または [メニュー] タイルをダブルクリックするか、[サブコンポーネントのスタイル] を選択して、使用可能なサブコンポーネントを編集します。
      サブコンポーネントは、大きなコンポーネントの小さな部分です。たとえば、 統一ナビゲーション ヘッダーまたはメニューサブコンポーネントは、 統一ナビゲーション コンポーネントの小さな部分です。インタラクションは、コンポーネントまたはサブコンポーネントのさまざまな動作を記述します。たとえば、デフォルトまたはホバーのインタラクションは、メニュートリガーサブコンポーネントのインタラクションです。
      図 : 4. 統一ナビゲーション ヘッダーサブコンポーネント編集オプション
      統一ナビゲーションヘッダーサブコンポーネント編集オプション。
    10. 統一ナビゲーションコンポーネントのスタイル設定が完了するまで、各サブコンポーネントとインタラクションの編集を続行します。
      たとえば、[ヘッダーメニュートリガー] サブコンポーネントをダブルクリックすると、メニュートリガーのインタラクションをスタイル設定に使用できます。同様に、メニューサブコンポーネントをダブルクリックすると、各メニューのサブコンポーネントとインタラクションが使用可能になります。
      注:
      キャンバスカラー機能は、親サブコンポーネントの背景色を自動的に適用します。
    11. オプション: メニューなどの特定のサブコンポーネントを編集するときに、プレビューする構成を選択します。
      たとえば、メニューサブコンポーネントを編集する場合、[ コンポーネント構成] を選択した後、編集する特定のメニューを [タイプ] ドロップダウンリストから選択できます。目的のメニューを選択すると、その特定のメニューで使用可能なすべてのサブコンポーネントが一覧表示されます。
      図 : 5. コンポーネント構成メニュー
      [履歴] メニューが選択されたコンポーネント構成メニュー。
    12. オプション: 前のコンポーネント編集画面に戻るには、いずれかのブレッドクラムリンクを選択します。
      図 : 6. コンポーネント編集ブレッドクラムナビゲーション
      コンポーネント編集のブレッドクラムナビゲーション。

    タスクの結果

    テーマが公開されると、更新時にテーマを適用しているユーザーに 統一ナビゲーション 編集内容が表示されます。テーマの公開の詳細については、「 テーマビルダーでテーマを公開する」を参照してください。