リソースセンターをスタイル設定するには、まず作成し、その中にモジュールを含める必要があります。手順については、「リソースセンターを設定する」を参照してください。
この記事では、リソースセンターのホームビューの内容とリソースセンターコンテナのスタイル設定を変更する方法について説明します。個々のモジュールの編集については、「リソースセンターの概要」を参照してください。
1. ビジュアルデザインスタジオでリソースセンターを開きます
リソースセンターはビジュアルデザインスタジオでカスタマイズします。指示に従って、ビジュアルデザインスタジオでリソースセンターを開きます。完了したら、保存してビジュアルデザインスタジオを終了します。ビジュアルデザインスタジオの詳細については、「ビジュアルデザインスタジオを使用する」を参照してください。
- Pendoの左側のメニューで[ガイド(Guides)]>[リソースセンター(Resource Center)]に移動します。
- [リソースセンター]ページのテーブルから対象のリソースセンターを見つけて開きます。
- リソースセンターの[設定(Settings)]ページの[ドラフト(Draft)]タブから、[自分のアプリで管理(Manage in my app)]を選択します。
-
[コンテンツ(Content)]と[スタイル設定(Styling)]の2つのタブがある[ホームビューを編集(Edit Home View)]ウィンドウが開きます。必要に応じて、リソースセンターのコンテンツとスタイル設定を編集します。
ステップ2. コンテンツを編集する
[ホームビューを編集(Edit Home View)]ウィンドウの[コンテンツ(Content)]タブで、必要に応じて以下を編集します。
- リソースセンターのタイトル。これはリソースセンターの公開名で、訪問者はリソースセンターのホームページの上部で確認できます。この公開名は、[ガイド(Guides)]>[リソースセンター(Resource Center)]で表示されるリソースセンターの内部名とは異なり、Pendoの内部ユーザーにのみ表示されます。
- 閉じるボタン、リソースセンターダイアログボックス(メニュー)、戻るボタン、モジュールタイトルのARIAラベル。
- モジュールのタイトルとサブタイトル。
注:内部名はアプリケーションで公開されるリソースセンターの名前ではありません。内部名を変更するには、[リソースセンター]ページのテーブルから目的のリソースセンターを見つけて開き、リソースセンターの名前にカーソルを合わせて、新しい名前を入力します。
ステップ3. スタイル設定を編集する
[ホームビューを編集]ウィンドウの[スタイル設定(Styling)]タブから、必要に応じて以下を編集します。
コンテナ
[スタイル設定]タブの[コンテナ(Container)]セクションから、以下を編集できます。
- ヘッダーを含む、リソースセンターのすべての画面の背景色。
- リソースセンターの寸法(幅と高さ)。これは、リソースセンターメニューの全体のサイズに適用されます。
- キャレット(›)の色。
- リソースセンターのホームビューの間隔(パディング)。左右のパディングは個別に編集します。
ヘッダー
[スタイル設定]タブの[ヘッダー(Header)]セクションから、以下を編集できます。
- リソースセンターの上部と下部の境界線。
- トグルを使用して、上部と下部の境界線を追加または削除します。
- 上部と下部の境界線の色と太さをそれぞれ選択します。
- リソースセンタータイトルの以下のフォントプロパティ。
- 揃え(左、中央、または右)
- フォントファミリー
- 太さ
- サイズ
- 色(Color)
- テキスト変換(大文字化)
- 文字間隔
- リソースセンターの右上の閉じるボタン。
- トグルを使って閉じるボタンを追加または削除します。
- 閉じるボタンのデフォルトの色とカーソルを合わせた時の色を選択します。
- 閉じるボタンのスペーシング(パディングとマージン)を編集します。上下、左右のパディングとマージンは個別に編集します。
モジュールセクション
[スタイル設定]タブの[モジュール(Module)]セクションから、以下を編集できます。
- リソースセンターのホームビューにあるモジュールのタイトルとサブタイトルの以下のフォントプロパティ。
- フォントファミリー
- 太さ
- サイズ
- 色(Color)
- テキスト変換(大文字化)
- 文字間隔
- リソースセンターのホームビューにあるモジュール間のセクション区切りの色と太さ。
- リソースセンターのホームビューのモジュール間隔(パディング)。上部と下部のパディングは個別に編集します。
アラートバッジ
アラートバッジは、リソースセンターのメインバッジアイコンと重なる円の中の数字で、訪問者への通知がある各モジュールの行の末尾に表示されます。
[スタイル設定]タブの[アラートバッジ(Alert Badge)]セクションから、以下を編集できます。
- アラートバッジの背景色。
- アラートバッジ内の数字の以下のフォントプロパティ。
- フォントファミリー
- 太さ
- 色(Color)
アラートバッジの場所(バッジアイコンの左上、右上、左下、または右下)を変更したい場合は、代わりに「リソースセンターの有効化」を参照してください。