テーマ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を使用する必要があります。 ワークスペースのルートにある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 セクションでは、スタイルに使用される基本テーマを宣言します。 スタイルの テーマを使用すると、ページ、フラグメント、ウィジェットに指定されている既存のスタイルが影響を受けないことが保証されます。 その他のフィールド メイン、 名前 、および バージョン は、必要なメタデータを提供します。

注

基本テーマを スタイル付き または スタイルなしに設定できます。 スタイルなしのテーマには基本スタイルのセットが含まれており、 スタイル付き テーマには、 スタイルなし テーマのすべてのスタイルと追加のスタイルが含まれています。 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. テーマ CSS クライアント拡張機能 まで下にスクロールし、すべてのページに適用します。

   

テーマ CSS を使用するように単一のページを構成するには:

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

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

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

4. 新しくデプロイされたクライアント拡張機能 Liferay サンプルテーマ CSS 1を選択します。

   

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

ページ エディターでは、ヘッダーの背景は画像になっており、マウスをポイントしたすべてのリンクの背景とテキストの色が変更されています。 編集モード以外のページで変更内容を確認するには、ページを公開する必要があります。

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

Liferay DXP 2025.Q1+/ポータル GA132+

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

Liferay サンプルテーマ 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 クライアント拡張機能設定リファレンス