サイトの外観を変更する

Liferayにはサイトの外観をカスタマイズする方法がたくさんあります。 サイトのファビコンとテーマは、あなたが変更したいと思うかもしれない最初の要素の2つです。 テーマは、あなたのサイトのデフォルトのルック＆フィールを設定し、ファビコンは、ユーザーのブラウザのタブであなたのサイトを識別するためのアイコンです。

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

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

docker run -it -m 8g -p 8080:8080 liferay/portal:7.4.3.112-ga112。

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

次に、以下の手順に従います。

1. サイトメニュー()を開き、 サイトビルダー → ページ に移動します。

2. アプリケーションバーの Actions()をクリックし、 Configuration を選択します。

   

3. ファビコン]で、 ファビコンを選択（ ファビコンを選択ボタン ）をクリックします。

   

4. 画像を選択またはアップロードします。

5. ［保存］をクリックします。

サイトでは、選択した画像がお気に入りのアイコンとして使用されます。

サイトのテーマを変更する

デフォルトでは、LiferayインスタンスはClassicテーマを使用しますが、カスタムテーマをデプロイして使用することもできます。

新しいテーマをデプロイする

1. Acme Sample Blue Theme WARファイルをダウンロードし、解凍する：

   curl https://resources.learn.liferay.com/dxp/latest/en/getting-started/changing-your-sites-appearance/resources/liferay-5b2v.zip -O
   

   unzip liferay-5b2v.zip
   

2. .warファイルが置かれているフォルダに移動し、デプロイする：

   docker cp liferay-5b2v-theme.war [docker-container-id]:[path-to-deploy-folder]
   

Note

[docker-container-id] を置き換えるには、docker ps を使って liferay/portal コンテナの ID を調べます。 path-to-deploy-folder]は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]

サイトのテーマを変更する

1. サイトメニュー()を開き、 サイトビルダー → ページ に移動します。

2. アプリケーションバーの Actions()をクリックし、 Configuration を選択します。

   

3. テーマ]の下にある[現在のテーマを変更*]をクリックします：

   

4. サンプルテーマを選択してください： Acme Sample Blue Theme を選択してください。

5. ［保存］をクリックします。

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

次のステップ

さらに、 スタイルブック を使ってデザイン要素をさらにカスタマイズしたり、 マスターページテンプレート を使ってコンテンツページのヘッダーやフッターをデザインすることもできます。 サイトのルック＆フィールのカスタマイズの完全な概要については、 サイトの外観 をご覧ください。

Liferay Marketplace には、プロフェッショナルなルック＆フィールを素早く実現できるテーマが多数用意されています。

また、 独自のテーマを作成する方法を学ぶこともできます 。