コンポーネントに関しては、また後日カスタムで作る部分を紹介しますが、もう少しページっぽい感じで紹介をしていきたいので、今回はヘッダーを作成したいと思います。
![](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F6bDjs5w3TUR1FFWH96fNZS%2F9d05591fc34ff2cd744ac0498090c1e5%2Fmarkus-winkler-aYPtEknQmXE-unsplash.jpg&w=3840&q=75)
パーシャルデザインとは?
パーシャルデザインは、Web サイトで利用するページの構成となっており、ヘッダーやフッター、またページの要素を共通化している場合に利用できるコンポーネントを組み合わせたデザインとなります。今回は簡単ですが、ヘッダーとフッターを作成していきたいと思います。
パーシャルデザインを追加する
作成をする際には、Pages の Tempates の項目を開き、Partial designs を選択してください。
![pagespartialdesigns01.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F30bNGrWNSnwS4cyLGSFOJ2%2F4f38f167f5b6b65ae601ac8951885d28%2Fpagespartialdesigns01.png&w=3840&q=75)
まずはヘッダーという Patial Design を作成したいと思います。右上の Create ボタンをクリックして、Header を作成します。まずは空っぽの状態になります。
![pagespartialdesigns02.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F23i8CNfJQmlarTu1efsMgt%2F1fb998309029d135770bb01edaddbcbb%2Fpagespartialdesigns02.png&w=3840&q=75)
今回はヘッダーを作成していくため、ヘッダーエリアに Column Splitter を配置します。この際、 3:6:3 という形で3つのエリアを指定します。作業的には以下のような感じの動きとなります。基本的にモバイルのレイアウトがベースとして設定する形で今回は作っています。
左上のエリアに関しては、XM Cloud のロゴを配置しておきます。
![partialdesign01.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F3Zp5PUTEcJFCv1lZ7I5Pt8%2F9c0b78bc965cd8e89ddb2e025ea32b92%2Fpartialdesign01.png&w=3840&q=75)
ページデザインを追加する
実際の見た目の調整をするために、まずは Home のデザインを作成したいと思います。そして、ヘッダーのみを追加します。以下のような形で作成しました。
これでヘッダーが適用されたページの準備ができました。
ページデザインを適用する
ほぼ空っぽの状態のデザインとなっていますが、トップページに適用してみます。対象となるアイテムを Explorer で開いて Designing の項目で Home を選択する、もしくはコンテンツエディターで選択をしてください。
![partialdesign02.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F4Qjnb90IQnfE0BsyTlwenG%2F0063de6480fed85c07b651c2cef9ba2c%2Fpartialdesign02.png&w=3840&q=75)
この形で、Pages で Home アイテムを選択すると、ヘッダーが適用されています。
![partialdesign03.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F1V62pSqUKFnv30yCystcLi%2Fdddef2d01893ccd542e12715a8a4243d%2Fpartialdesign03.png&w=3840&q=75)
スタイルを作成する
左上においているロゴに関しては、特に何もスタイルを指定していないため、左上に表示されている状態です。そこで、ロゴのためのスタイルを作成します。まずスタイルを以下のパスの下に作成します。
- /sitecore/content/Tailwind/Tailwind/Presentation/Styles/Image
今回は Logo とのスタイルを作成します。このスタイルを利用できるのは、Image コンポーネントのみとします。
![partialdesign04.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F1AsBx5xP8rrlz11bbkxNXh%2F98a58f8081409a1ac809faa5d69f9aba%2Fpartialdesign04.png&w=3840&q=75)
画像に関するスタイルシートの定義として、src\assets\components\Images\index.css のファイルを以下のコードを利用して作成します。
.image-default-size {
img {
@apply w-full h-auto;
}
}
.logo {
img {
@apply w-40 lg:w-48 h-auto mt-4 ml-4;
}
}
これでデザインの適用ができるようになりました。Pages で Logo のスタイルが表示されているので、クリックすると少しマージンが設定されます。
![partialdesign05.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F6xDnK2UyYO7wFrNrBxzk0T%2F8033f2f9164a2921cabe04b48b6209ab%2Fpartialdesign05.png&w=3840&q=75)
これにて、Pages で Home アイコンをクリックすると、以下のようにロゴが表示されるようになりました。
![partialdesign06.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F20JzPCTZlpK0deDXKAIDzQ%2F509518f8665785d2b15cde1b207a521a%2Fpartialdesign06.png&w=3840&q=75)
まとめ
今回はヘッダーに対してロゴを表示するところまで作成をしました。次回は、フッターを作成していきます。