リソースセンターのスタイル設定

最終更新日:

リソースセンターをスタイル設定するには、まず作成し、その中にモジュールを含める必要があります。手順については、「リソースセンターを設定する」を参照してください。

この記事では、リソースセンターのホームビューの内容とリソースセンターコンテナのスタイル設定を変更する方法について説明します。個々のモジュールの編集については、「リソースセンターの概要」を参照してください。

1. ビジュアルデザインスタジオでリソースセンターを開きます

リソースセンターはビジュアルデザインスタジオでカスタマイズします。指示に従って、ビジュアルデザインスタジオでリソースセンターを開きます。完了したら、保存してビジュアルデザインスタジオを終了します。ビジュアルデザインスタジオの詳細については、「ビジュアルデザインスタジオを使用する」を参照してください。

  1. Pendoの左側のメニューで[ガイド(Guides)]>[リソースセンター(Resource Center)]に移動します。
  2. [リソースセンター]ページのテーブルから対象のリソースセンターを見つけて開きます。
  3. リソースセンターの[設定(Settings)]ページの[ドラフト(Draft)]タブから、[自分のアプリで管理(Manage in my app)]を選択します。

    RC Manage in my app.jpg

  4. [コンテンツ(Content)][スタイル設定(Styling)]の2つのタブがある[ホームビューを編集(Edit Home View)]ウィンドウが開きます。必要に応じて、リソースセンターのコンテンツとスタイル設定を編集します。

    Edit Home View.jpg

ステップ2. コンテンツを編集する

[ホームビューを編集(Edit Home View)]ウィンドウの[コンテンツ(Content)]タブで、必要に応じて以下を編集します。

  • リソースセンターのタイトル。これはリソースセンターの公開名で、訪問者はリソースセンターのホームページの上部で確認できます。この公開名は、[ガイド(Guides)]>[リソースセンター(Resource Center)]で表示されるリソースセンターの内部名とは異なり、Pendoの内部ユーザーにのみ表示されます。
  • 閉じるボタン、リソースセンターダイアログボックス(メニュー)、戻るボタン、モジュールタイトルのARIAラベル。
  • モジュールのタイトルとサブタイトル。

注:内部名はアプリケーションで公開されるリソースセンターの名前ではありません。内部名を変更するには、[リソースセンター]ページのテーブルから目的のリソースセンターを見つけて開き、リソースセンターの名前にカーソルを合わせて、新しい名前を入力します。

ステップ3. スタイル設定を編集する

[ホームビューを編集]ウィンドウの[スタイル設定(Styling)]タブから、必要に応じて以下を編集します。

コンテナ

[スタイル設定]タブの[コンテナ(Container)]セクションから、以下を編集できます。

  • ヘッダーを含む、リソースセンターのすべての画面の背景色。
  • リソースセンターの寸法(幅と高さ)。これは、リソースセンターメニューの全体のサイズに適用されます。
  • キャレット()の色。
  • リソースセンターのホームビューの間隔(パディング)。左右のパディングは個別に編集します。

ヘッダー

[スタイル設定]タブの[ヘッダー(Header)]セクションから、以下を編集できます。

  • リソースセンターの上部と下部の境界線。
    • トグルを使用して、上部と下部の境界線を追加または削除します。
    • 上部と下部の境界線の色と太さをそれぞれ選択します。
  • リソースセンタータイトルの以下のフォントプロパティ。
    • 揃え(左、中央、または右)
    • フォントファミリー
    • 太さ
    • サイズ
    • 色(Color)
    • テキスト変換(大文字化)
    • 文字間隔
  • リソースセンターの右上の閉じるボタン。
    • トグルを使って閉じるボタンを追加または削除します。
    • 閉じるボタンのデフォルトの色とカーソルを合わせた時の色を選択します。
    • 閉じるボタンのスペーシング(パディングとマージン)を編集します。上下、左右のパディングとマージンは個別に編集します。

モジュールセクション

[スタイル設定]タブの[モジュール(Module)]セクションから、以下を編集できます。

  • リソースセンターのホームビューにあるモジュールのタイトルとサブタイトルの以下のフォントプロパティ。
    • フォントファミリー
    • 太さ
    • サイズ
    • 色(Color)
    • テキスト変換(大文字化)
    • 文字間隔
  • リソースセンターのホームビューにあるモジュール間のセクション区切りの色と太さ
  • リソースセンターのホームビューのモジュール間隔(パディング)。上部と下部のパディングは個別に編集します。

アラートバッジ

アラートバッジは、リソースセンターのメインバッジアイコンと重なる円の中の数字で、訪問者への通知がある各モジュールの行の末尾に表示されます。

[スタイル設定]タブの[アラートバッジ(Alert Badge)]セクションから、以下を編集できます。

  • アラートバッジの背景色。
  • アラートバッジ内の数字の以下のフォントプロパティ。
    • フォントファミリー
    • 太さ
    • 色(Color)

アラートバッジの場所(バッジアイコンの左上、右上、左下、または右下)を変更したい場合は、代わりに「リソースセンターの有効化」を参照してください。

この記事は役に立ちましたか?
14人中5人がこの記事が役に立ったと言っています