レイアウトを使用したページ作成

現在の設定では、Welcomeページが全体の幅に表示されていますが、ページレイアウトを使ってこれを設定できます。ページの一番シンプルなレイアウトは1カラム(段落)で、このレイアウトに配置されたコンテンツは横幅を全体を使った表示になります。この場合、レイアウトの上下にコンテンツを配置できますが、横並びに配置することはできません。Liferay DXPでは様々なレイアウトオプションがあり、横並びや縦に配置などの組み合わせで表示できるので、自由自在なサイト作成が可能です。

 

次のセクションではレイアウトを使い「イベント」、「会社概要」ページを作成します。

 

 

イベントページの作成

上記のスクリーンショットで表示されているように、イベントページでは、左に小さなコラム、右に大きなコラムと2列のレイアウトを使用しています。この作成方法は以下です。

 

手順

 

  1. メインメニューを開き(画面左に表示されます)、Liferayリゾートのナビゲーションメニュー → オプション→[公開ページを追加する]を選択します。

  2. 下のスクリーンショットのページ作成フォームが表示されます。このフォームでページ名、テンプレートまたはレイアウトの選択、その他のオプションを選択します。

  3. 名前に「イベント」と入力します。

  4. レイアウトは[2カラム(30/70)]を選択します。このレイアウトは左のカラムが全体の30%、右のカラムが70%の幅で表示される設定になります。

    01.png

     

  5. 他のオプション設定は変えず、[ページを追加]をクリックします。

 

「Liferayリゾート」にイベントページが追加されました。このページがナビゲーションに表示されています。このイベントページも他のページ同じく、アプリケーションやコンテンツを追加できるようになりました。

会社概要ページの作成

次は「会社概要」ページの作成です。まずは上記のスクリーンショットのように3つのカラム設定をします。

 

  1. メインメニューから、「日本語ウェブサイト」ナビゲーションメニューを開きます。

  2. [ナビゲーション]メニューの[オプション]ボタンを選択し、「公開ページの追加」を選択します。

  3. 名前に「会社概要」を入力します。

  4. レイアウトは3カラムを選択します。

  5. 他のオプションは変更せずに、「ページの追加」をクリックします。

 

ナビゲーションバーには、ここで作成した2つページが表示されます。次のステップでは、さらに複数のページを追加し、ナビゲーションバーでその順序を並べ替えます。

 

02.png

 

次へ>>

この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています