ページのヘッダーとフッターを定義する
マスターページテンプレート では、ページのヘッダーとフッターに共通の要素を定義できます。 クラリティには現在、ホームページが1ページあるだけだ。 これはマスターページが利用可能になる前に作成されたため、空白のマスターページが自動的にページに関連づけられた。 ヘッダーにはLiferayのロゴとラベル、ページベースのナビゲーションメニュー、検索バーウィジェット、サインイン/パーソナルメニューがあります。
クラリティは独自のヘッダーとフッターのデザインを必要とするため、マスターページを作成してヘッダーとフッターを定義し、サイト全体のすべてのページで再利用します。
-
サイトメニュー( 商品メニュー )を開き、 デザイン → ページテンプレート をクリックします。
-
追加(
)をクリックし、ページ名を Clarity MP とします。コンテンツページエディターが表示されます。 デフォルトでは、ページにはドロップゾーンという1つの要素しかない。 クラリティのヘッダーとフッターは、ドロップゾーンの上下に表示されます。
-
サイドバーの「フラグメントとウィジェット」(
) メニューで、 clarity-header-comp をドロップゾーンの上にドラッグし、次に clarity-footer-comp をドロップゾーンの下にドラッグします。これらのフラグメントコンポジションは、前のステップ、 Fragments and Resources でインポートしました。
-
ヘッダーの画像断片をロゴにマッピングする。 ブラウザーを開き（
）、Header Container要素を展開し、真ん中のグリッドモジュールの画像フラグメントにたどり着くまで要素の展開を続けます。
-
画像断片をクリックして設定を開き、 image-square をクリックして画像のソースを設定します。
-
直接ソースを選択し、画像 clarity logo_を選択します。
-
同じ手順で、 clarity logo_画像をフッターの画像断片に追加します。
-
マスターを公開する」をクリックする。
ユーザーメニューはカスタムフラグメント
user-nav-fragment.zipです。 HTMLとCSSを使用して、ログイン・ユーザー用のメニューを作成します。 ログアウトしているユーザーには、ユーザーアイコンとSIGN INの文字が表示され、これをクリックするとサインインページにアクセスできます。
マスターページが完成した。 現在、ヘッダーとフッターの両方に、サイトのページ階層を示すメニューがあります。 これは ナビゲーションメニューの作成 で改善される。 今は、既存のHomeページとすべてのウィジェットページ（例えば、既存のSearchページ）でマスターページを使用するようにLiferayを設定する時です。
-
マスターページの Actions メニュー(
)を開き、 Mark as Default をクリックします。 このマスターページをすべてのウィジェットページのデフォルトとして使用することを確認してください。 -
トップページに移動し、管理ヘッダーの 編集(
)をクリックする。 -
コンテンツ・ページ・エディターで、 ページ・デザイン・オプション サイドバー・メニュー（ ページ・デザイン・オプション ）を開き、 Clarity MP を選択します。
-
Publish_をクリックする。
-
同様の手順で、デフォルトのユーティリティページ（404と500エラーページ）をマスターページを使用するように設定します。 サイトメニュー(
)で、 サイトビルダー → ページ → ユーティリティページ をクリックします。
これでマスターページにヘッダーとフッターが定義されました。
ヘッダーとフッターがあっても、ルック＆フィールはまだ洗練されていない。 リンクは現在すべて青色で、例えばクラリティのブランドカラーにはマッチしていません。 手作業で時間をかけて修正するよりも、今はそのままにしておこう。 後で導入するテーマCSSクライアントエクステンションが、これらの視覚的欠点を改善する。
次ページ： サイトの残りのページを作成する.