スタイルブックを使用してサイトの外観を標準化する
7.3+で利用可能
スタイル・ブック とは、ページ全体で一貫した体験を提供するために、サイトに適用される視覚的なルールのセットです。 これらのルールによって、要素（ウィジェットなど）間の間隔、色、フォントなど、サイトのさまざまな視覚的設定が決定まります。 これらの各設定は、スタイルブックを使用するすべてのページに等しく適用されます。
サイトのページに割り当てるテーマによって、サイトのスタイル・ブックで利用できる設定のカテゴリが決まります。 開発者は、スタイルブックを構成するための新しいオプションを使用してカテゴリをカスタマイズできます。 詳細は スタイルブックトークンの定義 を参照のこと。
ページのスタイルブックの選択
ページに特定のスタイルブックを選択しない場合、そのページは マスターページ のスタイルブックを使用します。 どちらも設定されていない場合、ページはサイトのデフォルトのスタイル・ブックを使用します。
Liferay 7.4 U10+とGA14+から、すべてのサイトにはStyles from Themeと呼ばれるスタイルブックが少なくとも1つあります。 このスタイルブックでは、テーマで定義されたトークン定義を、すべてのデフォルト値で使用します。 このスタイル・ブックは編集することができず、他のスタイル・ブックが設定されていない場合、サイトのデフォルトとして使用されます。
次の手順に従って、ページのスタイルブックを設定します。
-
ページ上部の 編集（
）をクリックします。 -
サイドバーの ページデザインオプション(
)をクリックします。 -
クリックすると スタイルブック タブが開きます。
-
リストから目的のスタイルブックを選択します。
-
［公開］ をクリックします。
このページは、新しいスタイルブックを使用して公開されます。
新しいスタイルブックの作成
-
サイトメニュー → デザイン → スタイルブック に移動します。
-
ページ上部の 追加（
）をクリックします。 -
スタイルブックの名前を入力し、 保存 をクリックします。
-
画面右側のメニューにあるドロップダウンボックスのカテゴリからオプションを変更します。
これらのオプションは、サイトで使用されているテーマに基づいています。 デフォルトのクラシックテーマで利用可能なカテゴリの詳細については、 デフォルトのクラシックテーマのカテゴリ を参照してください。
-
選択したカテゴリの下にある提供されたフィールドのいずれかをカスタマイズします。 カラーフィールドは特に、 色を選択する複数の方法を提供する 。
-
［公開］ をクリックします。
編集時に、スタイルブックを任意のページのオプションとして選択できるようになりました。
このスタイルブックをあなたのサイトの新しいデフォルトにするには、新しく作成したスタイルブックの横にあるアクションメニュー（
）を開き、 デフォルトとしてマーク をクリックします。
スタイルブックのプレビュー
利用可能な7.4 DXP U9+またはGA13+
スタイル・ブックを作成または編集している間、ページ、ページ・テンプレート、ページ・フラグメントなど、サイトのさまざまなコンポーネントの外観に与える影響をプレビューすることができます。
画面上部の2つのドロップダウンメニューを使用して、プレビューするコンポーネントを選択します。 左のドロップダウンメニューは、表示する全体のタイプ（ページ、ページテンプレート、マスターページテンプレート、表示ページテンプレート、ページフラグメント）を決定します。 右のドロップダウンメニューは、選択したタイプのどの特定のインスタンスを表示するか（該当する場合はカテゴリー）を決定します。リストから More をクリックしない限り、最近使用された4つのオプションのみが右のドロップダウンメニューに表示されます。
ページフラグメントのコレクションをプレビューすると、コレクション内のすべてのフラグメントが表示されます。 プレビューでは、複数の（選択可能な）設定オプションを持つフラグメントが、各オプションのインスタンスとともに表示されます。
スタイルブックの色をカスタマイズする
スタイル・ブック内のカラー・フィールドで色を選択する場合、複数の方法で色を選択することができます：
-
左側の色をクリックしてカラーピッカーを開き、任意の色を選択します。
-
任意の色に変更するには、希望の色の16進コードをテキストボックスに入力します。
-
スタイルブックからの値*ボタンをクリックすると、あらかじめ定義された色のメニューが開きます。 カスタマイズできる一般的なカテゴリーから、それぞれ色を選んで再利用することができる。
スタイルブックからの値] ボタンをクリックし、スタイルブック トークン値（別のカテゴリーでも定義されている）を選択すると、そのカラー フィールドは選択したスタイルブック トークンにリンクされます。 将来、このスタイル・ブックのトークン値を変更すると、このカラー・フィールドも変更されます。
カラーフィールドがスタイルブックトークンに結びつけられている場合、[スタイルブックから値を取得]ボタンは トークンを削除 ボタンに置き換えられます。 このボタンをクリックすると、トークンからカラーフィールドが切り離されます（ただし、同じカラー値は保持されます）。
カラー値をスタイルブックトークンにアタッチまたはデタッチするには、Liferay DXP 7.4 U10+またはGA14+が必要です。
右側の Clear Selection ボタンをクリックして、色をデフォルト値（テーマで定義）に戻します。
特定のページでスタイル・ブックから色を編集する場合も、色を選択するオプションは同じです。 しかし、Clear Selectionボタンをクリックすると、代わりに選択したStyle Bookで定義されたデフォルトの色にリセットされます。
カラーピッカーを使う
スタイルブックをカスタマイズしている間、カラーピッカーを使って色を検索し、検索結果をフィルタリングしてください。
カラーピッカーの使用はスタイルブックに限定されません。 Liferayの他の部分でも見つけることができます（例えば、 コンテンツページの編集中 ）。
カラー・ピッカーにアクセスするには、カラー値（背景や枠線など）の横にある スタイル・ブックからの値（
）をクリックするか、アイコンがない場合はカラー値をクリックします（テキスト・カラーなど）。
カラーピッカーでは、既存の色がカテゴリーとトークンセットで分けられている。 色の上にカーソルを置くと、その色のトークン値を見ることができます。
特定の色を検索するには、検索バーを使用します。 カテゴリ 、 トークンセット 、 トークン値 、 16進カラー値 で検索できます。
検索バーを使用する場合、検索システムは大文字と小文字を区別しません。 また、検索で結果が得られなかった場合、検索エリアに No Results Found というメッセージが表示される。
デフォルトの標準テーマカテゴリ
スタイルブックを編集しているとき、ドロップダウンボックスから利用できるカテゴリには、ページのスタイルを設定するためのさまざまなオプションが表示されます。 各カテゴリーで利用可能なオプションは、テーマによって定義されます。
ページにスタイルガイドサンプルウィジェットを配置して、スタイルブックカテゴリのさまざまなオプションをテストするのに役立てることができます。 このサンプルウィジェットには、標準テーマのほとんどの機能を活用するさまざまなUI要素が含まれているため、これを使用してページスタイルをテストできます。
ここにリストされているカテゴリは、標準テーマのオプションとして利用できます。
幅、マージン、パディングなど、色に関係のないオプションを変更する場合は、定義済みの単位セットから選択するか、カスタム単位を指定することができます。 いくつかのオプションには、ピクセル(PX)、パーセント(%)、em幅(EM)、ルートem(REM)があります。
色体系
テーマで定義されているフォントと視覚要素に使用される色は、［色体系］カテゴリでカスタマイズできます。 通常、これは、ページの本文、背景、およびテキストの色を変更できることを意味します。
アラート関連の要素（成功や注意など）の色を変更しても、各タイプのアラートは多くの色のうちのいずれかを使用する可能性があるため、サイトの着信アラートの色には影響しない場合があります。 アラートの色を完全にカスタマイズするには、カスタマイズ可能な色を定義して、独自のテーマのカテゴリで使用する必要があります。
間隔
Spacingカテゴリのオプションを使用して、ページの主要な要素間の間隔を調整します。 対応するスタイルブックを使ってページフラグメントを設定すると、フラグメントのマージンとパディングのサイズのオプションとしてこれらの値が与えられます。
width、margin、paddingなど、色に関係のないトークンを変更する場合、定義済みの単位セットから選択するか、カスタム単位を指定することができます。 この柔軟性により、スタイリングをより正確にコントロールすることができる。 いくつかのオプションには、ピクセル(PX)、パーセント(%)、em幅(EM)、ルートem(REM)があります。
共通
これらのオプションは、サイトのすべてのページに表示される要素の色と間隔を変更します。 例えば、 Body Background オプションは、すべてのページの背景色を変更します。
レイアウト
これらのオプションは、ページ上のコンテナの幅を変更します。 たとえば、新しい空白ページのデフォルトコンテナは、特大設定のサイズから設定できます。
文字体裁
これらのオプションは、ページの新しいフォントを定義します。 このカテゴリのオプションを使用して、ヘッダのサイズを調整することもできます。
ボタン
これらのオプションは、デフォルトタイプのボタンのスタイルを変更します。 標準テーマで使用される各ボタンの背景色、前景色、および線の色をカスタマイズできます。
