サイトのスタイル設定とテンプレート

完了

テーマでは、Power Pages サイトの色、フォント、セクションの余白、およびその他のデザイン要素について説明します。 各サイトには、選択したテンプレートで定義されているテーマがプロビジョニングされます。 ワークスペース要素 のスタイルを 使用すると、テーマをカスタマイズして、サイトの外観を特定の企業ブランドなどの設計要件に合わせることができます。

スタイル設定

使用可能な複数のプリセットからテーマを選択し、カスタマイズを適用します。 ページにカスタマイズがすぐに表示されるため、基本的なスタイル設定を簡単に操作できます。

[スタイル] ワークスペースを使用してテーマを選択および変更するスクリーンショット。

Copilotを使用して新しいテーマを生成することもできます。 ブランドや希望する見た目を説明すると、Copilot が確認して適用できるカスタム AI 生成テーマを作成します。 この機能は、[スタイル] ワークスペースで使用できます。

カスタム CSS

より複雑なスタイル設定の要件を満たす場合、Power Pages Design Studio を使用すると、作成者はカスタム CSS ファイルをアップロードできます。

カスタム CSS アップロード インターフェイスのスクリーンショット。

カスタム CSS ファイルをアップロードすると、すべてのテーマに適用され、ページ キャンバスには該当するスタイルが反映されます。 複数の CSS ファイルをアップロードし、必要に応じて順序を設定できます。 カスタム CSS の詳細については、製品ドキュメント の「Power Pages で CSS ファイルを管理 する」を参照してください。

Web エディター用の Visual Studio Code を使用して、個々のページにスタイルを適用することもできます。 エディターでページを開くと、HTML、CSS、JavaScript の 3 つのファイルが読み込まれます。 CSS ファイル内のすべての変更は、選択したページにのみ適用されます。

テンプレート

複雑なサイトの場合、Power Pages デザイン スタジオで使用できる標準レイアウトでは不十分な場合があります。 このようなシナリオでは、Power Pages ではカスタム レイアウトを使用したページの作成がサポートされています。

高度なシナリオでは、ポータル管理アプリでカスタム レイアウトをページ テンプレートとして作成できます。 新しいページ テンプレートを定義すると、カスタム レイアウトとしてデザイン スタジオで使用できるようになります。

Power Pages デザイン スタジオでレイアウトとして使用できるカスタム ページ テンプレートのスクリーンショット。

カスタム ページ テンプレートを作成する方法の詳細については、Power Apps ドキュメントの Web テンプレートを使用した ページ テンプレートの作成と管理ソース コンテンツの格納 に関するページ テンプレートを参照してください。