【SWELLマニュアル】3. ヘッダー

基本カラーの設定でも話しましたが、初心者に気をつけてほしいことは「色を感覚で決めないこと」です。「サイトのデザインがイケてない……」という場合のほとんどは配色がイケてない状態が多いです。

今回はこのような画像を作成してみました。

作成した画像を設定します。

白抜きのロゴ画像の場合はヘッダー背景と文字色を調整しましょう。

作ったロゴ画像に合わせてサイズの調整が可能です。

追従ヘッダーとはスクロールしたときにページ上部に固定されるヘッダーのことです。「通常は大きく表示させておきたいけど、スクロール時に大きいと邪魔だから小さくしたい」といった場合などに有効です。

そもそも追従させるかどうかはヘッダーの追従設定で設定できます。

スマホでのロゴ画像のサイズを設定できます。

スマホ用固定フッターメニューの設定をしている場合はページの専有率に注意しましょう。「肝心のコンテンツが読みにくい」では元も子もないです。

ヘッダー境界線とはヘッダーとその下のコンテンツとの境界線部分です。

ヘッダー背景色が色つきの場合はわかりにくいので、ヘッダー背景色が白の人向けの設定項目です。

• なし
• 線
• 影

「背景を透過する」にした場合のみの設定です。背景を透明にしてヘッダーの追従設定を「追従する」にしたときに、スクロール時のロゴの色が合わない場合があります。

スクロール時の追従メニューは背景が白です。ですのでロゴ画像は色つきである必要があるのですが、これだとあまりイケてないですよね。

こんなときに「通常は白文字のロゴ画像」だけど、「スクロール時（白背景）では色つきのロゴ画像」を設定することで見栄えが良くなります。

追従させる場合は背景の不透明度も設定できます。

ヘッダーバーとはページ上部に表示される部分のことです。キャッチコピーやSNSへのリンクボタンなどを表示できます。

黒だとキツすぎるので、背景を薄いグレー、文字を濃いグレーに設定してみました。

あまり多くの色を使いすぎないようにしましょう。

SNSのアイコンが不要の場合はチェックを外すことで非表示にさせられます。

SNSアイコンを非表示の状態で、さらにキャッチフレーズの設定を「表示しない」にして、「コンテンツが空でもボーダーとして表示する」にすると線のみを表示させられます。

サイトのアクセントとしてデザインの幅が広がります。

サイト基本情報の設定で設定したキャッチフレーズを表示させられます。

• ヘッダーバー
• ロゴの近く

キャッチフレーズの長さや、グローバルメニューの数に注意しましょう。

さらにサイト基本情報の設定で設定したサイトタイトルも表示させるかどうかも設定できます。

レイアウト・デザイン設定で縦並び（ナビを下または上）にしている場合は、メニューの背景色を変更することができます。

サブメニューの色は白かメインカラーを選択できます。

この設定をするには「スマホ用ヘッダーメニュー」を設定している必要があります。グローバルナビをPCと同様に表示させたい場合は「スマホ用ヘッダー」にもチェックを入れましょう。

スマホ用ヘッダーを個別で設定したい場合は新規で専用のメニューを作成して「スマホ用ヘッダー」にチェックを入れてください。

「ヘッダーメニューをループさせる」にチェックを入れるとサブメニューも含めてループで表示させられます。

カスタムボタンはデフォルトでは「サイト内検索」になっています。ここは自由に変更することが可能です。