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

Liferay DXP 7.4+

テーマ CSS クライアント拡張機能を使用すると、現在のテーマの CSS ファイル (main.css および clay.css) を上書きして、ページの見た目を変更できます。 サンプルワークスペース からクライアント拡張機能を開始します。

Liferay DXP 2024.Q2/Portal 7.4 GA120 以降では、テーマ CSS クライアント拡張機能で フロントエンドトークン定義 を提供できます。 以前のバージョンではテーマモジュールが必要でした。 ワークスペースプラグイン 10.1.1 、 com.liferay.gradle.plugins.workspace の少なくともバージョン 10.1.1 を使用する必要があります。 ワークスペースのルートにあるsettings.gradleファイルで設定する：

classpath group: "com.liferay", name: "com.liferay.gradle.plugins.workspace", version: "10.1.1"

前提条件

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

   注

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

2. サンプルワークスペースをダウンロードし、解凍します。

   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-theme-css-1/ フォルダーにあります。 client-extension.yaml ファイルに定義されています。

liferay-sample-theme-css-1:
    clayRTLURL: css/clay_rtl.css
    clayURL: css/clay.css
    mainRTLURL: css/main_rtl.css
    mainURL: css/main.css
    name: Liferay Sample Theme CSS 1
    type: themeCSS

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

また、以下のassemble YAMLブロックも含まれています。

assemble:
    - from: build/buildTheme/img
      into: static/img
    - from: build/buildTheme/images
      into: static/images

これらの指示により、テーマCSSクライアント拡張機能を構築した後、CSSに必要な画像がLiferayに静的リソースとして含まれるようになります。 package.json ファイルで参照されているベーステーマは、 build/buildTheme/imagesから組み立てられた画像を提供し、ベーステーマの CSS はそれらを必要とします。 build/buildTheme/img から組み立てられた画像は、クライアント拡張機能の src/img フォルダーから直接取得されます。

package.json ファイルには、次のコードが含まれています。

{
   "dependencies": {
      "sassy-inputs": "1.0.6"
   },
   "liferayDesignPack": {
      "baseTheme": "styled"
   },
   "main": "package.json",
   "name": "@liferay/liferay-sample-theme-css-1",
   "version": "1.0.0"
}

依存関係 セクションには、 sassy-inputs ライブラリが含まれています。 これは例では使用されていませんが、テーマのCSSクライアント拡張機能でnpmモジュールをインポートして使用する方法を示しています。 liferayDesignPack セクションでは、スタイルに使用される基本テーマを宣言します。 スタイル付き テーマを使用すると、ページ、フラグメント、ウィジェットで指定されている既存のスタイルに影響がないことが保証されます。 その他のフィールド main、 name および version は、必要なメタデータを提供します。

注

ベーステーマを スタイル付き または スタイルなし に設定できます。 スタイルなしのテーマには一連の基本スタイルが含まれており、 スタイル付き テーマには、 スタイルなし テーマのすべてのスタイルに加えて追加のスタイルが含まれています。 Liferay のすべてのテーマは、 スタイルなしの または スタイル付きの テーマをベースとして使用します。

別のテーマを使用しているページにテーマ CSS クライアント拡張機能を適用すると、クライアント拡張機能のスタイル がテーマのスタイル を置き換えます。 元のテーマにカスタムスタイルがある場合は、それらを _custom.scss ファイルに追加して、クライアント拡張機能を適用したときにそれらの要素が影響を受けないようにしてください。

既にテーマCSSクライアント拡張機能を使用しているページのテーマを変更すると、そのクライアント拡張機能は削除されます。

src/css/_custom.scss ファイルには、次の SCSS が含まれています。

@import 'sassy-inputs/sass/main';

header {
   background-image: url(../img/header_bg.jpg);
}

最初の行は、 package.json に追加された npm モジュールをインポートします。 CSSによってヘッダーが変更され、背景として画像が使用されるようになります。

注

コードは _custom.scss 内に存在し、 client-extension.yaml ファイルは clay.css と main.css を指しています。 これは、テーマ CSS クライアント拡張機能が完全な Clay CSS ビルド プロセスを実行し、コンパイルされた clay.css および main.css ファイルが生成され、その中に _custom.scss からのコンパイル済み CSS コードも含まれるためです。

テーマのCSSを変更する

