Documentation

サイトの外観を変更する

サイトのロゴ、ファビコン、テーマの変更は、最初に変更したいルックアンドフィールの一部です。 テーマは、サイトの全体的なルックアンドフィールを設定するために使用されます。 サイトのページは、DXPインスタンスに展開されているテーマを使用するように設定できます。

DXP Docker イメージでは、 Classic テーマがデフォルトで利用可能です。 この例では、新しいシンプルなテーマをデプロイしてから、テーマを切り替える方法を示します。

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

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

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

docker run -it -m 8g -p 8080:8080 liferay/portal:7.4.3.29-ga29。

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

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

  1. Download the WAR containing the Acme Sample Blue Theme :

    curl https://learn.liferay.com/dxp/latest/en/getting-started/changing-your-sites-appearance/liferay-5b2v-theme.war -O
    
  2. テーマを含むWARをデプロイします。

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

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

2020-03-11 17:06:35.601 INFO  [fileinstall-/opt/liferay/osgi/war][BundleStartStopLogger:39] STARTED liferay-5b2v-theme_1.0.0 [1112]

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

デプロイされたテーマを使用するようにサイトのページを設定します。

  1. ブラウザで https:// localhost:8080にアクセスし、 管理者としてログイン します。

  2. 画面の左側には サイトメニュー で、 [サイトビルダー] → [Pages] に移動します。

  3. アプリケーションバーの アクション ボタン (Action Button) をクリックし、 コンフィグレーション を選択します。

    ページ画面を開き、アプリケーションバーの[アクション]ボタンをクリックし、[設定]を選択します。

  4. スクロールダウンして、 [Change Current Theme] ボタンをクリックします。

    現在のテーマを変更する]をクリックして、新しいテーマを選択します。

  5. デプロイされたサンプルテーマ、 Acme Sample Blue Theme を選択します。

  6. サイトのホームページに戻り、テーマが変更されたことを確認します。 サイトのコンテンツセクションの背景が青色になりました。

    テーマを変更すると、ホームページの背景色が変わります。

サイトのテーマが更新されました。

次のステップ

サイトの外観を管理する方法の全容については、Managing Your Site's Appearanceを参照してください。

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

また、 独自のテーマを作成する方法も紹介されています。