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

記事上のウィジェットエリア

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

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

カスタマイザーの起動

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

ヘッダー設定

ヘッダーカラーの設定

「外観」>「カスタマイズ」>「ヘッダー」メニューの中に、「■ カラー設定」という設定エリアがあります。

ヘッダーのカラー設定項目
ヘッダーのカラー設定

ここでヘッダーの背景色文字色を自由に設定することが可能です。

ヘッダーロゴ画像の設定

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

ヘッダーロゴ画像の設定
ヘッダーロゴ画像の設定

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

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

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

「外観」>「カスタマイズ」>「ヘッダー」の中にある「■ レイアウト・デザイン設定」エリアの、設定項目について解説していきます。

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

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

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

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

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

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

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

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

ヘッダーナビを下に

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

ヘッダーナビを上に

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

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

続いて、SP表示(スマホ & タブレットの縦向き)でのヘッダーレイアウトの設定について確認していきます。

SWELLでは、スマホ表示でのロゴ画像とメニューボタンの並び方について、3種類から選択できます。

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

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

ロゴ:左 / メニュー:右

SPヘッダー01

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

SPヘッダー02

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

SPヘッダー03

トップページでの特別設定

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

トップページでの特別設定
トップページでの特別設定

ヘッダーの背景を透明にするかどうか」を「する」に設定すると透過時のロゴ画像の設定項目が出てきます。

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

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

ヘッダーの追従設定

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

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

また、PC表示だけですが「追従ヘッダーの背景の不透明度」も設定することができます。
※ 不透明度とは、CSSでいうところの opacity で指定する数値です。

「ヘッダーバー」の設定

ロゴ画像やヘッダーメニューの上部に表示されるヘッダーバーの設定について解説していきます。

ヘッダーバー」とは、下の画像のオレンジ枠で囲まれた部分のことを指します。

ヘッダーバー

「外観」>「カスタマイズ」>「ヘッダー」メニューの中に、「■ ヘッダーバー設定」という設定エリアがあり、そこでカラー設定や表示の設定を行うことができます。

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

このヘッダーバーが表示される条件は、「SNSアイコンリストを表示する」にチェックが入っている、もしくは後述するキャッチフレーズがヘッダーバー内に表示するようになっていることです。

ただし、どちらの設定もオフになっていても、「コンテンツが空でもボーダーとして表示する」をオンにしている場合、PC表示時のみですが、ヘッダーバーと同じ色の細いボーダーが表示されるようになります。

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

SNSアイコンリストを表示する」がオンになっている場合、「カスタマイズ」 > 「SNS情報」内の設定でURLが入力されている項目のアイコンが自動で表示される仕組みとなっています。

SNSリンク先設定
「カスタマイズ」 >「SNS情報」

「キャッチフレーズ」設定

キャッチフレーズの設定
キャッチフレーズの設定

キャッチフレーズとは、WordPressの「設定」>「一般設定」>「キャッチフレーズ」で設定できる文言のことです。

SWELLではこのキャッチフレーズを「ヘッダーバーに表示」するか「ロゴの近くに表示する」かを選択することができます。(表示させないこともできます。)

「ロゴの近くに表示」を選択すると、ヘッダーレイアウトが横並びの時はロゴの右側に、ヘッダーレイアウトが縦並びの時はロゴの下側にキャッチフレーズが表示されます。

また、キャッチフレーズとともにサイトのタイトルを表示するかどうかをチェックボックスで設定できます。

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

次は、ヘッダーメニュー(いわゆるグローバルナビ)に関する設定を行いましょう。

SWELLのヘッダーメニューは2種類あり、PC用・スマホ用に分かれていますので、それぞれ説明していきます。

メニューの項目自体の設定方法は、以下の記事をご覧ください。

ホバーエフェクトの設定

ヘッダーメニューの各メニュー項目にマススホバーした時のエフェクトを5種類から選ぶことができます。

ヘッダーメニューエフェクトの設定
ホバーエフェクトの設定

さらに、出現してくるライン・ブロックの色をメインカラーと同じにするか、ヘッダーのテキストカラーと同じにするかを選ぶこともできるようになっています。

ヘッダーメニューの背景色設定

さらに、「ヘッダーのレイアウト(PC)」の設定が縦並び表示の時、上記のホバーエフェクト設定のすぐ下に以下のような設定項目が出現します。

ヘッダーメニューの背景色設定
ヘッダーメニューの背景色設定

ここの設定により、ヘッダーメニューの背景に色をつけることができるようになります。

スマホ用ヘッダーメニューの設定

スマホ用ヘッダーメニューは、「外観」>「メニュー」で「スマホ用ヘッダー」に指定したメニューが存在する場合に自動で表示されるようになります。

カスタマイザーから設定できるのは、「メニューをループ表示させるかどうか」という設定だけになります。

スマホ用ヘッダーメニューの設定
スマホ用ヘッダーメニューの設定

「検索ボタン」の設定

ヘッダーには、クリックすることでサイト内検索をするための入力フォームが出現する「検索ボタン」を設置することができます。

そのボタンの表示位置を、PC/SPでそれぞれ設定できます。

検索ボタンの設定
検索ボタンの設定

スマホヘッダーに表示するボタンの設定

スマホのヘッダーには「メニューボタン」と「カスタムボタン」の2つを設置することができ、アイコンや背景色、ラベルテキストなどを設定することができます。

スマホヘッダー の様子
スマホヘッダー の様子

デフォルト状態では、「カスタムボタン」には上記で設定できる「検索ボタン」がセットされています。

メニューボタンの設定

」マークのボタンのことです。
このボタンの背景色と、アイコンの下に表示するラベルテキストを設定することができます。

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

カスタムボタンの設定

メニューボタンの他、デフォルトで検索ボタンとなっている部分は好きなアイコン・好きなリンク先のボタンにカスタマイズすることが可能です。

カスタムメニューの設定
カスタムメニューの設定

これらの設定を活用することで、以下のように検索ボタンとは別のボタンを設置できます。

スマホヘッダーの新機能
スマホヘッダーの新機能

「お知らせバー」の設定

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

2.0 からは「カスタマイズ」>「サイト全体設定」の中に設定項目が移動されました。

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

記事下のウィジェットエリア

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

よかったらシェアしてね!
目次
閉じる