スタイルブックを使用してサイトの外観を標準化する¶
7.3以降で利用可能
スタイルブック は、ページ全体で一貫したエクスペリエンスを提供するためにサイトに適用される一連の視覚的なルールです。 これらのルールによって、要素（ウィジェットなど）間の間隔、色、フォントなど、サイトのさまざまな視覚的設定が決定まります。 これらの各設定は、スタイルブックを使用するすべてのページに等しく適用されます。
サイトのページに割り当てるテーマによって、サイトのスタイルブックで利用可能な設定のカテゴリが決まります。 開発者は、スタイルブックを構成するための新しいオプションを使用してカテゴリをカスタマイズできます。 詳細については、 スタイルブックトークンの定義 を参照してください。
ページのスタイルブックの選択¶
ページに特定のスタイルブックを選択しない場合、ページはマスターページのスタイルブックを使用します。 どちらも設定されていない場合、ページはサイトのデフォルトのスタイルブックを使用します。
注釈
Liferay 7.4 U10+ と GA14+ からは、すべてのサイトに Styles from Theme というスタイルブックが少なくとも1つ利用できるようになりました。 このスタイルブックでは、テーマで定義されたトークン定義を、すべてのデフォルト値で使用します。 このスタイルブックは編集することができず、他のスタイルブックが設定されていない場合、サイトに使用されるデフォルトとなります。
次の手順に従って、ページのスタイルブックを設定します。
ページ上部の 編集（
）をクリックします。サイドバーの ［Page Design Options］（
）をクリックします。［Style Book］ タブをクリックして開きます。
![[スタイルブック]タブを開き、リストから目的のスタイルブックを選択します。](../../../_images/01497.png)
リストから目的のスタイルブックを選択します。
［公開］ をクリックします。
このページは、新しいスタイルブックを使用して公開されます。
新しいスタイルブックの作成¶
［サイトメニュー］ → ［デザイン］ → ［スタイルブック］ に移動します。
ページ上部の 追加（
）をクリックします。スタイルブックの名前を入力し、 ［保存］ をクリックします。
画面右側のメニューにあるドロップダウンボックスのカテゴリからオプションを変更します。
これらのオプションは、サイトで使用されているテーマに基づいています。 デフォルトの標準テーマで使用可能なカテゴリの詳細については、 デフォルトの標準テーマのカテゴリ を参照してください。
選択されたカテゴリの下にある提供されたフィールドのいずれかをカスタマイズします。 カラーフィールドは特に、 複数の方法で色を選択することができます。 .
［Publish］ をクリックします。
編集時に、スタイルブックを任意のページのオプションとして選択できるようになりました。
このスタイルブックをサイトの新しいデフォルトにするには、新しく作成したスタイルブックの横にあるアクションメニュー（
）を開き、 ［Mark as Default］ をクリックします。
スタイルブックのプレビュー¶
利用可能 7.4 DXP U9+ または GA13+
スタイルブックの作成または編集中に、ページ、ページテンプレート、ページフラグメントなど、サイトのさまざまなコンポーネントの外観に与える影響をプレビューすることができます。
画面上部にある2つのドロップダウンメニューで、プレビューするコンポーネントを選択します。 左のドロップダウンメニューで、表示する全体の種類（ページ、ページテンプレート、マスターページテンプレート、表示ページテンプレート、ページフラグメント）を決定します。 右のドロップダウンメニューは、選択したタイプの特定のインスタンス（または該当する場合はカテゴリ）を表示することを決定します。リストから More をクリックしない限り、最近使用した4つのオプションのみが右のドロップダウンメニューに表示されます。
ページフラグメントのコレクションをプレビューすると、コレクション内の全フラグメントが表示されます。 プレビューでは、複数の（選択可能な）設定オプションを持つフラグメントが各オプションのインスタンスとともに表示されるので、どれかを使ってスタイルブックをプレビューすることができます。
スタイルブックのカラーをカスタマイズする¶
スタイルブックの任意のカラーフィールドで色を選択する場合、複数の方法で色を選択することができます。
左側の色をクリックするとカラーピッカーが表示されますので、任意の色を選択してください。
テキストボックスに希望の色の16進コードを入力すると、任意の色に変更することができます。
**Value from Stylebook ボタンをクリックすると、あらかじめ定義された色のメニューが表示され、その中から選択することができます。 カスタマイズできる一般的なカテゴリーから、それぞれ色を選んで再利用することができます。
スタイルブックの値］ボタンをクリックして、（他のカテゴリでも定義されている）スタイルブック トークンの値を選択すると、そのカラー フィールドは選択したスタイルブック トークンにリンクされます。 今後、このスタイルブックのトークン値を変更すると、このカラーフィールドも変更されます。
カラー フィールドがスタイルブック トークンと関連付けられている場合、「スタイルブックから値を取得」ボタンが「トークンを切り離す」 ボタンに置き換えられます。 このボタンをクリックすると、トークンからカラーフィールドが切り離されます（ただし、同じカラー値は維持されます）。
注釈
スタイルブックトークンにカラー値をアタッチまたはデタッチするには、Liferay DXP 7.4 U10+またはGA14+が必要です。
右側の「クリアセレクション」 ボタンをクリックすると、色がデフォルト値（テーマで定義されている）に戻されます。
注釈
特定のページでスタイルブックから色を編集している場合も、同じように色を選択するオプションがあります。 しかし、「選択部分を消去」ボタンをクリックすると、代わりに選択したスタイルブックで定義されたデフォルトの色値にリセットされます。
デフォルトの標準テーマカテゴリ¶
スタイルブックを編集しているとき、ドロップダウンボックスから利用できるカテゴリには、ページのスタイルを設定するためのさまざまなオプションが表示されます。 各カテゴリーで利用可能なオプションは、テーマによって定義されています。
Tip
ページにスタイルガイドサンプルウィジェットを配置して、スタイルブックカテゴリのさまざまなオプションをテストするのに役立てることができます。 このサンプルウィジェットには、標準テーマのほとんどの機能を活用するさまざまなUI要素が含まれているため、これを使用してページスタイルをテストできます。
ここにリストされているカテゴリは、標準テーマのオプションとして利用できます。
色体系¶
テーマで定義されているフォントと視覚要素に使用される色は、［色体系］カテゴリでカスタマイズできます。 通常、これは、ページの本文、背景、およびテキストの色を変更できることを意味します。
![[色体系]カテゴリのオプションを使用して、ディスプレイまたはUI要素に使用される色を変更します。](../../../_images/0782.png)
注釈
アラート関連の要素（成功や注意など）の色を変更しても、各タイプのアラートは多くの色のうちのいずれかを使用する可能性があるため、サイトの着信アラートの色には影響しない場合があります。 アラートの色を完全にカスタマイズするには、カスタマイズ可能な色を定義して、独自のテーマのカテゴリで使用する必要があります。
間隔¶
Spacingカテゴリのオプションを使用して、ページの主要な要素間の間隔を調整します。 対応するスタイルブックを使ってページ・フラグメントを設定すると、これらの値がフラグメントのマージンとパディングのサイズのオプションとして提供されます。
共通¶
これらのオプションは、サイトのすべてのページに表示される要素の色と間隔を変更します。 たとえば、 ［本文の背景］ オプションは、すべてのページの背景色を変更します。
![[一般]カテゴリの [本文の背景]オプションを使用して、サイトページの背景の色をカスタマイズします。](../../../_images/0862.png)
レイアウト¶
これらのオプションは、ページ上のコンテナの幅を変更します。 たとえば、新しい空白ページのデフォルトコンテナは、特大設定のサイズから設定できます。
文字体裁¶
これらのオプションは、ページの新しいフォントを定義します。 このカテゴリのオプションを使用して、ヘッダのサイズを調整することもできます。
ボタン¶
これらのオプションは、デフォルトタイプのボタンのスタイルを変更します。 標準テーマで使用される各ボタンの背景色、前景色、および線の色をカスタマイズできます。
![標準テーマを使用するときに、 [Button Primary]で色を変更すると、すぐに使用できるウィジェットの多くの一般的なボタンに作用します。](../../../_images/0944.png)