ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。

スタイルブックを使用してサイトの外観を標準化する

7.3以降で利用可能

サイトの スタイルブック は、ページ全体で一貫したエクスペリエンスを適用するための視覚的なルールを提供します。スタイルブックは、要素 (ウィジェットなど) 間の間隔、色、フォントなど、さまざまな視覚設定を決定します。これらの各設定は、スタイルブックを使用するすべてのページに等しく適用されます。

ページのテーマは、フロントエンドトークン定義を介して、スタイル設定に使用できるカテゴリと各トークンのデフォルトスタイルを決定します。ページのスタイルブックは、各トークンのスタイル値をカスタマイズします。スタイルブックはテーマ内のフロントエンドトークン定義に依存するため、テーマとスタイルブックは互換性がある必要があります。 Liferay のバージョン間でこの関係の適用には顕著な違いがあります。

注

テーマは、テーマ CSS クライアント拡張機能またはレガシーテーマ (Classic や Dialect など) によって提供されます。どちらのテーマタイプでも、スタイルブックで使用されるフロントエンドトークン定義を提供できます。以下の テーマ という単語が記載されている箇所では、テーマ CSS クライアント拡張機能またはレガシーテーマのいずれかを適用できます。

スタイルブックとテーマの互換性

Liferay DXP 2025.Q2より前では、スタイルブックは、サイトのパブリックページに割り当てられたテーマまたはテーマCSSクライアント拡張機能からオプションを自動的に継承していました。その結果、スタイルブックがページで正しく機能するには、ページがサイトのパブリックページから同じテーマを継承する必要がありました。

現在のサイトテーマを使用してスタイルブックを追加します。

Liferay DXP 2025.Q2+ からは、スタイルブックと基礎となるテーマ間の依存関係を有効にすることができます。リリース機能フラグ テーマスコープスタイルブック (LPD-30204) を有効にすると、新しい動作を活用できます。これには、

スタイルブックの作成者は、スタイルブックが対象とするテーマ CSS クライアント拡張機能またはテーマを指定する必要があります。
ページエディターは、ページテーマと互換性のないフロントエンドトークン定義を使用するスタイルブックを選択できません。

特定のテーマを対象としたスタイルブックを追加します。

スタイルブックとテーマの非互換性から保護されるだけでなく、ページごとに固有のテーマとスタイルブックを提供できるようになりました。

新しいスタイルブックの作成

サイトメニュー → デザイン → スタイルブックに移動します。
ページの上部近くにある追加 () をクリックします。
テーマまたはテーマ CSS クライアント拡張機能を選択し、スタイルブックの名前を入力します。 [保存]をクリックします。
画面右側のメニューにあるドロップダウンボックスのカテゴリからオプションを変更します。

これらのオプションは、スタイルブックの作成時に選択したテーマから取得されます。デフォルトのクラシックテーマで使用できるカテゴリの詳細については、デフォルトのクラシックテーマカテゴリを参照してください。
選択したカテゴリの下に表示されているフィールドのいずれかをカスタマイズします。カラーフィールドでは、特に複数の方法で色を選択できます。
公開をクリックします。

スタイルブックは、同じテーマを使用する任意のページに適用できるようになりました。

このスタイルブックをテーマの新しいデフォルトにするには、新しく作成したスタイルブックの横にある [アクション] メニュー () を開き、 [X テーマのデフォルトとしてマーク]をクリックします。

警告

リリース機能フラグ テーマスコープのスタイルブック (LPD-30204) (Liferay DXP 2025.Q2+ から利用可能) を有効にしないと、テーマと互換性のないスタイルブックを選択できます。これは、サイトに 1 つのテーマが設定されたスタイルブックを作成し、その後そのスタイルブックを引き続き使用しながらテーマを変更した場合に発生する可能性があります。

ページのスタイルブックの選択