すべての画像にホバー効果を適用するCSSを追加してください。 _custom.scss ファイルを開き、 img:hover の宣言を追加します。

img:hover{
   border: 2px solid red;
   border-radius: 10%;
}

これは、画像に 2px 赤い枠線があり、マウスオーバー時に角が丸くなることを定義します。

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

テーマCSSクライアント拡張機能をデプロイする

新しいLiferay インスタンスを起動し、以下を実行します。

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

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

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

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

これにより、クライアント拡張が構築され、Liferayのdeploy/フォルダにzipをデプロイします。

注

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

ヒント

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

Liferayインスタンスのコンソールでデプロイメントを確認します。

STARTED liferay-sample-theme-css-1_1.0.0

テーマCSSクライアント拡張機能をページに適用する

テーマのCSSクライアント拡張機能をすべてのページに一度に適用できます。 実際、テーマのCSSクライアント拡張機能を使用してフロントエンドトークン定義を提供するには、クライアント拡張機能を次のように適用する必要があります。

1. サイトメニュー (を開き、 サイトビルダーを展開し、 ページ をクリックします。

2. オプション () → 設定 をクリックします。

3. Theme CSS Client Extension までスクロールダウンして、すべてのページに適用します。

   

テーマのCSSを使用するように単一ページを設定するには：

1. ページ上で、上部の 編集 () をクリックします。

2. サイドバーで、 ページデザインオプション メニュー () に移動し、メニューの一番上にある 設定 () をクリックします。

3. 「外観」タブの「テーマ CSS クライアント拡張機能」セクションで、 をクリックし、 ( を追加 ) をクリックします。

4. 新しくデプロイされたクライアント拡張機能、 Liferay Sample Theme CSS 1 を選択します。

   

5. 下にスクロールして、［保存］をクリックします。

ページエディタでは、ヘッダーの背景は画像になっており、マウスカーソルを重ねたリンクはすべて背景色と文字色が変わります。 編集モード以外でページに変更内容が反映されるには、ページを公開する必要があります。

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

Liferay DXP 2025.Q1+/Portal GA132+

インスタンスに割り当てられた管理テーマによって提供される CSS を置き換えるには、テーマ CSS クライアント拡張機能の スコープ プロパティを controlPanel に設定します。 これにより、インスタンスのすべての管理ページにスタイルが適用されます。 管理ページは、コンテンツの作成やLiferayの設定を行うためのものです（例えば、サイトメニューやグローバルメニューからアクセスできるアプリケーションページなど）。 ページが管理用かどうかを判断するには、ブラウザのコンソールを開き、 themeDisplay.isControlPanel() と入力します。 管理ページは true を返します。

Liferay Sample Theme CSS 2プロジェクトのclient-extension.yamlファイルは、スコープをコントロールパネルに設定しています：

assemble:
    - from: build/buildTheme/img
      into: static/img
    - from: build/buildTheme/images
      into: static/images
liferay-sample-theme-css-2:
    clayRTLURL: css/clay_rtl.css
    clayURL: css/clay.css
    mainRTLURL: css/main_rtl.css
    mainURL: css/main.css
    name: Liferay Sample Theme CSS 2
    scope: controlPanel
    type: themeCSS

デプロイが完了すると、インスタンス内の任意の管理ページにアクセスして、適用されたスタイルを確認できます。

注

• テーマCSSクライアント拡張機能のスコープを設定できるのは、ワークスペースベースのクライアント拡張機能のみです。 UI を介してクライアント拡張機能を作成する場合、スコープを設定することはできません。クライアント拡張機能は常にページスコープであり、 サイトページ でのみ使用できます。
• コントロールパネルのスコープで複数のテーマCSSクライアント拡張機能をデプロイした場合、それらの拡張機能はどれも適用されません。
• スタイルブックは管理テーマでは使用できないため、コントロール パネルにスコープされたテーマ CSS クライアント拡張機能に frontend-token-definition.json ファイルを提供することにメリットはありません。

今後の流れ

LiferayでテーマCSSクライアント拡張機能を正常に使用できました。 次は他のクライアント拡張タイプのデプロイメントを試してみましょう。

• CSSクライアント拡張の使用
• JSクライアント拡張の使用
• テーマのお気に入りアイコンクライアント拡張の使用
• テーマスプライトマップクライアント拡張機能の使用

関連トピック

• テーマCSSクライアント拡張機能設定リファレンス