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

URLをコピーする
URLをコピーしました!
悩んでいる男性

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

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

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

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

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

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

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

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

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

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

SWELLをまだ導入していない方は以下の記事が参考になります。

目次

ヘッダーロゴ画像の設定

PCとスマホでのロゴの設定
PCとスマホでのロゴの設定

まずはヘッダーのロゴを設定します。

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

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

ロゴ画像の設定
  • 画像サイズ(PC):最上部で表示されるときのロゴサイズ
  • 画像サイズ(PC追従ヘッダー):PCでスクロールして出てくるときのロゴのサイズ
  • 画像サイズ(SP):スマホで最上部に表示されるときのロゴサイズ

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

少し下にスクロースすると、「レイアウト・デザイン設定」があるので、この設定でロゴとメニューの位置を決めます。

PCとスマホそれぞれで設定できます。

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

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

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

Shindy

当ブログも透過設定にしています

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

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

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

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

同じ画像でいい場合は、設定しなくでもOKです。

ヘッダーの追従設定

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

以下の画像のように、ページ途中でもヘッダーが表示されるようになります。

スクロールした時に追従してくるヘッダー
スクロールした時に追従してくるヘッダー

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

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

ヘッダーの追従設定

ヘッダーバーの設定

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

ヘッダーバー

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

ヘッダーバーの設定

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

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

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

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

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

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

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

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

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

以下のように複数の種類から選択できます。

マウスホバーエフェクトの種類
マウスホバーエフェクトの種類

ヘッダーメニューとサブメニューの背景色も変更可能です。

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

「検索ボタン」の設定

検索ボタン
検索ボタン

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

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

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

「検索ボタン」の設定

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

そうすることで、ユーザーは常に検索ボタンをクリックすることが可能です。

スマホヘッダーの設定

スマホでのヘッダーの設定です。

メニューボタンの設定

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

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

スマホのメニュー下に表示するテキスト
スマホのメニュー下に表示するテキスト

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

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

カスタムボタンの設定

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

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

カスタムボタンの設定

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

例えば、以下のようにTwitterアイコンをヘッダーに表示することもできます。

カスタムボタン設定
カスタムボタン設定
カスタムボタンでTwitterを表示
カスタムボタンでTwitterを表示

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

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