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

サイトの外観を変更する

Liferay には、サイトの外観をカスタマイズする方法が数多くあります。サイトのファビコンとテーマは、最初に変更したい 2 つの要素です。テーマはサイトのデフォルトの外観と雰囲気を設定し、ファビコンはユーザーのブラウザタブでサイトを識別するアイコンです。

サイトのファビコンを変更する

新しい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 インスタンスはクラシックテーマを使用しますが、カスタムテーマをデプロイして使用することもできます。

Acme Sample Blue Theme WAR ファイルをダウンロードして解凍します。

curl https://resources.learn.liferay.com/examples/liferay-5b2v.zip -O

unzip liferay-5b2v.zip

.war ファイルが配置されているフォルダーに移動して、それをデプロイします。
```
docker cp liferay-5b2v-theme.war [docker-container-id]:[path-to-deploy-folder]
```

注

[docker-container-id]を置き換えるには、 docker ps を使用して liferay/portal コンテナの ID を見つけます。 [デプロイフォルダへのパス] は opt/liferay/deployです。

これにより、サンプルテーマが DXP インスタンスに読み込まれます。テーマが正常にデプロイされたことを確認するには、コンソールで次のメッセージを確認します。

2023-12-21 16:01:20.836 INFO  [fileinstall-directory-watcher][BundleStartStopLogger:68] STARTED liferay-5b2v-theme_1.0.0 [1617]

ホームページに移動し、背景色が青になっていることを確認します。

背景色が青になっていることを確認します。

さらに、スタイルブックを使用してデザイン要素をさらにカスタマイズしたり、マスターページテンプレートを使用してコンテンツページのヘッダーとフッターをデザインしたりすることもできます。サイトの外観と雰囲気をカスタマイズする方法の完全な概要については、「サイトの外観」を参照してください。

Liferay Marketplace には、プロフェッショナルな外観と雰囲気をすぐに実現できるテーマが多数用意されています。

Capability:

Resource Type:

Feature:

Deployment Approach: