oo

サイトの外観を変更する

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

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

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

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

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

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

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

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

    Open the Pages application, click Actions in the Application Bar, and select Configuration.

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

    Click the Select Favicon button.

  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 を選択します。

    Open the Pages screen, click Actions in the Application Bar, and select Configuration.

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

    Click Change Current Theme to select a new theme.

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

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

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

Confirm the background color is now blue.

次のステップ

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

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

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

Capability: