悩んでいる男性SWELLのヘッダーのデザインをカスタマイズしたいんだけど教えて。
今回はヘッダーの設定について画像付きで詳しく説明しています。
- ヘッダーのでデザイン設定
- ヘッダーメニューの設定
- スマホヘッダーの設定
ヘッダーのデザインをカスタマイズしたい方は、順番に設定してみてください。
SWELLでは「テーマカスタマイザー」と呼ばれる、設定の変更をプレビュー画面で確認しながらカスタマイズ出来る機能があります。
画面左側の設定を変更すると、変更内容が右側にプレビューとして表示されます。
この機能を使って、変更を確認しながら基本設定を進めましょう。
「テーマカスタマイザー」を利用してスマホ画面をレビューを見ながらチェックしたい場合は、画面左下のコントロールを非表示の横のマークで切り替えられます。
SWELLをまだ導入していない方は以下の記事が参考になります。
ヘッダーロゴ画像の設定
まずはヘッダーのロゴを設定します。
「外観」>「カスタマイズ」>「ヘッダー」に進みます。
「ロゴ画像の設定」で自分のサイトのロゴ画像をアップロードします。
※ロゴ画像は透過の画像を使いましょう。
- 画像サイズ（PC）：最上部で表示されるときのロゴサイズ
- 画像サイズ（PC追従ヘッダー）：PCでスクロールして出てくるときのロゴのサイズ
- 画像サイズ（SP）：スマホで最上部に表示されるときのロゴサイズ
ヘッダーのレイアウト・デザイン設定
少し下にスクロースすると、「レイアウト・デザイン設定」があるので、この設定でロゴとメニューの位置を決めます。
PCとスマホそれぞれで設定できます。
ヘッダーの背景を透明にする設定
「トップページでの特別設定」で、SWELL公式サイトのように、ヘッダーの背景を透明にしてメインビジュアルの上にヘッダーを被せることができます。
Shindy当ブログも透過設定にしています
ヘッダーの背景を透明にする場合は、文字を白か黒か決められます。
透明にした場合、ロゴが見にくくなった場合に備えて、透過時のロゴも変更できます。
同じ画像でいい場合は、設定しなくでもOKです。
ヘッダーの追従設定
ヘッダーの追従設定では、画面をスクロールしてもヘッダーが現れるように設定できます。
以下の画像のように、ページ途中でもヘッダーが表示されるようになります。
追従させる場合はチェックを入れてください。
PC版では、ヘッダーの透過性も変えられます。数値が小さくなるほど透明になります。
ヘッダーバーの設定
ヘッダーバーとは以下の赤で囲んである部分のことです。
ヘッダーバーの背景や文字のカラーが変更できます。
写真のように右側にSNSのアイコンを表示させたい場合は、「SNSアイコンリストを表示する」にチェックを入れます。
キャッチフレーズを表示させる場合は、キャッチフレーズの表示位置を設定します。
SNSもキャッチフレーズも表示しないが、ヘッダーバーを線として表示させたい場合は、「コンテンツが空でもボーダーとして表示する」にチェックを入れます。
ヘッダーメニュー（グローバルナビ）設定
ヘッダーメニューのエフェクトや色を変更できます。
マウスホバーエフェクトとは、マウスをメニューの上に乗せた時に表示されるエフェクトのことです。
以下のように複数の種類から選択できます。
ヘッダーメニューとサブメニューの背景色も変更可能です。
「サブメニューの背景色」は、メニューを選択して下に開くサブメニューの背景のことです。
「検索ボタン」の設定
サイト内検索をするための「検索ボタン」を設置することができます。
検索ボタンは、ユーザーの使いやすさを考えると、ページ上部にあるのがベストです。
ヘッダー、もしくはサイドバーに必ず設置するようにしましょう。
おススメの設定は、ヘッダーメニューを追従型にして、検索ボタンを「ヘッダーメニューに表示」に設定することです。
そうすることで、ユーザーは常に検索ボタンをクリックすることが可能です。
スマホヘッダーの設定
スマホでのヘッダーの設定です。
メニューボタンの設定
スマホで表示されるボタンに関する設定です。
アイコンの下に、表示するテキストを設定します。
メニューボタン背景色はデフォルトでは透明になっています。
カスタムボタンの設定
スマホヘッダーには、メニューボタンだけでなく検索ボタンなど好きなアイコン・リンク先を一つ設置できます。
デフォルトでは、検索メニューがセットされています。
アイコンのクラス名に関しては、こちらを参照してください。
例えば、以下のようにTwitterアイコンをヘッダーに表示することもできます。
以上でヘッダーのデザイン・レイアウトの設定は終わりです。