スタイルブックを使用してサイトの外観を標準化する¶
対応可能：Liferay DXP/Portal 7.3以降
スタイルブック は、ページ全体で一貫したエクスペリエンスを提供するためにサイトに適用される一連の視覚的なルールです。 これらのルールによって、要素（ウィジェットなど）間の間隔、色、フォントなど、サイトのさまざまな視覚的設定が決定まります。 これらの各設定は、スタイルブックを使用するすべてのページに等しく適用されます。
サイトの公開ページに割り当てるテーマによって、サイトのスタイルブックで使用できる設定のカテゴリが決まります。 開発者は、スタイルブックを構成するための新しいオプションを使用してカテゴリをカスタマイズできます。 詳細については、 スタイルブックトークンの定義 を参照してください。
ページのスタイルブックの選択¶
ページに特定のスタイルブックを選択しない場合、ページはマスターページのスタイルブックを使用します。 どちらも設定されていない場合、ページはサイトのデフォルトのスタイルブックを使用します。
次の手順に従って、ページのスタイルブックを設定します。
ページ上部の 編集（
）をクリックします。サイドバーの ［Page Design Options］（
）をクリックします。［Style Book］ タブをクリックして開きます。
![[スタイルブック]タブを開き、リストから目的のスタイルブックを選択します。](../../../_images/01359.png)
リストから目的のスタイルブックを選択します。
［Publish］ をクリックします。
このページは、新しいスタイルブックを使用して公開されます。
新しいスタイルブックの作成¶
［サイトメニュー］ → ［デザイン］ → ［スタイルブック］ に移動します。
ページ上部の 追加（
）をクリックします。スタイルブックの名前を入力し、 ［保存］ をクリックします。
画面右側のメニューにあるドロップダウンボックスのカテゴリからオプションを変更します。
これらのオプションは、サイトで使用されているテーマに基づいています。 デフォルトの標準テーマで使用可能なカテゴリの詳細については、 デフォルトの標準テーマのカテゴリ を参照してください。
［Publish］ をクリックします。
編集時に、スタイルブックを任意のページのオプションとして選択できるようになりました。
このスタイルブックをサイトの新しいデフォルトにするには、新しく作成したスタイルブックの横にあるアクションメニュー（
）を開き、 ［Mark as Default］ をクリックします。
デフォルトの標準テーマカテゴリ¶
スタイルブックを編集しているとき、ドロップダウンボックスから利用できるカテゴリには、ページのスタイルを設定するためのさまざまなオプションが表示されます。
ちなみに
ページにスタイルガイドサンプルウィジェットを配置して、スタイルブックカテゴリのさまざまなオプションをテストするのに役立てることができます。 このサンプルウィジェットには、標準テーマのほとんどの機能を活用するさまざまなUI要素が含まれているため、これを使用してページスタイルをテストできます。
ここにリストされているカテゴリは、標準テーマのオプションとして利用できます。
色体系¶
テーマで定義されているフォントと視覚要素に使用される色は、［色体系］カテゴリでカスタマイズできます。 通常、これは、ページの本文、背景、およびテキストの色を変更できることを意味します。
![[色体系]カテゴリのオプションを使用して、ディスプレイまたはUI要素に使用される色を変更します。](../../../_images/03214.png)
注釈
アラート関連の要素（成功や注意など）の色を変更しても、各タイプのアラートは多くの色のうちのいずれかを使用する可能性があるため、サイトの着信アラートの色には影響しない場合があります。 アラートの色を完全にカスタマイズするには、カスタマイズ可能な色を定義して、独自のテーマのカテゴリで使用する必要があります。
間隔¶
Spacingカテゴリのオプションを使用して、ページの主要な要素間の間隔を調整します。
![[一般]カテゴリの [本文の背景]オプションを使用して、サイトページの背景の色をカスタマイズします。](site-building/site-appearance/style-books/using-a-style-book-to-standardize-site-appearance/images/04.png)
レイアウト¶
これらのオプションは、ページ上のコンテナの幅を変更します。 たとえば、新しい空白ページのデフォルトコンテナは、特大設定のサイズから設定できます。
文字体裁¶
これらのオプションは、ページの新しいフォントを定義します。 このカテゴリのオプションを使用して、ヘッダのサイズを調整することもできます。
![標準テーマを使用するときに、 [Button Primary]で色を変更すると、すぐに使用できるウィジェットの多くの一般的なボタンに作用します。](../../../_images/05111.png)