コンテナを被せる

一番上のコンテナに対して、改めてコンテナを被せていきます。この理由は次回紹介する記事で説明をします。まずはコンテナを配置して、下記のように階層化されている状況にしてください。なお、バックグラウンドの色と横幅の設定は 1 つ上のコンテナと同様に設定をします。

このコンテナの上に、今度は Column Splitter のコンポーネントを配置します。

Column Splitter のコンポーネントの設定ですが、以下の様にしてください。

• Row Column を 1 つ追加します
• Component Layout に関しては Basic タグで Compact Phones の項目を 12 と設定
• Column 1 layout の Basic に、Compact Phones 6、Laptops 2、Large Desktops 1 とします
• Column 2 layout の Basic に、Compact Phones 6、Laptops 5、Large Desktops 5 とします
• Column 3 layout の Basic に、Compact Phones は空欄、Laptops 5、Large Desktops 6 とします

これで一番左にロゴのエリアを、中央にテキストエリア、右側にボタンエリアを作りました。

各種コンポーネントの配置

スプリッターで分割したあと、左から順にロゴ、テキスト、ボタンを設定していきます。まず最初に、一番左のエリアに Image コンポーネントを配置して、ロゴを表示します。

続いて中央のコンテナ部分にはリッチテキストのコンポーネントを配置して以下の HTML を設定します。

<h1 style="color:white; padding-top:25px;">Sitecore XM Cloud</h1>

もう一度 Rich Text コンポーネントを今度は右側のエリアに配置します。コンテンツは以下のコードを設定します。また配置する場所を右側に寄せます。

<a style="background-color: #676767;padding: 10px 35px;color: white;text-align: center;width: fit-content; float:right;"
  href="/alert">Newsletter</a>

これでヘッダーエリアの作成ができました。

コンテンツを追加する

続いてメニューを作成したいので、ひとまずコンテンツツリーの構成を作成します。今回は以下の様に作成をします。

• Products
• Content Cloud
• Engagement Cloud
• Commerce Cloud
• Showcase
• Services

既存のアイテムとしては About が一番下に来る様にします。作成および完了を次の画像で展開しています。

ナビゲーションコンポーネントの配置

ナビゲーションコンポーネントを配置する前に、上記の手順と同様にコンテナを被せて配置してください。

あとはここにナビゲーションをドラッグアンドドロップで配置します。

メニューが展開されている状況のため、設定を変更します。メニューを選択して左から 2 つ目のアイコンをクリックします。ここで、今回は Main Navigation - Drop down vertical がチェックされているのを確認してください。

設定を完了させると、これでメニューが表示されました。

ページデザインの変更

現在のサイトはサンプルデータが入っており、Default というページデザインがあります。このページデザインのヘッダーを今回作成したヘッダーに切り替えます。 まず、 /sitecore/content/sitecoredemo-jp/sitecoredemo-jp/Presentation/Page Designs/Default のアイテムを選択します。ページデザインとして、どのパーシャルデザインを利用するのかが記載されています。これを Header を削除して Demo Header に入れ替えます。

これでサンプルページを表示してください。上記のようにヘッダーが切り替わっていることがわかります。

まとめ

今回はブランドに関する部分を記載することができるようにヘッダーの部分を少し変更をしました。またコンテンツツリーをメニューで再現させるために、新しいコンテンツを入れていきました。次回はまだ手をつけていない 3 つ目のコンテナを活用してヘッダーを完成させます。

関連タグ

• Headless SXA
• XM Cloud