統一ナビゲーションコンポーネントを使用してブランドに合わせる
統一ナビゲーションコンポーネントとそのサブコンポーネントを編集して、エクスペリエンスをよりブランドに近づけます。
始める前に
必要なロール:ui_builder_admin
詳細なロールの詳細については、「 Granular admin roles」を参照してください。
このタスクについて
統一ナビゲーションコンポーネントは、個別にスタイルを設定する必要がある複数のサブコンポーネントで構成されています。テーマビルダー 5.0 リリースでは、統一ナビゲーションの編集はヘッダーとメニューに制限されていますが、一部のスタイリングは 統一ナビゲーション コンポーネントとサブコンポーネントのすべての側面に適用される場合があります。
手順
- 移動先 すべて > Now Experience フレームワーク > テーマビルダー.
-
[ページ] ドロップダウンリストから、[エディター] ページビューを選択します。
図 : 1. エディターページビュー - [テーマ] ドロップダウンリストから、 統一ナビゲーション コンポーネントを編集するテーマを選択します。
- [コンポーネントスタイル] タブを選択します。
-
[ 編集中 ] タブを選択します。
-
リストをフィルタリングして、 統一ナビゲーション コンポーネントを表示します。
-
[フィルター] アイコン (
) を選択します。
-
ナビゲーションカテゴリを展開し、 統一ナビゲーション コンポーネントを選択します。
図 : 2. 統一ナビゲーション コンポーネント
-
[フィルター] アイコン (
-
コンポーネントエディターにアクセスすると、次の 2 つの方法のいずれかを使用して、 統一ナビゲーション コンポーネントのさまざまな側面をスタイル設定できます。
- 統一ナビゲーションコンポーネントタイルをダブルクリックします。
- 統一ナビゲーション編集パネルから、[サブコンポーネントのスタイル] を選択します。
図 : 3. 統一ナビゲーション 編集パネル -
[ヘッダー] または [メニュー] タイルを選択して、利用可能なテーマフックを編集できる構成可能なスタイルパネルを開きます。
使用可能な編集可能なテーマフックは、選択したサブコンポーネントのタイプによって異なります。たとえば、ヘッダーサブコンポーネントを選択すると、ヘッダーの背景色を編集できます。メニューサブコンポーネントを選択すると、背景、テキスト、およびアイコンの色を編集できます。注:カラーフックのいずれかへの変更を保存すると、「上書きを削除」シンボルが表示されます。[上書きを削除] 記号を選択すると、変更内容が元の自動生成色に戻されます。
-
[ヘッダー] または [メニュー] タイルをダブルクリックするか、[サブコンポーネントのスタイル] を選択して、使用可能なサブコンポーネントを編集します。
サブコンポーネントは、大きなコンポーネントの小さな部分です。たとえば、 統一ナビゲーション ヘッダーまたはメニューサブコンポーネントは、 統一ナビゲーション コンポーネントの小さな部分です。インタラクションは、コンポーネントまたはサブコンポーネントのさまざまな動作を記述します。たとえば、デフォルトまたはホバーのインタラクションは、メニュートリガーサブコンポーネントのインタラクションです。
図 : 4. 統一ナビゲーション ヘッダーサブコンポーネント編集オプション -
統一ナビゲーションコンポーネントのスタイル設定が完了するまで、各サブコンポーネントとインタラクションの編集を続行します。
たとえば、[ヘッダーメニュートリガー] サブコンポーネントをダブルクリックすると、メニュートリガーのインタラクションをスタイル設定に使用できます。同様に、メニューサブコンポーネントをダブルクリックすると、各メニューのサブコンポーネントとインタラクションが使用可能になります。注:キャンバスカラー機能は、親サブコンポーネントの背景色を自動的に適用します。
- オプション:
メニューなどの特定のサブコンポーネントを編集するときに、プレビューする構成を選択します。
たとえば、メニューサブコンポーネントを編集する場合、[ コンポーネント構成] を選択した後、編集する特定のメニューを [タイプ] ドロップダウンリストから選択できます。目的のメニューを選択すると、その特定のメニューで使用可能なすべてのサブコンポーネントが一覧表示されます。
図 : 5. コンポーネント構成メニュー - オプション:
前のコンポーネント編集画面に戻るには、いずれかのブレッドクラムリンクを選択します。
図 : 6. コンポーネント編集ブレッドクラムナビゲーション
タスクの結果
テーマが公開されると、更新時にテーマを適用しているユーザーに 統一ナビゲーション 編集内容が表示されます。テーマの公開の詳細については、「 テーマビルダーでテーマを公開する」を参照してください。