前回は左上にロゴが表示されるだけのヘッダーを作成しました。今回は、ナビゲーションコンポーネントを利用してフッターを作成していきたいと思います。
![](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F6FVqpprqHrMYaqpShg7X5P%2F93aa86e0cb3b38cd8a50b77bde24f7fb%2Fhal-gatewood-tZc3vjPCk-Q-unsplash.jpg&w=3840&q=75)
フッターを作成する
今回は簡単なフッターを作成していきます。まず最初にコンテナを Footer に配置します。実はコンテナではバックグランドカラーを選択することができます。
![partialdesign07.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F2uBH4SVF7pnCMeg0KEeUyY%2F31bf22f8ae7941bd7ec761e1b3e68fa4%2Fpartialdesign07.png&w=3840&q=75)
この定義は「スタイル」で次のように定義されている。
![partialdesign08.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F1W0x1rX33QBVEr1QNIB5m7%2F1485415cd5ae9e7b197aef39ea22476c%2Fpartialdesign08.png&w=3840&q=75)
src\assets\components\Container\background-color.css のファイルを作成して、以下のコードを設定します。
.container-gray-background {
@apply bg-gray-200;
}
.container-clean-background {
@apply bg-white;
}
.container-dark-background {
@apply bg-gray-800;
}
.container-color-background {
@apply bg-blue-300;
}
globals.css に対して上記のファイルを追加すると、スタイルシートの選択が有効になります。コンテナに関して、このスタイルシートを適用します。
![partialdesign09.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F16huEBf8gfflLCndTIgG6A%2F397001ff6b586567bbe4f6793ec232bb%2Fpartialdesign09.png&w=3840&q=75)
実際に表示されるともっとグレーに見えますが、今はデザイン中ということもあり薄くなっています。今回はここに、Row Splitter を設定します。
![partialdesign10.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F3BfvbIigdgPdtt7u6JxWfV%2Fd53931eed71563521ad4e8afb1559d87%2Fpartialdesign10.png&w=3840&q=75)
下には RichText のコンポーネントを配置して、中央に寄せておきます。文字の装飾は今は何もしていないため、見にくいですがこんな感じです。
![partialdesign11.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F5Tn4DHobIUeQwzRpXYkJuQ%2F5d1b1c2abbb2a97af7ed32c12b47873f%2Fpartialdesign11.png&w=3840&q=75)
Row Splitter の上の部分には Navigation コンポーネントを配置します。今回はトップレベルおよび2階層目までのアイテムを利用してメニューを表示したいと思います。配置した時はこんな感じになっています。
![partialdesign12.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F15EsR8QqTTClmocNTAfWmt%2Feaae3448271136133a5c59568b765a43%2Fpartialdesign12.png&w=3840&q=75)
このヘッダーに関して、Home のページテンプレートに対して適用してください。これで完成ですが、まだもう少し作業をします。
![partialdesign07.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F5LhIfw5eSEE7hNpJ92F3JY%2Ff928be45bf1a42e96cdc1ac9ebc7f704%2Fpartialdesign07.png&w=3840&q=75)
スタイルを調整する
今のままでは背景色に文字が消えているので、ここで調整をしないといけないのは2点です。
- 文字の色を補正する
- ナビゲーションに関しては見やすく補正
- マージンなども設定
まず最初に、src\assets\components\Common\footer.css のファイルを作成します。これに対して、文字の色を以下のように指定します。
footer{
@apply text-white;
}
globals.css にこのファイルの import を追加するのを忘れないでください。これでフッターの中の文字を白色にすることができました。
![partialdesign14.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F2dArQFtNEGx5NGWAxJrNfC%2F8ec9e07be6e3aaed22f389a3b8afe281%2Fpartialdesign14.png&w=3840&q=75)
続いてナビゲーションを調整します。Navigation に関してのスタイルは、標準で以下の項目が用意されていますが、Bootstrap のコードになっているためそのままでは動きません。
![partialdesign15.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F2yL2tVr2Qhh0lHJvB3dwo8%2F985a9d5c3896ec38d5d2936b6e0b4817%2Fpartialdesign15.png&w=3840&q=75)
今回は、src\assets\components\Navigation\index.css のファイルを作成して、以下のようにスタイルを適用することにします。
.navigation.navigation-fat {
@apply flex;
.menu-mobile-navigate {
@apply hidden;
}
nav > ul {
@apply p-0 flex;
}
.rel-level1 {
@apply inline-block mr-8;
}
.rel-level2 {
@apply list-disc ml-4 mr-4;
}
}
これを適用することで、フッターがそれっぽく表示されるようになりました。
![partialdesign16.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F4Qm9y5sl4SRmgArgkVdrAK%2F2badb3cb0490b8784f87291a5a01870a%2Fpartialdesign16.png&w=3840&q=75)
ヘッダーとフッターがついたページは以下のようになります。
![partialdesign17.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F2UublU4OoD1mooOdxYqaO1%2Fddb45c1e699b8cb650c0f8e17c3d8a12%2Fpartialdesign17.png&w=3840&q=75)
まとめ
前回と今回と2回に分けて、ヘッダーとフッターのパーシャルデザインを作成しました。このデザインを適用したページを定義して、トップページに割り当てた形となっています。次回は Shared Layout を利用して Partial Design および Page Design を作成していきます。