「ヘッダー周り・ロゴ画像」のデザイン・レイアウト設定

2019 8/26
「ヘッダー周り・ロゴ画像」のデザイン・レイアウト設定
記事上のウィジェットエリア

このページではヘッダー周りロゴ画像についてのデザインやレイアウトの設定方法を解説していきます。

目次前広告表示エリア
目次

カスタマイザーの起動

SWELLでは基本的にテーマカスタマイザーから全ての設定を行うことができます。

カスタマイザーの起動方法については以下の記事を参考にして下さい。

あわせて読みたい
【SWELLの設定】「テーマカスタマイザー」の使用方法
【SWELLの設定】「テーマカスタマイザー」の使用方法SWELLの設定やカスタマイズは、ほぼ全て「テーマカスタマイザー」機能で行うことができるように設計しました。「テーマカスタマイザー」機能はリアルタイムで設定が反映...

以下では、カスタマイザー上での操作について説明していきます。

ヘッダー周りの設定はカスタマイザー内の「ヘッダー設定」というメニューから設定できます。

ヘッダー設定

「外観」>「カスタマイズ」>「ヘッダー設定」の中に、以下のような項目があります。

ヘッダーロゴ画像の設定
カスタマイザー > ヘッダー設定

このエリアで、ヘッダーに表示されるロゴ画像に関する設定ができます。

ロゴ画像サイズの設定では、画像の高さの数値(単位:px)を調節できるようになっています。

ヘッダーのレイアウト設定(PC)

SWELLでは、PC表示での「ロゴ画像とヘッダーメニュー(グローバルナビ)の並び方」について、4種類から選択できます。(タブレットの横表示でもこちらのデザインが反映されます。)

ヘッダーのレイアウト(PC)の設定
カスタマイザー > ヘッダー設定

各選択によってどのような表示になるか、見ていきましょう。

ヘッダーナビをロゴの横に(右寄せ)

ヘッダー01
ロゴが左端、ヘッダーメニューが右端に寄ります。

ヘッダーナビをロゴの横に(左寄せ)

ヘッダー02
ロゴが左端、ヘッダーメニューも左に寄ります。

ヘッダーナビを下に

ヘッダー03
ロゴが上、ヘッダーメニューが下の縦並びに。

ヘッダーナビを上に

画像
ヘッダーメニュが上、ロゴが下の横並びに。

ヘッダーのレイアウト設定(スマホ)

続いて、スマホでのヘッダーレイアウトの設定について確認していきます。

SWELLでは、スマホ表示での「ロゴ画像とメニューボタンの並び方」について、3種類から選択できます。(タブレットの縦でもこちらの設定が反映されます。)

スマホのヘッダーレイアウト設定
カスタマイザー > ヘッダー設定

各選択によってどのような表示になるか、見ていきましょう。

ロゴ:左 / メニュー:右

SPヘッダー01

ロゴ:中央 / メニュー:右

SPヘッダー02

ロゴ:中央 / メニュー:左

SPヘッダー03

ヘッダーの背景色・文字色の設定

ヘッダーの背景色や文字色の設定は、カスタマイザーの「カラー設定」メニューから設定できます。

ヘッダーのカラー設定
カスタマイザー >「カラー設定」

「ヘッダーバー」の設定

ロゴ画像やヘッダーメニューの上部に表示されるヘッダーバーの設定について解説していきます。
※ SWELLにおいて、「ヘッダーバー」とは、以下の画像のオレンジ枠で囲まれた部分のことを指します。

ヘッダーバー

このヘッダーバーが表示される条件は「キャッチフレーズ」または「SNSアイコンリスト」の表示設定がオンになっている場合です。

SNSアイコン・キャッチフレーズの表示設定
カスタマイザー > 「ヘッダー設定」

「ヘッダーバー」の背景色・色の設定

ヘッダーと同じく。カスタマイザーの「カラー設定」からお好きな色を設定できます。

ヘッダーバーのカラー設定
カスタマイザー >「カラー設定」

キャッチフレーズの表示について

キャッチフレーズの表示位置は、ヘッダーバー ではなく ヘッダー内部 に表示することもできます。

その場合、ヘッダーレイアウトが横並びの時はロゴの右側に、ヘッダーレイアウトが縦並びの時はロゴの下側にキャッチフレーズが表示されます。

SNSアイコンリストについて

「SNSアイコンリストの表示設定」がオンになっている場合に、URLが入力されているSNSのアイコンが自動で表示される仕組みとなっています。

SNSリンク先設定
カスタマイザー >「SNS設定」> 「SNSリンク設定」

ヘッダーメニュー(グローバルナビ)のホバーエフェクトの設定

PCで表示されているヘッダーメニュー(グローバルナビ)の各メニュー項目にマススホバーした場合のエフェクトを4つの中から選ぶことができます。

ヘッダーメニューエフェクトの設定
カスタマイザー > 「ヘッダー設定」

トップページの特殊設定

SWELL ver. 1.2.4より、トップページでのみヘッダーに特殊設定を加えることができるようになりました。

トップページのヘッダー特殊設定
トップページのヘッダー特殊設定

これにより、メインビジュアルの上にヘッダーを被せるデザインが実現できるようになっています

メインビジュアルにヘッダーを被せた例
メインビジュアルにヘッダーを被せた例

ヘッダーの追従設定

スクロールした時に画面上部にヘッダーメニューを追従させるかどうかを設定できます。

ヘッダーの追従設定
ヘッダーの追従設定

「追従させるかどうか」の設定と、追従させる場合の「背景色の不透明度」を設定することができます。
※ 不透明度とは、CSSでいうところの opacity で指定する数値です。

「お知らせバー」の設定

SWELLでは、ヘッダーの上下に設置できる、重要なお知らせ情報をユーザーに知らせるための「お知らせバー」という機能を実装しています。

この機能に関する設定方法も以下の記事にてまとめていますので、是非ご覧ください。

あわせて読みたい
ヘッダーに表示できる「お知らせバー」の設定方法
ヘッダーに表示できる「お知らせバー」の設定方法SWELLでは、重要なお知らせ情報をユーザーに知らせるための「お知らせバー」という機能を実装しています。お知らせバーここでは、このお知らせバーの使い方ついて説明し...
記事下のウィジェットエリア

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

目次
目次