イトのヘッダーは、ロゴやメニュー、問い合わせボタンなど、訪問者が最初に目にする要素が集まる場所です。しかし多くのWordPressテーマでは、ヘッダー内の要素配置は固定されていて、少し変えたいだけでもカスタムCSSや子テーマの編集が必要になりがちです。Utopiaには、この悩みを解消する「ヘッダービルダー」機能が搭載されています。
ヘッダービルダーとは
Utopiaの管理画面「ヘッダー設定」で「ヘッダービルダーを有効化」をオンにすると、メインヘッダー行が左・中央・右の3エリアに分割され、それぞれに配置するモジュールを自由に選べるようになります。有効にすると、この行×列レイアウトが、従来の「メニュー位置」設定よりも優先して適用される仕組みです。
配置できる6種類のモジュール
左・中央・右の各エリアには、次の中から必要なものを選んで割り当てられます。
空（何も表示しない）、ロゴ／サイトタイトル、メインメニュー、CTAボタン、検索、SNSアイコンの6種類です。
たとえば「ロゴを左、メインメニューを中央、CTAボタンと検索を右」といった、コーポレートサイトでよく見かけるレイアウトも、コードを書かずに管理画面の操作だけで再現できます。逆に「ロゴを中央に置いて左右にメニューを分割する」ような、個性を出したいブランドサイト向けのレイアウトも組み立てられます。
CTAボタンとの組み合わせ
ヘッダービルダーで配置する「CTAボタン」モジュールは、同じヘッダー設定画面のCTA項目と連動しています。日本語・英語それぞれでCTAテキストとURLを個別に設定できるため、多言語サイトでも、ボタンの文言を訳し分けたうえでヘッダーに配置できます。ボタンの背景色・文字色も指定可能で、空欄のままにすればサイト全体のメインカラーが自動的に使われる仕様です。
検索・SNSアイコンもモジュールとして配置
「検索」モジュールを配置すると、クリックで開く検索オーバーレイのアイコンをヘッダー内の任意の位置に表示できます。「SNSアイコン」モジュールも同様に、左・中央・右のどこにでも組み込める設計です。これにより、問い合わせ導線とSNS導線を同じ視界の中に収める、といった構成もつくれます。
サイトタイプを問わず使える
この行×列レイアウトは、Corporate ProやPortalなど特定のサイトタイプ専用の機能ではなく、どのサイトタイプでも利用できる設定です。既存のデザインやコンテンツ設定を変更せずに、ヘッダーの見た目だけを調整したい場合にも向いています。
スティッキーヘッダーなど他の設定との組み合わせ
同じ「ヘッダー設定」画面には、スクロール時もヘッダーを上部に固定する「スティッキーヘッダー」や、下スクロールで自動的に隠れ上スクロールで再表示される「スマートスティッキー」、ヘッダー上部に細い告知欄を出す「アナウンスバー」も用意されています。ヘッダービルダーで組んだレイアウトに対して、これらをオン・オフするだけで重ねて使えるため、「ロゴ中央・メニュー両端・CTAを右」に組んだ上でスクロール中も常に表示させる、といった調整も設定項目を切り替えるだけで完結します。
まずはヘッダービルダーを有効にしてみる
配置を変えても公開前に管理画面上で確認しながら調整できるため、既存サイトのヘッダーを壊す心配なく試せます。「ヘッダー設定」画面を開き、「ヘッダービルダーを有効化」をオンにして、左・中央・右にモジュールを割り当てるところから始めてみてください。まずは今のヘッダーで一番目立たせたい要素はどれか、CTAボタンなのか検索なのかを決めるところから着手すると、配置に迷わず進められます。
