ホームページの追加

今現在、 http://localhost:8080 、デフォルトのサイトが表示される。前回のモジュールでは、インスタンス名を変更し、ロゴを設定した。これによって、サイトはカスタマイズされたルック＆フィールを持つようになった。

The default home page has a header, footer, and some Welcome to Liferay content.

クラリティには独自のホームページが必要だ。ページの作成と管理はサイト管理者の仕事であり、適切な権限があれば誰でも行うことができます。すぐに使えるように、Liferayには必要なパーミッションを提供するSite Administratorというロールが用意されています。このロールに割り当てられ、サイトのメンバーであるユーザーは、サイトの管理者として行動することができます。最初のモジュールで実行されるセットアップスクリプトは、あなたのLiferayインスタンスに、まさにそのようなユーザーであるPreston Palmerを事前に入力しています。

サイト管理者としてログインし、Preston Palmer: preston@clarityvisionsolutions.com、パスワード test。
トップページに行き、管理用ヘッダーの編集()をクリックする。

コンテンツページエディターが表示されます。ここでページにコンテンツ、機能、構造を追加する。
ブラウザを開き（）、すべての要素を展開して、ページの構造のスナップショットを取得する：
一番外側のコンテナの Actions メニュー()をクリックし、 Delete をクリックする。

これであなたのページは白紙に戻った。次の練習で）変更しなければならないヘッダーとフッターは残っているが、デフォルトのページコンテンツはなくなっている！
プラスアイコン()をクリックして、フラグメントとウィジェットのサイドバーメニューを開きます。
Container フラグメントをページにドラッグする。

コンテナは、フラグメントやウィジェットのための設定可能なドラッグ＆ドロップゾーンを定義します。すべてのコンテンツページ要素をコンテナに追加することで、ページのスタイリングがより便利になります。
コンテナにバナーを追加する。サイドバーの「Fragments and Widgets」メニューから Banner を探し、すでに追加したコンテナの中にドラッグします。

バナーは2つのコンテナ、見出し、段落、ボタンで構成される。

ブラウザのサイドバー()で、要素を展開すると、現在のページ要素の階層が表示されます：
バナーのトップレベルコンテナの名前を変更する。ブラウザのサイドバーで、 Actions メニュー()を開き、 Rename をクリックします。
バナーコンテナ に入る。
ブラウザのサイドバーにある Banner Container をクリックし、その設定（右サイドバーのメニュー）を開きます。 Generalセクションで、バナーの最小高さを80VHに設定する。これにより、バナーは現在のデバイスのビューポートの高さの80％を占めるようになります。
バナーの内側のコンテナが中央に来るように設定する。バナー・コンテナのコンテンツ表示を Flex Column に設定し、コンテンツのジャスティファイを Center に設定します。
内側のコンテナとその要素（見出し、段落、ボタン）の周りにパディングがあるように設定します。サイドバーの一番内側の Container をクリックして設定を開き、 Styles をクリックします。
パディングを全周1レムに変更する。スペーシングの設定で、要素の右、左、上、下のパディングに スペーサー3 を選択します。

各スペーサーの設定値は、ページのスタイルブックで定義されています。
バナーの背景に画像を設定します。 Background は、各コンテナ要素のコンフィギュレーションのプロパティである。ブラウザのサイドバーにある Banner Container をクリックします。
右サイドバーの Styles メニューを開き、 Background Image をclarity-banner-imageに設定します。
編集する要素をダブルクリックして、ページ上のテキストを変更します：
- 見出し： See Well, Look Good
- 段落： こんなに元気な自分、こんなに格好いい自分を見たことがないだろう。
- ボタン: 詳細はこちら
Publish ボタンをクリックします。