ページに特定のスタイルブックを選択しない場合、そのページではマスターページのスタイルブックが使用されます。どちらも設定されていない場合、ページではテーマのデフォルトのスタイルブックが使用されます。

リリース機能フラグ テーマスコープのスタイルブック (LPD-30204) を有効にすると、ページがカスタムスタイルブックを使用するように構成されているときにテーマを変更すると、スタイルブックも変更されます。新しいテーマのデフォルトのスタイルブックが設定されました。

各サイトには、テーマごとに少なくとも 1 つのスタイルブック ( X テーマのスタイル) が用意されています。このスタイルブックでは、テーマで定義されたトークン定義と、すべてのデフォルト値を使用します。このスタイルブックは編集できず、他のスタイルブックが構成されていない場合はサイトのデフォルトとして使用されます。

ページにスタイルブックを適用するには、次の手順に従います。

ページの上部近くにある編集 () をクリックします。
サイドバーの ページデザインオプション () をクリックします。
スタイルブック タブを開きます。
適用したテーマに対応するスタイルブックを選択します。
公開をクリックします。

このページは新しいスタイルブックを使用して公開されています。

スタイルブックのプレビュー

7.4 DXP U9+またはGA13+が利用可能

スタイルブックを作成または編集しているときに、ページ、ページテンプレート、ページフラグメントなど、サイトのさまざまなコンポーネントの外観にスタイルブックがどのように影響するかをプレビューできます。

画面上部の 2 つのドロップダウンメニューを使用して、プレビューするコンポーネントを選択します。左側のドロップダウンメニューでは、表示する全体的なタイプ (ページ、ページテンプレート、マスターページテンプレート、表示ページテンプレート、またはページフラグメント) を決定します。右側のドロップダウンメニューでは、選択したタイプ (または該当する場合はカテゴリ) のどの特定のインスタンスを表示するかを決定します。リストから [詳細] をクリックしない限り、右側のドロップダウンメニューには最近使用した 4 つのオプションのみが表示されます。

2 つのドロップダウンメニューを一緒に使用して、スタイルブックをプレビューするために表示する内容を選択します。

ページフラグメントのコレクションをプレビューすると、コレクション内のすべてのフラグメントが表示されます。プレビューには、複数の（選択可能な）構成オプションを持つフラグメントと各オプションのインスタンスが表示されるため、それらのいずれかを使用してスタイルブックをプレビューできます。

ページフラグメントに対するスタイルブックの効果をプレビューする場合は、選択したコレクションのフラグメントの任意の構成をプレビューできます。

スタイルブックの色をカスタマイズする

スタイルブックのカラーフィールドで色を選択するときは、複数の方法で色を選択できます。

