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

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

    • 統一ナビゲーションコンポーネントとそのサブコンポーネントを編集して、エクスペリエンスをよりブランドに近づけます。

    始める前に

    必要なロール：admin

    このタスクについて

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

    手順

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

    タスクの結果

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