HaramizuTwitter@haramizuヘッダーが出来上がったので今回はフッターのエリアを作成したいと思います。フッターにはメニューの主な項目を表示する様な形としていきたいため、フッターの作り方だけでなくメニューの制御について学んでいきます。サイトのメニューを作成していく今回はコンテンツのツリー構造を少し増やしてみます。単純にページアイテムを増やしているだけですが、以下の様な形とします。これによりすでに作成済みのヘッダーメニューの表示も変わりました。クリックしてください。いうデザインを作成します。続いてヘッダーを作成していた時と同様に、コンテナを2つ並べていきます。それぞれ、バックグラウンドの色を指定します。表示に関しては中央に表示する様に設定をしてください。これで大枠の完成とします。ナビゲーションを配置する今回はナビゲーションコンポーネントを利用してフッターエリアを作成したいと思います。ナビゲーションを配置すると以下の様になります。スタイルを追加します。このナビゲーションはモバイルデバイスの際には表示しない形とします。このため1つ上のコンテナのところで、ヘッダーの時と同様の設定を行います。ナビゲーションの表示項目を制御する今回はグローバルメニューおよびフッターの項目に表示される項目は同じものが出てきています。これを制御するために、ナビゲーションフィルターを設定していきます。この項目は、コンテンツエディターで選択することが可能です。表示しないでメインナビゲーションには反映させたいとします。この場合は、チェックをすればフィルターを設定している場合に表示しない、という形となるため、以下の様なアイテムの設定となります。関してもチェックをしておきます。このフィルタをフッターに配置しているナビゲーションコンポーネントに適用します。このナビゲーションフィルタを使うことで、表示をするメニューの項目を制御することが可能となります。まとめ今回はヘッダーの際には丁寧に説明をしましたが、一気にフッターを作成しました。この際にはナビゲーションフィルタを利用して、トップのメニューには表示するが、フッターには表示しない、という形の実装ができました。ナビゲーションフィルタを上手に使うことで、サイトの構造を利用したナビゲーションで表示・非表示を制御できるのは非常に便利です。