左側の色をクリックしてカラーピッカーを開き、任意の色を選択します。
希望する色の 16 進コードをテキストボックスに入力します。 Liferay DXP 2025.Q4/Portal 2026.Q1 以降では、8 桁の 16 進数とアルファベットのコード (例: #RRGGBBAA) を使用して色の不透明度を設定できます。
スタイルブックからの値 ボタンをクリックすると、選択可能な定義済みの色のメニューが開きます。カスタマイズ可能な各一般カテゴリから色を再利用することもできます。

任意のカラーオプションの色を変更するには、いくつかのオプションがあります。

[スタイルブックからの値] ボタンをクリックし、スタイルブックトークン値 (別のカテゴリでも定義されている) を選択すると、その色フィールドは選択したスタイルブックトークンにリンクされます。このスタイルブックのトークン値が今後変更されると、この色フィールドも変更されます。

カラーフィールドがスタイルブックトークンに関連付けられている場合、[スタイルブックからの値] ボタンは [トークンの切り離し] ボタンに置き換えられます。このボタンをクリックすると、トークンからカラーフィールドが切り離されます (ただし、カラー値は同じままです)。

[トークンの切り離し] ボタンをクリックすると、スタイルブックトークンからカラーフィールドが切り離されますが、カラー値はそのまま保持されます。

注

スタイルブックトークンに色の値を添付または添付解除するには、Liferay DXP 7.4 U10+ または GA14+ が必要です。

右側の 選択をクリア ボタンをクリックすると、色がテーマで定義されたデフォルト値に戻ります。

注

特定のページでスタイルブックから色を編集する場合も、色を選択するための同じオプションがあります。ただし、 選択のクリア ボタンをクリックすると、色の値は選択したスタイルブックで定義されているデフォルトにリセットされます。

カラーピッカーの使用

スタイルブックをカスタマイズするときに、カラーピッカーを使用して色を検索し、検索結果をフィルターします。

カラーピッカーの使用はスタイルブックに限定されません。 Liferay の他の部分でも見つけることができます (例: コンテンツページを編集しているとき)。

カラーピッカーにアクセスするには、カラー値 (背景や境界線など) の横にある スタイルブックからの値 () をクリックするか、アイコンが使用できない場合 (テキストの色など) はカラー値をクリックします。

スタイルブックからの値アイコンをクリックするか、アイコンが使用できない場合は色の値をクリックして、カラーピッカーにアクセスします。

カラーピッカーでは、既存の色がカテゴリとトークンセットごとに分割されています。色の上でカーソルを動かすと、その色のトークン値が表示されます。

カラーピッカーで色の上にカーソルを置くと、色のトークン値が表示されます。

検索バーを使用して、大文字と小文字を区別せずに特定の色を検索します。カテゴリ、トークンセット、トークン値、または 16 進カラー値で検索できます。

デフォルトの標準テーマカテゴリ

スタイルブックを編集しているときに、ドロップダウンボックスから使用できるカテゴリには、ページのスタイルを設定するためのさまざまなオプションが表示されます。各カテゴリで利用可能なオプションは、テーマまたはテーマ CSS クライアント拡張のフロントエンドトークン定義によって定義されます。

ヒント

スタイルガイドサンプル ウィジェットをページに配置して、スタイルブックカテゴリのさまざまなオプションをテストすることができます。このサンプルウィジェットには、標準テーマのほとんどの機能を活用するさまざまなUI要素が含まれているため、これを使用してページスタイルをテストできます。

ここにリストされているカテゴリは、標準テーマのオプションとして利用できます。

ヒント

幅、余白、パディングなどのサイズ設定オプションを変更するときは、定義済みの単位のセットから選択するか、カスタム単位を指定できます。オプションには、ピクセル (PX)、パーセンテージ (%)、em 幅 (EM)、ルート em (REM) などがあります。

色体系

テーマで定義されているフォントと視覚要素に使用される色は、［色体系］カテゴリでカスタマイズできます。通常、これは、ページの本文、背景、およびテキストの色を変更できることを意味します。

[色体系]カテゴリのオプションを使用して、ディスプレイまたはUI要素に使用される色を変更します。

注

アラート関連の要素 ( 成功や警告など) の色を変更しても、サイトに表示されるアラートの色には影響しない場合があります。これは、アラートの種類ごとに複数の色のいずれかが使用される可能性があるためです。アラートの色を完全にカスタマイズするには、カスタマイズ可能な色を定義して、独自のテーマのカテゴリで使用する必要があります。

間隔

Spacingカテゴリのオプションを使用して、ページの主要な要素間の間隔を調整します。対応するスタイルブックを使用してページフラグメントを構成する場合、これらの値はフラグメントの余白とパディングのサイズのオプションとして提供されます。

[色体系]カテゴリのオプションを使用して、ディスプレイまたはUI要素に使用される色を変更します。

ヒント

色に関連しない幅、余白、パディングなどのトークンを変更する場合は、定義済みの単位のセットから選択するか、カスタム単位を指定できます。この柔軟性により、スタイルをより正確に制御できます。オプションには、ピクセル (PX)、パーセンテージ (%)、em 幅 (EM)、ルート em (REM) などがあります。