##################
フッターの作成
##################

すでにヘッダーのパーシャルデザインを作成しているので、ここからの手順はメニューの場所などの説明は省略します。必要に応じて、前のページを参考にしてください。

まず、パーシャルデザインを追加を追加します。

.. image:: images/footer01.png
   :align: center
   :width: 400px
   :alt: パーシャルデザインを追加


今回は、`footer` を設定してパーシャルデザインアイテムを作成します。

.. image:: images/footer02.png
   :align: center
   :width: 400px
   :alt: footer を作成


今回はシンプルに、フッターにナビゲーションモジュールをまず配置します。

.. image:: images/footer03.png
   :align: center
   :width: 400px
   :alt: ナビゲーションを配置


配置したあと、前回ヘッダーを使ったときと同じビューが表示されます。

.. image:: images/footer04.png
   :align: center
   :width: 400px
   :alt: 配置後


今回も表示形式を変更します。変更をするためのアイコンをクリックしてダイアログを開きます。

.. image:: images/header09.png
   :align: center
   :alt: アイコン


ここでスタイリングにある項目から、`Big/Fat ナビゲーション` を設定してください。

.. image:: images/footer05.png
   :align: center
   :width: 400px
   :alt: ナビゲーションを配置


設定を変更すると、以下のように一般的に使われるフッターナビゲーションになりました。

.. image:: images/footer06.png
   :align: center
   :width: 400px
   :alt: スタイリングの変更


続いてナビゲーションコンポーネントの下に、「ページコンテンツ」グループから、「リッチテキスト」を選択してドラッグ＆ドロップで配置します。

.. image:: images/footer08.png
   :align: center
   :width: 400px
   :alt: リッチテキスト

リッチテキストエリアができます。このリッチテキストエリアをクリックすると、鉛筆のマークが表示されます。これをクリックして、以下の文章を入力しておきます。

.. code-block:: 

    Copyright 2019 Sitecore SXA Demo


.. image:: images/footer09.png
   :align: center
   :width: 400px
   :alt: テキストの入力

これで、サンプルのヘッダーの作成が完了しました。続いて、トップページで利用するボディのパーシャルデザインを作成します。


*************
参考動画
*************

.. raw:: html

    <iframe width="560" height="315" src="https://www.youtube.com/embed/SI2FckOWT6A" frameborder="0" allowfullscreen></iframe>