【SWELL】ヘッダーのデザイン・レイアウト設定方法

今回はヘッダーの設定について画像付きで詳しく説明しています。

ヘッダーのデザインをカスタマイズしたい方は、順番に設定してみてください。

ヘッダーロゴ画像の設定

「外観」>「カスタマイズ」>「ヘッダー」に進みます。

ロゴとヘッダーナビを設定します。

「ロゴ画像の設定」で自分のサイトのロゴ画像をアップロードします。

※ロゴ画像は透過の画像を使いましょう。

ヘッダーのレイアウト・デザイン設定

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

ヘッダーの背景を透明にする設定

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

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

透明にした場合、ロゴが見にくくなった場合に備えて、透過時のロゴも変更できます。

ヘッダーの追従設定

ヘッダーの追従設定では、画面をスクロールしてもヘッダーが現れるように設定できます。

追従させる場合はチェックを入れてください。

PC版では、ヘッダーの透過性も変えられます。数値が小さくなるほど透明になります。

ヘッダーバーの設定

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

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

写真のように右側にSNSのアイコンを表示させたい場合は、「SNSアイコンリストを表示する」にチェックを入れます。

「カスタマイズ」 > 「SNS情報」内のSNSリンク設定でURLが入力されている項目のアイコンが自動で表示されます。

キャッチフレーズを表示させる場合は、キャッチフレーズの表示位置を設定します。

キャッチフレーズは、WordPressの「設定」>「一般設定」>「キャッチフレーズ」で設定できます。

SNSもキャッチフレーズも表示しないが、ヘッダーバーを線として表示させたい場合は、「コンテンツが空でもボーダーとして表示する」にチェックを入れます。

ヘッダーメニュー（グローバルナビ）設定

ヘッダーメニューのエフェクトや色を変更できます。

マウスホバーエフェクトとは、マウスをメニューの上に乗せた時に表示されるエフェクトのことです。

選んだメニューの下にラインが入っているのが分かるでしょうか。

これは「ラインの出現（中央から）」を選択しています。

この時のラインの色は、「ホバー時に出てくるラインの色」で設定できます。

「サブメニューの背景色」は、メニューを選択して下に開くサブメニューの背景のことです。

「検索ボタン」の設定

サイト内検索をするための「検索ボタン」を設置することができます。

検索ボタンは、ユーザーの使いやすさを考えると、ページ上部にあるのがベストです。

ヘッダー、もしくはサイドバーに必ず設置するようにしましょう。

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

スマホヘッダーの設定

メニューボタンの設定

スマホで表示されるボタンに関する設定です。

アイコンの下に、表示するテキストを設定します。

メニューボタン背景色はデフォルトでは透明になっています。

カスタムボタンの設定

スマホヘッダーには、メニューボタンだけでなく検索ボタンなど好きなアイコン・リンク先を一つ設置できます。

デフォルトでは、検索メニューがセットされています。

アイコンのクラス名に関しては、こちらを参照してください。

例えば、以下のような設定にするとこうなります。

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

その他、SWELLの初期設定は以下にまとめてありますので、あわせてどうぞ。