今回はEmployee Center Proのページをカスタマイズして、自社のブランディングにあったイメージにカスタマイズしてみた内容を発信しようと思います！
目次
ロゴの表示と設定
- 管理者アカウントを使用するので、admin権限があることを確認してください。
スコープは「Employee Center Core」を設定します。
- 【すべて】＞【Service Portal】＞【Service Portal設定】に移動します。
- 【ブランディングエディター】を選択します。
- 左のドロップダウンメニューから【Employee Center】を選択します。
- 【クイックセットアップ】タブのロゴから【画像をアップロード】を選択することで任意のロゴに変更することができます。
※注意事項
変更すると【変更をリセット】ボタンが表示されます。ボタンをクリックすると全ての変更を元の状態へ戻すことができます。
変更は随時自動で保存されるため、操作には注意してください。
カラースキームの設定
- 【テーマの色】タブでナビゲーションバーの色などを設定することができます。
直接カラーコードを入力するか、カラーコード右側のカラーアイコンを選択して任意の色を選択してください。
※補足
【成功】などのカラーやテキストカラーもここで設定できます。
フッターの設定
- Employee Centerページ下部に表示するフッターをウィジェットから作成します。
Service Portalのメニューバナーから【ウィジェット】を選択します。
- 【新規ウィジェットの作成】を選択します。
- ウィジェット名を入力して【送信】をクリックします。
少し待つと編集画面が表示されます。
- 【表示】メニューの右側にあるチェックボックスをクリックして、画面上に【HTML テンプレート】と【CSS-SCSS】を表示させます。
ここにフッター部分に表示させる内容を記述します。
- 【HTML テンプレート】と【CSS-SCSS】に記述した内容はコンテキストメニューを選択して、【プレビューの有効化】にチェックを入れることで確認できます。
- カスタマイズ完了後は、コンテキストメニューを選択し、【公開ウィジェット】にチェックを入れます。
【保存】をクリックします。
- 作成したフッターをEmployee Centerで表示する設定をします。ウィジェットエディターを閉じます。
【すべて】＞【Service Portal】＞【ウィジェット】に移動します。
- 先ほど作成したウィジェットレコードを選択して開きます。
- レコードの編集を有効にしてコンテキストメニューから【フォームデザイン】を選択します。
- 【クラス】フィールドを追加して保存します。
- 作成したフッターウィジェットの【クラス】フィールドの値を【ウィジェット】から【ヘッダー／フッター】に変更して保存します。
- フッターをEmployee Centerのテーマに設定します。
スコープを【Employee Center】に変更します。
- 【すべて】＞【Service Portal】＞【テーマ】に移動します。
- 【EC Theme】レコードを選択します。
- 【フッター】フィールドの値を先ほど作成したフッター名に更新して保存します。
- 変更が適用されていることを確認します。
バナーの設定
- 【すべて】＞【Content Publishing】＞【コンテンツカテゴリ】＞【ポータル】に移動します。
- 【コンテンツタイプ】が【バナー】のレコードに絞ります。
【Welcome Banner】を選択します。
- 【スケジュールコンテンツ】から新規を選択します。
- ページを【ec_pro_dashboard】にします。
ウィジェットインスタンスを【コンテンツエクスペリエンスヘッダー】にします。
対象者を【アクティブユーザー】にします。
上記設定後、送信をクリックします。
設定確認
Employee Centerの画面を表示し、設定が反映されているか確認します。
【ロゴ＆バナー】
【カラー】
【フッター】
【パフォーマンス詳細】
最後に・・・
Employee Centerのカスタマイズでこだわりの部分があれば、ぜひコメントください。
設定・デザイン問わずお待ちしております！