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

SWELLのヘッダー設定
悩んでいる男性

SWELLのヘッダーのデザインをカスタマイズしたいんだけど教えて。

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

この記事の内容
  • ヘッダーのでデザイン設定
  • ヘッダーメニューの設定
  • スマホヘッダーの設定

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

SWELLでは「テーマカスタマイザー」と呼ばれる、設定の変更をプレビュー画面で確認しながらカスタマイズ出来る機能があります。

画面左側の設定を変更すると、変更内容が右側にプレビューとして表示されます。

テーマカスタマイザー
テーマカスタマイザー

この機能を使って、変更を確認しながら基本設定を進めましょう。

「テーマカスタマイザー」を利用してスマホ画面をレビューを見ながらチェックしたい場合は、画面左下のコントロールを非表示の横のマークで切り替えられます。

テーマカスタマイザーのコントロール
目次

ヘッダーロゴ画像の設定

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

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

ロゴとヘッダーナビ

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

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

ロゴ画像の設定

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

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

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

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

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

インビジュアルの上にヘッダーを被せたSWELLのトップページ

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

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

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

ヘッダーの追従設定

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

ヘッダーの追従

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

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

ヘッダーの追従設定

ヘッダーバーの設定

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

ヘッダーバー

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

ヘッダーバーの設定

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

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

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

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

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

ヘッダーメニュー(グローバルナビ)設定

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

ヘッダーメニューのエフェクトや色を変更

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

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

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

マウスホバーエフェクト

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

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

「検索ボタン」の設定

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

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

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

「検索ボタン」の設定

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

スマホヘッダーの設定

メニューボタンの設定

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

「メニューボタン」の設定

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

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

カスタムボタンの設定

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

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

カスタムボタンの設定

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

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

カスタムボタン背景色の変更

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

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

SWELLのヘッダー設定

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる