Documentation

サイトの外観を変更する

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

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

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

docker run -it -m 8g -p 8080:8080 liferay/portal:7.4.3.55-ga55。

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

次に、以下の手順を実行します。

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

  2. アプリケーションバーにある アクション ボタン(Action Button)をクリックし、 設定 を選択します。

    Pagesアプリケーションを開き、アプリケーションバーのアクションボタンをクリックし、設定を選択します。

  3. [お気に入りアイコン]で お気に入りアイコンの変更 をクリックします。

    お気に入りアイコンの変更をクリックします。

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

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

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

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

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

新しいテーマをデプロイする. Acme Sample Blue Theme を含むWARをダウンロードします。

``bash
curl https://learn.liferay.com/dxp/latest/en/getting-started/changing-your-sites-appearance/liferay-5b2v-theme.war -O
```
  1. テーマを含む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. サイトメニュー (Site Menu) を開き、 サイトビルダーページに進みます。

  3. アプリケーションバーのアクションボタン(Action Button)をクリックし、*[Configuration]*を選択します。

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

  4. Look And Feel セクションを展開し、 Change Current Themeをクリックします。

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

  5. サンプルテーマを選択します。 Acme Sample Blue Theme.

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

トップページに移動して、背景色が青になったことを確認します。

背景色が青になったことを確認する。

次のステップ

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

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

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