ポータル用カテゴリを作成する

Microsoft Dynamics 365 のポータル機能でポータルを構築する場合、ブートストラップ フロントエンド フレームワーク を使用します。 ブートストラップ エコシステムを使用して、これらのポータルに、迅速かつ簡単に組織へのブランドをつけることができます。

ブートストラップ を使用したポータル テンプレートを実装

ブートストラップ は、一般的な Web アプリケーション インターフェイス要素の CSS と JavaScript コンポーネントを含むフロントエンド フレームワークです。 これには、電話やタブレットなどの異なる画面サイズのデバイスにダイナミックにサイトのレイアウトを調整する ナビゲーション要素フォームボタン、そして 応答グリッド レイアウト システム のスタイルが含まれます。 ブートストラップ レイアウト システムを使用して、顧客が使用する可能性のあるすべてのデバイスに適したインターフェイスを提供する単一のサイトを作成できます。

Dynamics 365 ポータルに含まれるテンプレートは、追加のカスタム スタイルが最小限の標準 ブートストラップ コンポーネントを使用して実装されます。 したがってこのテンプレートを実装する場合は、ブートストラップ カスタマイズ オプションを使用できます。 ポータル間で一貫して適用されるようにテーマ (フォント、色など) を迅速にカスタマイズできます。

ブートストラップ のカスタマイズ

ブートストラップ は一連の変数を通してカスタマイズをサポートしています。 任意またはすべての変数をカスタム値として設定し、これらの値に基づいてコンパイルされた ブートストラップ のカスタマイズしたバージョンをダウンロードできます。

ブートストラップ 変数の機能は、単一要素のスタイルを指示しないことです。 フレームワークのすべてのスタイルはこれらの値に基づき、派生します。 例えば、@font-size-base 変数を考慮します。 これは、ブートストラップ が通常の本文に割り当てるサイズを指定します。 ただし、ブートストラップ はこの変数を、見出しや他の要素のフォント サイズを指定するのに使用します。 h1 要素のサイズが、@font-size-base のサイズの 300% で定義される場合があります。 この 1 つの変数を設定することにより、ポータルのすべての表記スケールを一貫性のある方法で制御します。 同じように、@link-color 変数がハイパーリンクの色を制御します。 この値に色を割り当てると、ブートストラップ がリンクにカーソルを置いた時の色をカスタム値より 15% 暗い色に定義します。

ブートストラップ のカスタム バージョンを作成する標準的な方法は、公式 ブートストラップ サイトを通して です。 ただし、ブートストラップ の評判があるため、多くの第三者サイトもこの目的で作成されました。 これらのサイトは、ブートストラップ カスタマイズをより簡単に使用できるインターフェイスを提供したり、ダウンロードできる ブートストラップ の事前設計バージョンを提供する場合があります。 公式の ブートストラップ カスタマイザー サイトは、ブートストラップ カスタマイズについてより多くの情報を提供します。 このサイトは常に最も最新ですが、現在カラー ピッカーやライブ プレビューなどの幾つかの UI 機能は含まれていません。

ブートストラップ のカスタマイズされたバージョンをダウンロードすると、次のディレクトリ構造が含まれます。

css/ |-- bootstrap.min.css img/
|-- glyphicons-halflings-white.png |-- glyphicons-halflings.png js/ |-- bootstrap.min.js

または、使用したカスタマイズ アプリケーションによっては、bootstrap.min.css が含まれる場合があります。 それでも、bootstrap.min.css がカスタマイズを含むファイルです。 そのほかのファイルは、ブートストラップ のすべてのカスタマイズされたバージョンに対して同じで、Dynamics 365 ポータルに既に含まれています。

Web サイトにカスタム ブートストラップ テーマを適用します。

bootstrap.min.css をカスタマイズしたら、次の 2 つのうちいずれかの方法でポータルに適用できます。 開発者で、アプリケーションのソース コードを直接使用する場合は、アプリケーション ソースに含まれる bootstrap.min.css のバージョンをカスタマイズされたバージョンで上書きします。 しかし、ほとんどの場合は、Dynamics 365 ポータルのコンテンツ管理システム内で Web ファイルとしてアップロードすることでサイト コードを変更せずに、カスタマイズされた ブートストラップ テーマを適用することをお勧めします。

  1. コンテンツ管理のアクセス許可を持つユーザーとしてアプリケーションにサインインします。 詳細: PRM ポータルの Web ロールの構成.
  2. アプリケーションの [ホーム] ページに移動します。
  3. コンテンツ編集ツール バー (ブラウザー ウィンドウの右上隅) で [bootstrap.min.css] 用に [] >このファイルを編集します を選択します。
  4. 表示された [このファイルを編集します] ダイアログ ボックスの [ファイルのアップロード] フィールドを使用して、カスタマイズされた bootstrap.min.css ファイルを選択します。
  5. [部分 URL] フィールドが bootstrap.min.css に設定されていることを確認します。 この値が Dynamics 365 ポータルのフレームワークに対して、含まれている既定のバージョンの代わりに ブートストラップ のカスタマイズされたバージョンを使用する必要があることを示します。
  6. [サイトマップから非表示] チェックボックスを選択し (既定で選択済み)、サイト上のどのナビゲーション要素においてもユーザーにこのファイルが表示されないようにすることもできます。
  7. ファイルを [保存] します。
  8. ページを更新すると、カスタマイズされたスタイルをすぐに表示できます。

次のスクリーン ショットは、コミュニティ ポータルに適用された ブートストラップ のカスタマイズされたバージョンの例です:

Web サイトにカスタム ブートストラップ テーマを適用

追加のポータル テーマ オプション

カスタマイズされた ブートストラップのバージョン以外に、Dynamics 365 ポータルは、コンテンツ管理システムへの独自のカスタム CSS ファイルのアップロードをサポートします。 これにより、そのコードの新しいバージョンを展開する必要なく、ポータルにスタイルを適用することができます。 これを行うには、前述のカスタム ブートストラップ CSS をアップロードする手順に従いますが、独自の CSS を含むファイルを使用し、それからこの Web ファイルの新しい [部分 URL] を選択します。 [部分 URL] が .css で終わる限り、Dynamics 365 ポータルがそれを認識してサイトに適用します。

ブートストラップのカスタマイズされたバージョンとともに、ポータルのヘッダーにカスタム ロゴおよびブランドを追加するコンテンツ編集システムを使用できます。 これらの単純でありながら強力なオプションによって、間もなく Dynamics 365 ポータルのアプリケーションがブランドを反映します。

関連項目

コミュニティ ポータルを使用してコミュニティとやり取りする
Dynamics 365 ポータルの構成