ヘッダーのデザインを変えよう

ここでは、ヘッダーの背景の設定や見た目の変更についてご紹介します。

設定を開くには、ヘッダーの右上にある歯車のアイコンをクリックします。

ヘッダーの種類

出てきた画面でヘッダーの種類を変更できます。グローバルナビのみ、グローバルナビ＆タグライン、グローバルナビ＆コンテンツの中からお好きなものをお選びください。ヘッダーはプロジェクトの各ページで直接設定が可能です。

耳より情報：ヘッダーの種類はブログ投稿のページでは変更できません。ページの構成が異なるためです。

グローバルナビのみ

この設定では、ロゴとメニューバーのみが表示され、その下にサイトの中身が続きます。グローバルナビの背景や詳細の設定も可能です。グローバルナビの設定はサイト内のすべてのページの上部（バー）設定に影響します。

グローバルナビのみを選択後、出てきた画面でグローバルナビ背景をクリックして背景を変更できます。

おすすめの背景用画像が出てきますので、そこから選択する、＋（プラス）ボタンをクリックしてほかにある画像をコレクションから選ぶ、ご自分で画像をアップロードするのどの方法でも背景を自分の好きなものに変更できます。

プラスボタンをクリックするとこんな画面が出てきます。ここで無地やデザイン壁紙を選んだり、右上のボタンよりアップロードができます。

モノクロ以外の背景を設定した場合、カラーオーバーレイやアニメーションなどの背景エフェクトの設定ができます。

グローバルナビバー詳細設定

ヘッダー変更メニュー

メニューの種類

ここではメニューアイテムの位置や見た目などの設定が可能です。クラシック、中央揃え、ヘッダー下、箱入りハンバーガーやハンバーガーなどの種類があり、それぞれ違ったデザインとなります。いろいろ試してみるのもおすすめです。

メニュースタイル

メニュースタイルではメニュー上のページ名の見え方を選択できます。例えば、メニューにあるお問い合わせなどの文字を、下線を引いたりスラッシュで区切ったり、スペースを大きくしたりなど、マウスなどで選択したときの見た目を変えたりできます。この設定はポップアップやタイルとポップアップのメニュースタイルでは使えません。

コンテンツ幅

この設定で、ロゴとメニューが入っているナビゲーションバーのメニューの距離を調整できます。

サイト内検索

ここで検索フィールドを設定できます。詳細については、サイト内検索を設置しようまたは「製品検索フィールドを追加する方法 (e-ショップ用)」を参照してください。検索フィールドは、Profi または Business パッケージでのみ利用できる機能です。

固定メニュー

固定メニューが有効になっている場合、マウスでページの下の方にスクロールしても。メニューがあるナビゲーションバーは右上の位置に残ります。

ライン

有効になっている場合、メニューがあるナビゲーションバーとぺージの間に線が出てきて区別します。

その他のパネル設定
このセクションでは、ヘッダーに追加のパネルを設定できます。詳細については、言語切替スイッチをヘッダーに入れよう、SNSボタンをヘッダーに入れよう、問合せ先情報をヘッダーに入れよう、通貨切替スイッチをヘッダーに入れようで確認ください。

グローバルナビ＆タグライン

このタイプのヘッダーデザインは、多くのテンプレートのメインのページによく使われています。見出し、サブ見出し、見出し上のタイトルの3項目まで加えることができ、ボタンも必要に応じて付けられます。背景はグローバルナビやセクションで変更できます。