はじめに
Liferayの初期状態はシンプルなデザインになっていますが、オリジナルデザインのカスタマイズを行うことができるので、今回はその方法をご紹介します。
Liferayでサイトのデザインをカスタマイズする方法は何通りもあります。
GUIで色の設定をしていくこともできますが、CSSの知識がある方であれば、より柔軟にデザインのカスタマイズを行うことができます。今回はCSSのカスタマイズ方法を3種類ご紹介します。
CSS設定方法の比較
まずはCSS設定方法の比較表をご覧ください。
詳しい説明は次項で説明していきます。
| 設定方法 | 影響範囲 | スタイル優先度* | バージョン管理 | 想定ユースケース |
| ページフラグメント | フラグメント内のみ | 高 | 低 | ボタン・カードなどの UI パーツ |
| カスタム CSS | サイト全体 | 中 | 低 | 全ページ共通レイアウト／ページ単位の微調整 |
| Client Extension | 環境全体（サーバ単位） またはテーマ単位 | 低 | 高 | 全ページ共通レイアウト |
*優先度は、CSSはフラグメント ＞ カスタムCSS ＞ Client Extension になります。
ページフラグメント
ページフラグメントとは、ボタンやカードなどの UI パーツを作成できる機能です。UIパーツ単位でスタイルを設定したい場合は、ページフラグメント内のCSS入力欄に入れることで設定できます。
＜設定手順＞
LiferayDXP管理画面＞左サイドバー＞デザイン＞ページフラグメント＞新規作成
カスタムCSS
LiferayDXPの管理画面から設定を行うことで反映されます。
サイト全体に適用させる方法と、ページ単位に適用させる方法があります。（※サイト全体とページ単位の併用は不可）
デプロイ不要ですぐにサイト表示確認ができる為、開発中はこの方法がおすすめです。
設定手順 サイト全体に適用する場合
LiferayDXP管理画面＞左サイドバー＞サイトビルダー＞サイトページ＞右上の三点リーダー＞設定＞カスタムCSS
設定手順 個別ページに適用する場合
LiferayDXP管理画面＞左サイドバー＞ページツリーから対象のページを選択＞右上の歯車アイコン＞デザインタブ＞カスタムCSS
「カスタムCSS は継承されたテーマを使用する場合は無効です。」と表示され、カスタムCSSの入力欄が選択できない場合
ページ全体に対してカスタムCSSが適用されている場合、各ページから設定画面を開くとこのようなアラートが表示され設定できないようになっていることがあります。
ページ上部のテーマで、「継承されたテーマを使用します。」が選択されている場合は、ページ毎のCSSは設定できず、継承する形になっている為です。「このページ用のカスタムテーマを定義します」を選択すると、ページ固有のカスタムCSSが設定が可能です。
Client Extension
設定手順
1.Javaをインストール
Javaバージョンをインストールします。サポートされているJDK、データベース、環境の詳細については、以下の互換性マトリックスを参照してください。（本記事作成時はjava version “11.0.24”）
https://www.surekhatech.com/blog/enhance-liferay-portal-design-using-theme-client-extensions
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
ダウ
ンロードが完了したら、「com.liferay.sample.workspace-latest.zip」を解凍します。
3.ワークスペース プラグインのバージョンを設定
ワークスペースのルートにある settings.gradle ファイルを開き、classpathを以下のように設定します。
buildscript {
dependencies {
classpath group: "com.liferay", name: "com.liferay.gradle.plugins.workspace", version: "10.1.1"
}
…省略…4.Theme CSS Client Extension の中身を確認
サンプルワークスペースの「client-extensions/liferay-sample-theme-css-1/」ディレクトリに移動します。client-extension.yaml は以下のように定義されています。※「liferay-sample-theme-css-1」は任意の名前に変更してください。
assemble: - from: build/buildTheme/img into: static/img - from: build/buildTheme/images into: static/images 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| 項目 | 説明 |
| name | 管理画面に表示される拡張の名称 |
| type | 必ず themeCSS |
| clayURL／mainURL | 読み込む CSS ファイルのパス |
| assemble | ビルド後に画像を静的リソースとして ZIP に含める設定 |
package.json の内容例：
{
"name": "@liferay/liferay-sample-theme-css-1",
"version": "1.0.0",
"main": "package.json",
"liferayDesignPack": {
"baseTheme": "styled"
},
"dependencies": {
"sassy-inputs": "1.0.6"
}
}| 項目 | 説明 |
| dependencies | CSS 内で使えるライブラリ |
| liferayDesignPack.baseTheme | styleまたはunstyledを指定 |
5.SCSSをカスタマイズ
src/css/_custom.scss を開き、CSSを記述します。（以下は例です）
@import 'sassy-inputs/sass/main'; body { background-color: #eee; }
これで、Client Extensionのスタイルが完成です。
6.ビルド・デプロイ
ワークスペースのルートで以下のコマンドを実行します。
./gradlew clean deploy拡張モジュール（ZIP または JAR）が生成されます。
例：\client-extensions\custom-css-blue\dist\custom-css-blue.zip
7.ご自身のLiferay環境に作成したClient Extensionを取り込む（デプロイを行わない場合）
custom-css-blue.zipを、ご自身のLiferay環境のdeployディレクトリに入れると、Liferayのホットデプロイ機構により自動でファイルを取り込みます。（しばらくするとzipファイルは無くなります）
次に、LiferayDXP管理画面＞左サイドバー＞サイトビルダー＞サイトページ＞右上の三点リーダー＞設定と進みます。
テーマのCSSクライアント拡張項目内、「テーマのCSS」の＋ボタンを押します。
先ほどdeployフォルダに置いたClient Extensionファイルが表示されるので、選択して「保存」ボタンを押します。
複数のClient Extensionを入れて、切り替えを行うことも可能です。
最近だとテーマを使わないことが増えてきました。テーマをカスタマイズした場合、Liferayのバージョンアップをすると表示崩れが起きたり、テーマを使わなくとも十分なカスタマイズができる為です。Client Extentionはテーマと分離している為、テーマを作成することなく、簡単に導入ができます。また、テーマを作成するとメンテナンスコストが掛かる為、テーマを作成せずにClient Extentionの導入のみでサイトデザインをカスタマイズすることで、CSSのみのメンテナンスに抑えることができます。
デザインカスタマイズ例
以下は実際にカスタムCSSや、Client Extentionを使用して作成したサイトデザインの一例です。
高性能・カスタイマイズ性の高いLiferayDXPを使用して、社内ポータルサイトやBtoBサイトなどの制作をお考えの方は、OxygenDesignにお任せください。
デザインのカスタマイズ～機能実装まで一貫して制作を行っております。
まずは試してみたいという企業様向けに、ご要望に合わせたデモサイト作成も承っておりますので、ぜひお問い合わせください。
