Share via

テーマの概要

  • [アーティクル]

注意

Power Apps ポータルでは、基本テーマの有効化機能はオフに設定されています。 この機能をオンにすると、プリセットと呼ばれる既定のテーマを使用できます。 カスタマイズ追加のために、プリセットテーマのコピーを作成することもできます。

この記事では、基本的なテーマ機能について説明します。 高度なテーマのカスタマイズについては、編集CSS を参照してください。

既存のポータルの基本テーマを有効にする

  1. Power Apps にサインインします。

  2. 左側のナビゲーション ウィンドウで、アプリを選択し、ポータルを選択します。

    アプリとポータルを選択します。

  3. その他のコマンド (...)を選択し、編集を選択します。

    ポータルを編集します。

  4. 左側のナビゲーション ウィンドウから、テーマを選択し、基本テーマの有効化切り替えをオンにします。

    基本テーマを有効にします。

ポータルのテーマの変更

ポータルの既存テーマをデフォルト テーマに設定できます。

  1. Power Apps にサインインします。

  2. 左側のナビゲーション ウィンドウで、アプリを選択し、ポータルを選択します。

  3. その他のコマンド (...)を選択し、編集を選択します。

  4. [コンポーネント] ペインでテーマを選択します。

    テーマ アイコンを選択します。

  5. 利用可能なプリセットからデフォルトのテーマを選択します (この例では、緑を選択しました)。

    既定テーマを選択します。

選択したテーマがポータルに適用されます。

適用されたテーマ。

注意

Studio 内でテーマや色などのテーマのプロパティを変更した後、Web サイトの参照 を選択して別のブラウザー タブで変更を表示します。この方法を使用して複数の変更を行い、ブラウザー内の別のページに切り替えると、古いブラウザー キャッシュにより、ブラウザーに最新でないテーマの変更が表示される場合があります。 これが発生した場合は、Ctrl + F5 を使用してページをリロードします。

新しいテーマを作成します

  1. Power Apps にサインインします。

  2. 左側のナビゲーション ウィンドウで、アプリを選択し、ポータルを選択します。

  3. その他のコマンド (...)を選択し、編集を選択します。

  4. [コンポーネント] ペインでテーマを選択します。

  5. 新しいテーマを選択します。

    新しいテーマを作成します。

テーマの詳細の編集

Power Apps Studio でテーマ名、説明、色、およびその他のタイポグラフィの設定を更新できます。

  1. Power Apps にサインインします。

  2. 左側のナビゲーション ウィンドウで、アプリを選択し、ポータルを選択します。

  3. その他のコマンド (...)を選択し、編集を選択します。

  4. テーマをコンポーネント ウィンドウから選択します。

  5. 現在適用されているテーマを選択するか、プリセットから新しいテーマを選択します。 テーマを選択すると、ワークスペースの右側の詳細ペインが開きます。

    テーマの詳細。

  6. さまざまな領域の名前、説明、色などのテーマの詳細を編集します。

    色のオプション 影響を受ける領域
    基本 ボタンとリンクの色。
    ヘッダー​​ ヘッダー背景色。
    ヘッダー メニューのテキスト ヘッダーメニューのテキストの色。
    ヘッダー メニュー ホバー カーソルを置いた時のメニュー項目の背景色。
    本文背景 本体セクションの背景色。
    フッター背景 フッターの背景色。
    フッター テキスト フッターのテキストの色。

  7. 変更を保存して公開します。

プリセット テーマをコピーする

  1. Power Apps にサインインします。

  2. 左側のナビゲーション ウィンドウで、アプリを選択し、ポータルを選択します。

  3. その他のコマンド (...)を選択し、編集を選択します。

  4. テーマをコンポーネント ウィンドウから選択します。

  5. プリセットからコピーするテーマを選択し、... を選択して、カスタマイズを選択します。

    プリセット テーマをコピーします。

  6. 前のセクションで説明したようにテーマの詳細を更新してから、テーマを保存します。

サス変数

サス は完全な CSS-互換構文を備えたスタイルシート言語です。 基本テーマ機能を有効にすると、値の代わりにテーマの色を構成して、サス変数 を使用できます。

たとえば、ヘッダー色をプライマリー色より 25％ 明るくする場合、特定の色の代わりに次の値を使用できます。

lighten($primaryColor, 25%);

Sass の例。

基本テーマで次のサス変数を使用できます。

色のオプション サス変数名
基本 $primaryColor
ヘッダー​​ $headerColor
ヘッダー メニューのテキスト $headerMenuTextColor
ヘッダー メニュー ホバー $headerMenuHoverColor
本文背景 $bodyBackground
フッター背景 $footerColor
フッター テキスト $footerTextColor

サス変数順序

サス変数は上から下に機能します。 ヘッダーの色に lighten($primaryColor, 25%); を設定できます。 ただし、ヘッダーはカラー オプション リストで以下のプライマリーなので、プライマリー色を lighten($headerColor, 25%); に設定できません。

基本テーマに関する考慮事項

  • 同じテーマ名または同じテーマ ファイル名を持つ 2 つのテーマを使用することはできません。
  • 手動で入力する色の値は、有効な色である必要があります。
  • プリセット テーマの CSS 変更はサポートされていません。
  • アクセスを可能にするために、推奨されるテーマの前景色と背景色のコントラスト比は 4.5:1 です。

次の手順

テーマ CSS を編集する

関連項目

Power Apps ポータル スタジオ
Web アプリを作成および管理する
WYSIWYG エディター

注意

ドキュメントの言語設定についてお聞かせください。 簡単な調査を行います。 (この調査は英語です)

この調査には約 7 分かかります。 個人データは収集されません (プライバシー ステートメント)。