################## ボディの作成 ################## ヘッダー、フッターと作成したので、今回はトップページのボディ部分を作成します。まずはベースとなるパーシャルデザインを追加します。 .. image:: images/body01.png :align: center :width: 400px :alt: パーシャルデザインを追加 今回も同じ手順ですが、アイテム名として `homepage` を設定します。 .. image:: images/body02.png :align: center :width: 400px :alt: パーシャルデザインを追加 最初に、ページ構造のモジュール「スプリッター（行）」をボディエリアにドラッグ＆ドロップで配置します。 .. image:: images/body03.png :align: center :width: 400px :alt: スプリッタ行ーの配置 今回は、ボディエリアが上下２つに分かれました。続いて、下部のエリアに「スプリッター（列）」をドラッグ＆ドロップで配置します。 .. image:: images/body04.png :align: center :width: 400px :alt: スプリッター列の配置 今回はスプリッター（列）を利用して、エリアを3つに分けます。まず、カラムを1つ選択すると、以下のようなメニューが表示されます。 .. image:: images/body05.png :align: center :width: 400px :alt: 項目 このアイコンのうち ＋ のアイコンをクリックするとカラムを追加することができます。 .. image:: images/body06.png :align: center :width: 400px :alt: カラム追加 ３つのカラムに関して、エリアのサイズを 6 から 4 にすべて変更をします。 .. image:: images/body07.png :align: center :width: 400px :alt: テキストの入力 この３つのエリアに対してはコンテナーをすべてドラッグ＆ドロップで配置します。 .. image:: images/body08.png :align: center :width: 400px :alt: コンテナー 最後に、スプリッターの上のエリアに対して、複合グループにある「カルーセル」をドラッグ＆ドロップで配置します。 .. image:: images/body09.png :align: center :width: 400px :alt: カルーセル カルーセルのアイテムを選択するダイアログが表示されます。この際、まだ作成をしていない場合は、ここで作成をする必要があります。 .. image:: images/body10.png :align: center :width: 400px :alt: カルーセル作成 上のアイテム「Carousels(Curent site)」の右側にある「作成」をクリックします。するとカルーセル作成のダイアログが起動します。今回は「カルーセル」を選択、アイテム名としては Homepage を入力します。 .. image:: images/body11.png :align: center :width: 400px :alt: カルーセルアイテム作成 OK を押すと、カルーセルモジュールが追加されます。 .. image:: images/body12.png :align: center :width: 400px :alt: カルーセル配置完了 ３つのエリアには、プロモのアイテムを置いていきます。 .. image:: images/body13.png :align: center :width: 400px :alt: プロモの配置 プロモのアイテムがないため、Create をクリック、新しいアイテムを作成して指定します。 .. image:: images/body14.png :align: center :width: 400px :alt: プロモの作成 プロモに関しては３つアイテムを作成して仕上がりは以下の様になります。 .. image:: images/body15.png :align: center :width: 400px :alt: プロモを追加した 上記で、ボディのアイテム作成は完了しました。保存をして、エクスペリエンスエディターを一度閉じてください。 ************* 参考動画 ************* .. raw:: html