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