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

CSSクライアント拡張機能の使用

Liferay 7.4以降

CSSクライアント拡張機能は、ページに新しいCSSスタイルを追加します。ページにデプロイされたCSSクライアント拡張機能は、テーマやスタイルブックの設定など、ページの既存のスタイル設定に追加されます。クライアント拡張機能から始めます（サンプルワークスペースから）。

前提条件

クライアント拡張の開発を開始するには、

サポートされているバージョンの Java をインストールしてください。

注記

サポートされているJDK、データベース、および環境については、互換性マトリックスをご確認ください。推奨される JVM 設定については、 JVM 構成を参照してください。

サンプルワークスペースをダウンロードして解凍してください。

curl -o com.liferay.sample.workspace-latest.zip https://repository.liferay.com/nexus/service/local/artifact/maven/content\?r\=liferay-public-releases\&g\=com.liferay.workspace\&a\=com.liferay.sample.workspace\&\v\=LATEST\&p\=zip

unzip com.liferay.sample.workspace-latest.zip

これで、最初のCSSクライアント拡張をデプロイするためのツールがそろいました。

クライアント拡張機能を検査および変更する

CSSクライアント拡張機能は、サンプルワークスペースの client-extensions/liferay-sample-global-css/ フォルダにあります。 client-extension.yaml ファイルに定義されています。

liferay-sample-global-css:
    name: Liferay Sample Global CSS
    type: globalCSS
    url: global.css

クライアント拡張機能の ID は liferay-sample-global-css で、CSS クライアント拡張機能のキー構成が含まれています。これには、 タイプ と追加する CSS ファイルが含まれます。利用可能なプロパティの詳細については、 CSS YAML 設定リファレンスを参照してください。

また、assembleブロックが含まれています。

assemble:
    - from: assets
      into: static

これは、 assets/ フォルダ内のすべてを、ビルドされたクライアント拡張.zip ファイルに静的リソースとして含めることを指定します。 CSSクライアント拡張子のCSSファイルは、Liferayの静的リソースとして使用されます。

assets/global.css ファイルにこのCSSが含まれています。

.logo::after {
   color: #0054f0;
   content: 'Liferay Sample Global CSS';
   margin-left: 2rem;
}

これは、クライアント拡張機能が有効になっている場合に、ホームページに表示されるLiferayロゴの色を変更します。

ボタンの背景色を変更するCSSを追加します。 global.cssファイルを開き、.btn-primaryクラスの宣言を追加し、 background-colorを指定します。

.btn-primary {
    background-color: purple;
}

ここで、クライアント拡張をデプロイします。

Liferayにクライアント拡張機能をデプロイする

Liferay の新しいインスタンスを起動するには、次のコマンドを実行します。

docker run -it -m 8g -p 8080:8080 liferay/portal:7.4.3.132-ga132

http://localhost:8080 で Liferay にサインインしてください。メールアドレス test@liferay.com とパスワード test を使用してください。プロンプトが表示されたら、パスワードを learn に変更してください。

Liferayが起動したら、サンプルワークスペース内のクライアント拡張機能のフォルダから以下のコマンドを実行してください。

../../gradlew clean deploy -Ddeploy.docker.container.id=$(docker ps -lq)

これによりクライアント拡張機能がビルドされ、zipファイルがLiferayの deploy/ フォルダにデプロイされます。

注記

クライアント拡張機能を Liferay SaaS にデプロイするには、Liferay Cloud コマンドラインツールを使用して lcp deploy を実行します。

ヒント

ワークスペース内のすべてのクライアント拡張機能を同時にデプロイするには、 client-extensions/ フォルダーからコマンドを実行します。

Liferayインスタンスのコンソールでデプロイメントを確認してください。

STARTED sample-global-css_1.0.0

クライアント拡張機能がデプロイされたので、Liferayがそれを使用するように設定してください。

ページでクライアント拡張機能を使用する

Liferayで、デプロイ済みのクライアント拡張機能を使用するようにページを設定します。

ボタンが少なくとも 1 つあるページで、上部にある編集 ( ) をクリックします。
サイドバーで、[ページデザインオプション] メニュー ( ) に移動し、メニュー上部の設定アイコン () をクリックします。
ページ下部の CSS クライアント拡張機能セクションで、 CSS クライアント拡張機能を追加 をクリックします。
ポップアップモーダルからCSSクライアント拡張機能を選択し、追加をクリックします。
をクリックして保存します。

これでクライアント拡張機能の設定が完了しました。ページエディタでは、ボタンの背景色がCSSで指定した色になりました。編集モード以外でページにCSSが適用されていることを確認するには、ページを公開する必要があります。

クライアント拡張機能のglobal.cssファイルで背景色を変更すると、ページ上のすべてのボタンの色が変更されます。

ヒント

ページ上のボタンの背景色がデフォルトのままの場合は、ページを強制的に更新してブラウザのキャッシュをクリアしてください（ほとんどのブラウザではCTRL + SHIFT + R）。クライアント拡張機能を変更して再デプロイした場合、変更を反映させるには、ページから拡張機能を削除して再度追加する必要がある場合があります。

インスタンス全体でクライアント拡張機能を使用してください

Liferay DXP 2025.Q1+/Portal GA132+

CSS クライアント拡張機能の スコープ プロパティを company に設定すると、管理ページを含むインスタンスのすべてのページに適用されます。例えば、 Liferay Sample Global CSS 1 プロジェクトについては、 client-extension.yaml ファイルを参照してください。

assemble:
   - include: static/*.css
liferay-sample-global-css-1:
   name: Liferay Sample Global CSS 1
   scope: company
   type: globalCSS
   url: global.*.css

企業スコープのCSSクライアント拡張機能は、インスタンスがデプロイされるとすぐに、そのインスタンスのすべてのページに適用されます。 Liferay UIで企業スコープのCSSクライアント拡張機能を有効にする必要はありません。

このCSSは、インスタンス内のすべてのページに適用されます。