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

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

7.3以降で利用可能

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

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

注

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

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

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

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

Liferay DXP 2025.Q2以降では、スタイルブックと基となるテーマとの間に依存関係を設定できます。新しい動作を利用するには、リリース機能フラグ テーマスコープのスタイルブック (LPD-30204) を有効にしてください。

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

特定のテーマに特化したスタイルブックを追加する。

スタイルブックとテーマの互換性の問題からユーザーを保護するだけでなく、ページごとに独自のテーマとスタイルブックを設定できるようになりました。

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

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

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

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

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

警告

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

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

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

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

どのサイトにも、テーマごとに少なくとも 1 つのスタイルブックが用意されており、 Styles from X Theme と呼ばれています。このスタイルブックは、テーマで定義されているトークン定義を、すべてのデフォルト値とともに使用します。このスタイルブックは編集できません。また、他のスタイルブックが設定されていない場合は、サイトのデフォルトとして使用されます。

ページにスタイルブックを適用するには、以下の手順に従ってください。

ページ上部付近にある編集 () をクリックします。
サイドバーの ページデザインオプション () をクリックします。
スタイルブック タブを開きます。
適用するテーマに合ったスタイルブックを選択してください。
［Publish（公開）］をクリックします。

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

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

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

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

画面上部にある2つのドロップダウンメニューを使用して、プレビューするコンポーネントを選択してください。左側のドロップダウンメニューで、表示する全体的なタイプ（ページ、ページテンプレート、マスターページテンプレート、表示ページテンプレート、またはページフラグメント）を選択します。右側のドロップダウンメニューは、選択したタイプのどの特定のインスタンスを表示するかを決定します（または、該当する場合はカテゴリ）。リストから More をクリックしない限り、右側のドロップダウンメニューには最近使用した 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）などがあります。