
SWELLのヘッダーのデザインをカスタマイズしたいんだけど教えて。
今回はヘッダーの設定について画像付きで詳しく説明しています。
- ヘッダーのでデザイン設定
- ヘッダーメニューの設定
- スマホヘッダーの設定
ヘッダーのデザインをカスタマイズしたい方は、順番に設定してみてください。
SWELLでは「テーマカスタマイザー」と呼ばれる、設定の変更をプレビュー画面で確認しながらカスタマイズ出来る機能があります。
画面左側の設定を変更すると、変更内容が右側にプレビューとして表示されます。

この機能を使って、変更を確認しながら基本設定を進めましょう。
「テーマカスタマイザー」を利用してスマホ画面をレビューを見ながらチェックしたい場合は、画面左下のコントロールを非表示の横のマークで切り替えられます。

ヘッダーロゴ画像の設定
「外観」>「カスタマイズ」>「ヘッダー」に進みます。
ロゴとヘッダーナビを設定します。

「ロゴ画像の設定」で自分のサイトのロゴ画像をアップロードします。
※ロゴ画像は透過の画像を使いましょう。

ヘッダーのレイアウト・デザイン設定
「レイアウト・デザイン設定」で、ロゴとメニューの位置を決めます。

ヘッダーの背景を透明にする設定
「トップページでの特別設定」で、SWELL公式サイトのように、ヘッダーの背景を透明にしてメインビジュアルの上にヘッダーを被せることができます。

ヘッダーの背景を透明にする場合は、文字を白か黒か決められます。

透明にした場合、ロゴが見にくくなった場合に備えて、透過時のロゴも変更できます。
ヘッダーの追従設定
ヘッダーの追従設定では、画面をスクロールしてもヘッダーが現れるように設定できます。

追従させる場合はチェックを入れてください。
PC版では、ヘッダーの透過性も変えられます。数値が小さくなるほど透明になります。

ヘッダーバーの設定
ヘッダーバーとは以下の赤で囲んである部分のことです。

ヘッダーバーの背景や文字のカラーが変更できます。

写真のように右側にSNSのアイコンを表示させたい場合は、「SNSアイコンリストを表示する」にチェックを入れます。
キャッチフレーズを表示させる場合は、キャッチフレーズの表示位置を設定します。
SNSもキャッチフレーズも表示しないが、ヘッダーバーを線として表示させたい場合は、「コンテンツが空でもボーダーとして表示する」にチェックを入れます。
ヘッダーメニュー(グローバルナビ)設定
ヘッダーメニューのエフェクトや色を変更できます。

マウスホバーエフェクトとは、マウスをメニューの上に乗せた時に表示されるエフェクトのことです。
選んだメニューの下にラインが入っているのが分かるでしょうか。
これは「ラインの出現(中央から)」を選択しています。

この時のラインの色は、「ホバー時に出てくるラインの色」で設定できます。
「サブメニューの背景色」は、メニューを選択して下に開くサブメニューの背景のことです。
「検索ボタン」の設定
サイト内検索をするための「検索ボタン」を設置することができます。
検索ボタンは、ユーザーの使いやすさを考えると、ページ上部にあるのがベストです。
ヘッダー、もしくはサイドバーに必ず設置するようにしましょう。

おススメの設定は、ヘッダーメニューを追従型にして、検索ボタンを「ヘッダーメニューに表示」に設定することです。
スマホヘッダーの設定
メニューボタンの設定
スマホで表示されるボタンに関する設定です。

アイコンの下に、表示するテキストを設定します。
メニューボタン背景色はデフォルトでは透明になっています。
カスタムボタンの設定
スマホヘッダーには、メニューボタンだけでなく検索ボタンなど好きなアイコン・リンク先を一つ設置できます。
デフォルトでは、検索メニューがセットされています。

アイコンのクラス名に関しては、こちらを参照してください。
例えば、以下のような設定にするとこうなります。


以上でヘッダーのデザイン・レイアウトの設定は終わりです。