Skip to main content

ポータルにテーマとロゴを定義する

Pega Communityのロゴ

注: 次のコンテンツはPega Communityを参照したページで、モジュール内容の理解度を高める目的で含まれています。

ポータルのグラフィックデザインを設定して、一貫した視覚的なアイデンティティを維持します。 インターフェイスのロゴとカラーパレットを調整し、ビジネスのブランディング要件に合わせてアプリケーションをカスタマイズできます。

たとえば、ボタン、リンク、フォントなど、ユーザー インターフェイスの要素のデフォルト カラー テーマを選択できます。
  1. App Studioのナビゲーションペインで、「Settings」「Theme」をクリックします。

  2. 「Show on banner」リストで、ポータルのバナーに表示するアイテムを選択します。

  3. 「Change logo」をクリックし、次に使用するロゴを選択します。

    選択肢 手順
    Pega提供のロゴ 「logo settings」ウィンドウのグラフィックのリストでロゴを選択し、「Submit」をクリックします。
    カスタムロゴ
    1. 「logo settings」ウィンドウで「Upload logo」をクリックし、次にファイルを選択します。

      サポートされるファイルタイプは、JPG、PNG、GIFです。

    2. 「Submit」をクリックします。

  4. 「Theme」セクションでポータルに使用するカラーテーマを選択します。

  5. オプション:

    テーマをカスタマイズするには、編集するテーマをクリックし、変更を加えます。

    選択肢 手順
    カラーの変更
    1. 「Colors」セクションで、変更するカラーをクリックします。

    2. 「color palette」ウィンドウで、コンポーネントに割り当てるカラーを選択し、次に「Save」をクリックします。

    カラーの追加
    1. 「Colors」セクションで、「Add theme color」をクリックします。

    2. 「Theme color」フィールドにコンポーネントの名前を入力し、次にデフォルトでコンポーネントに割り当てられたカラーをクリックします。

    3. 「color palette」ウィンドウで、コンポーネントに割り当てるカラーを選択し、次に「Save」をクリックします。

    フォントの変更 「Text」セクションで、変更するコンポーネントの書体、ウエイト、サイズを定義します。
    フォントの追加
    1. 「Text」セクションで、「Add theme text」をクリックします。

    2. 「Text」セクションで、変更するコンポーネントの書体、ウエイト、サイズを定義します。

  6. オプション:

    テーマのすべてのカラーやテキストのオプションをデフォルト値にリセットするには、「Reset to default」をクリックします。

  7. 「Save」をクリックします。

  • ランタイムにコントロールをスタイリングする

    Dev Studioに切り替えてアプリケーションのスキンを修正するのではなく、App Studioでランタイムに多くの種類のコントロールをスタイリングできます。 たとえば、ドロップダウンコントロールでは、テキストの色、背景の塗りつぶしと色、枠線の幅と色を指定できます。 App Studioでコントロールを直接スタイリングすると、開発時間を短縮し、メインを削減できます。


このトピックは、下記のモジュールにも含まれています。

If you are having problems with your training, please review the Pega Academy Support FAQs.

このコンテンツは役に立ちましたか?

改善できるところはありますか?

We'd prefer it if you saw us at our best.

Pega Academy has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice