ポータルのテーマ

8 分

Power Pages では、Bootstrap フロンドエンドフレームワークを使用して、Web サイトのデザインやレイアウトを制御します。 Bootstrap は、タイポグラフィ、フォーム、ボタン、ナビゲーションなどの要素に加え、オプションの JavaScript 拡張機能を含む、HTML およびカスケードスタイルシート (CSS) のデザインテンプレートのパッケージです。 Bootstrap が標準で提供するさまざまな魅力的な機能の 1 つとして、レスポンシブレイアウトが挙げられます。レスポンシブレイアウトでは、小さなスマートフォンから大きなデスクトップまで、あらゆるデバイスで美しく表示されるように、Web サイトが自動的に調整されます。

テーマの基本事項

テーマによって、Web サイトのすべての Web ページの外観が決まり、視覚的な一貫性が確保されます。テーマを使用して、ナビゲーションの構造、バナー、色、フォントなどの、Web ページの視覚要素をコントロールします。

Power Pages に含まれている Web テンプレートは、標準の Bootstrap コンポーネントを使用し、その他のカスタムスタイルをごくわずかに加えることで実装できます。したがって、これらのテンプレートに基づく Web サイトでは、Bootstrap によって提供されるカスタマイズオプションを活用できます。テーマは、Web サイト全体に一貫して適用されるようにカスタマイズできます。

Web ページ上の CSS

カスケードスタイルシート (CSS) は、テキスト、フォント、色、背景、境界線、余白などの HTML 要素をどのように表示するかを記述して、Web ページのスタイルを指定するための言語です。

Web サイトページのスタイルに変更を加えるのは、CSS ステートメントをページに直接適用するのと同じくらい単純です。 Visual Studio Code を使用してページコンテンツを編集する場合、CSS を独立したファイルとして使用できます。そのファイルの内容は、Web ページの行のカスタム CSS 列に格納されます。その CSS はページの一部として含まれ、スタイルが自動的に適用されます。たとえば、ホームページの上部にあるナビゲーションバーの高さをロゴに合わせて拡大する必要がある場合は、CSS ファイルを編集し、カスタム CSS ステートメントを追加することができます。

.navbar-static-top.navbar { min-height: 100px; }

メモ

Web ページに直接追加される CSS ステートメントは、その Web ページのみに適用されます。

1 つのページで小規模な調整を行う場合や、ページ固有のデザイン (特定のイベントランディングページなど) が必要な場合には、このプロセスで問題ありません。より効果的で柔軟な方法として、1 つまたは複数の CSS ファイルにカスタマイズ内容を記録し、Web サイトの全体または一部に適用することができます。

カスタマイズの適用

Power Pages は、Web サイトをデザインするためのテーマとツールの包括的なコレクションを提供します。いくつかのテーマから Web サイトで使用するものを選択し、スタイル設定オプションを使用してさらにパーソナライズしてください。

Power Pages デザインスタジオのスタイル設定ワークスペースでは、Web サイトに適用される CSS スタイルが制御され、汎用のサイトデザインを実装できます。会社のブランド化に関する変更を組み込んで、アプリウィンドウの右側のプレビューペインで変更内容を確認できます。スタイル設定にはあらかじめデザインされた複数のテーマが用意されており、各テーマについて、配色、背景色、フォントタイプ、ボタンのデザイン、およびセクションの間隔を変更できます。

テーマ

テーマでは、さまざまなテキスト要素、ボタン、リンク、およびセクションレイアウトのスタイルを定義することで、サイトの全体的な外観と動作を作成します。サイトにさらにカスタマイズが必要な場合は、CSS の管理機能を使用できます。

スタイル設定ワークスペースでは、使用可能なテーマから選択できます。テーマを選択した後、個々の要素をさらにカスタマイズして、目的のスタイルを作成できます。

CSS の管理

CSS の管理機能にアクセスするには、省略記号 (...) メニューを選択し、テーマタイルで CSS の管理を選択します。

すべての Power Pages Web サイトでは、bootstrap.min.css、theme.css、portalbasictheme.css の各ファイルがすべてのページに既に含まれています。これらのファイルは、Web サイト全体のスタイルを定義します。 アップロード リンクを使用して CSS ファイルをさらにアップロードし、Visual Studio Code エディターで編集することができます。詳細については、「Power Pages で CSS ファイルを管理する」を参照してください。

Web サイトのスタイルを変更する際には、どの方法を取るかを検討する必要があります。

サイト全体の包括的なスタイルを作成してから、CSS ファイルの内容を置き換えます。このプロセスは、必要な要素をすべて確実に定義できる優れたデザイナーがいる場合に適しています。この方法では、スタイルを集約的に管理でき、Web サイト全体の一貫性を確保できます。
色やフォントサイズなど、変更が必要な要素のみ定義し直します。これらの変更の差分のみを含む CSS ファイルを作成してアップロードします。このプロセスは、使用したいデザインが、選択したテンプレートに含まれているデザインに近く、スタイルにわずかな変更を加えるだけで済む場合に適しています。この方法では、差分の変更が可能であり、元に戻すこともできます。

警告

bootstrap.min.css ファイルまたは theme.css ファイルを上書きする場合は、これらのファイルを置き換える前に、バックアップ用のコピーをダウンロードしておいてください。置き換えた CSS が有効でないか、不十分だった場合、置き換えたファイルを元に戻せない可能性があります。その結果、Web サイトが機能しなくなった場合は、これらのファイルの内容を復元する必要が生じます。

ローカライズされた CSS の変更

サイト全体に CSS を適用するのではなく、ポータル管理アプリを使用して CSS を Web ファイルとしてアップロードすることができます。 Web ファイルに含まれる CSS は、ファイルの親ページとその下位にあるすべてのページに適用され、サイトに完全にカスタマイズされたセクションを作成できるようになります。

たとえば、ニュース セクションとその下にあるすべての新しい記事に別のスタイルを適用するには、ニュースに移動し、子 Web ファイルを作成して .css 拡張子を付け、CSS ファイルをアップロードします (ファイル名は何でも構いません)。これで、スタイルはニュース セクションとそのコンテンツのみに適用されます。

重要

部分 URL は、Web サイトが認識して Web ページとその子ページに適用するために、.css で終わる必要があります。

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

ブートストラップのカスタムバージョンを作成する標準的な方法は、公式のブートストラップサイトを使用する方法です。ただし、ブートストラップは広く使用されており、このための他のソースサイトも多数作られています。ブートストラップをカスタマイズするためのより使いやすいインターフェイスが用意されているサイトや、さまざまなデザインのブートストラップをダウンロードできるサイトがあります。公式の Bootstrap のカスタマイズサイトには、Bootstrap のカスタマイズに関する詳細情報が記載されています。

ヒント

Bootstrap をカスタマイズする際には、変更が必要な要素のみを選択します。たとえば、フォントを会社の標準フォントに置き換えるだけであれば、Bootstrap のタイポグラフィコンポーネントを選択することにより、他の CSS 要素が誤って書き換えられる可能性を減らすことができます。

Bootstrap を設定すると、1 つまたは複数のファイルが生成されます。これらのファイルを Web ファイルとしてアップロードします。元のスタイルを完全に置き換える場合以外は、部分 URL で bootstrap.css、bootstrap.min.css、theme.css、theme.min.css を使用しないようにしてください。Power Pages で複数の CSS ファイルを扱う方法に影響があるためです。