アッフィーこんな悩みを解決できる記事をご用意しました！
私はブログを始めて3年。
これまでに100本以上の渾身の記事を書き上げてきました。
その結果、累計で6桁の収益を達成することができました。
SWELLなら、難しいプログラミングの知識がなくても、クリック操作を中心に見やすいヘッダーを作れます。
ヘッダーやメニューを整えるだけでも、読者が必要な情報にたどり着きやすくなり、サイト全体の見やすさもぐっと上がります。
この記事でわかることは、次のとおりです。
この記事は、基本設定から応用的な調整までを順番にまとめています。
そのため、SWELLを使い始めたばかりの方でも、手順どおりに進めればヘッダーを整えられます。
「まずは見やすいヘッダーを作りたい」という方は、この記事を見ながら1つずつ設定していきましょう。
まだSWELLを導入していない方は、先に以下の記事をチェックしておくとスムーズです。
SWELLヘッダーでできること
SWELLのヘッダーは、サイトの印象を整えるだけでなく、読者が迷わず目的のページへ進めるようにする大切なエリアです。
見た目をおしゃれに整えるのはもちろん、ロゴの表示、メニューの配置、背景色の変更、スマホ表示の調整、追従ヘッダーの設定など、サイト全体の使いやすさに関わるさまざまな設定ができます。
特にブログでは、ヘッダーの作り方ひとつで「読みやすそうなサイトだな」と感じてもらえるかどうかが変わります。
そのため、ただ見た目を整えるだけでなく、読者が必要な情報にたどり着きやすいヘッダーを作ることが大切です。
ここではまず、SWELLヘッダーの役割と、設定前に知っておきたい基本をわかりやすく整理していきます。
SWELLヘッダーはサイトの第一印象を決める重要なパーツ
ヘッダーは、サイトのいちばん上に表示される部分です。
読者がブログを開いたとき、最初に目に入りやすい場所なので、サイト全体の印象を大きく左右します。
- たとえば、ヘッダーが整理されていて見やすいサイトは、それだけで「ちゃんと作られている」「読みやすそう」と感じてもらいやすくなります。
- 反対に、メニューが分かりにくかったり、情報が詰め込みすぎだったりすると、本文を読む前に離脱されてしまうこともあります。
つまり、ヘッダーは単なる飾りではありません。
読者に安心感を与えたり、知りたいページへスムーズに案内したりする、サイトの“案内役”のような存在です。
SWELLでは、このヘッダーを初心者でも比較的かんたんに整えられるので、まずは基本を押さえておくだけでもサイト全体の見やすさが大きく変わります。
ヘッダーとグローバルナビの違い
SWELLの設定を進める前に、まず整理しておきたいのが「ヘッダー」と「グローバルナビ」の違いです。
ヘッダーとは、サイト上部全体のことを指します。
ヘッダーロゴ、メニュー（グローバルナビゲーション）、検索ボタン、ヘッダーバーなどをまとめた、いちばん上のエリア全体がヘッダーです。
一方、グローバルナビとは、そのヘッダー内に表示されるメニュー部分のことです。
たとえば「ホーム」「プロフィール」「お問い合わせ」など、サイト内の主要ページへ移動するための案内リンクが並ぶ場所がグローバルナビにあたります。
つまり、関係としては次のように考えるとわかりやすいです。
- ヘッダー ＝ サイト上部全体
- グローバルナビ ＝ ヘッダー内にあるメニュー部分
この違いを押さえておくと、後で出てくる「ヘッダーを設定する」「グローバルナビを設定する」という説明も理解しやすくなります。
SWELLヘッダーの設定場所は主に2つ
SWELLヘッダーの設定は、あちこちに分かれているように見えますが、まず覚えておきたい場所は主に2つです。
1つ目は、「外観」→「メニュー」です。
ここでは、グローバルナビに表示する項目を作成したり、並び順を変えたり、サブメニューを設定したりできます。
2つ目は、「外観」→「カスタマイズ」→「ヘッダー」です。
ここでは、ヘッダー全体のレイアウト、ロゴ、背景色、追従設定、スマホ表示、検索ボタンなどの見た目や機能を調整できます。
つまり、役割をシンプルに分けると次のとおりです。
- メニューの中身を作る場所
「外観」→「メニュー」 - ヘッダー全体の見た目や機能を整える場所
「外観」→「カスタマイズ」→「ヘッダー」
最初にこの2つの場所を把握しておけば、設定中に迷いにくくなります。
次からは、全体像をつかむため、SWELLヘッダー設定の基本的な流れを見ていきましょう。
SWELLヘッダー設定の全体の流れ
SWELLヘッダーの設定は、やることが多く見えるかもしれませんが、実際は順番どおりに進めれば難しくありません。
次の流れで進めるとスムーズに作成できます。
いきなり色やレイアウトから触りたくなるかもしれませんが、先にヘッダーメニューを作っておくと、完成形をイメージしながら調整しやすくなります。
ここでは、全体像をつかむため、SWELLヘッダー設定の基本的な流れを3つの手順に分けて紹介しますね。
手順1：ヘッダーメニューを作成する
最初に行うのは、ヘッダーに表示するメニューの作成です。
ヘッダーの見た目を整える前に、先に「何を表示するのか」を決めておくと、その後の設定が進めやすくなります。
たとえば、ホーム、プロフィール、お問い合わせ、カテゴリーページなど、読者に見てもらいたいページをあらかじめ整理しておくと、ヘッダーに入れる項目をスムーズに決められます。
また、メニュー項目の数が多すぎると見づらくなりやすいため、この段階で必要な項目をしぼっておくことも大切です。
まずは「外観」→「メニュー」から、ヘッダーメニューの土台を作っていきましょう。
手順2：カスタマイザーでヘッダー全体を整える
メニューの中身ができたら、次はヘッダー全体の見た目を整えていきます。
ここでは「外観」→「カスタマイズ」→「ヘッダー」から、ロゴの表示、レイアウト、背景色、文字色、ヘッダーバーなどを設定できます。
SWELLでは、プレビューを見ながら調整できるので、実際の見た目を確認しつつ整えていけるのが大きなメリットです。
この段階では、細かく作り込みすぎるよりも、まずは
- ロゴは見やすいか
- メニューは読みやすいか
- 全体の配色に違和感がないか
といった基本を押さえるのがおすすめです。
見やすさと使いやすさを意識して整えて、読者が迷わず使えるヘッダーにしていきましょう。
手順3：スマホ表示や便利機能を調整する
ヘッダー全体の形が整ったら、最後にスマホ表示や便利機能を調整します。
パソコンではきれいに見えていても、スマホで見るとメニューが窮屈に見えたり、ボタンの位置が合わなかったりすることがあるからです。
この段階では、スマホのヘッダーレイアウト、メニューボタン、検索ボタン、追従ヘッダー、カスタムボタンなどを必要に応じて設定していきましょう。
特にブログはスマホから読まれることが多いため、使いやすさを左右する重要な仕上げの工程といえます。
アッフィー最後にスマホ表示までしっかり整えることで、読者がどの端末から見ても使いやすいヘッダーに仕上がりますよ。
SWELLでヘッダーメニューを作成する手順
ヘッダーのデザインを整える前に、まずはヘッダーに表示するメニューを作成しましょう。
ここで作るのは、いわゆるグローバルナビゲーションの中身です。
先にメニューを用意しておくことで、あとからヘッダーのレイアウトや見た目を調整するときに、完成形をイメージしながら設定しやすくなります。
ヘッダーメニューを作成する手順は次のとおりです。
順番に見ていきましょう。
新しいメニューを作成する
まずは、WordPress管理画面の「外観」→「メニュー」からメニューを作りましょう。
この画面では、サイト内で使う各種メニューをまとめて管理できます。
すでに別のメニューが作成されている場合もありますが、ヘッダー用のメニューを新しく作る場合は、「新しいメニューを作成しましょう」をクリックしましょう。
次に、管理用のメニュー名を入力します。この名前はサイト上に表示されるものではないため、読者に見えることはありません。
そのため、メニュー名は
- 「ヘッダーメニュー」
- 「グローバルナビ用」
- 「メインメニュー」
など、あとで見返したときに用途がわかる名前にしておくのがおすすめです。
メニュー名を入力したら、「メニューを作成」をクリックして次に進みましょう。
表示したい項目をメニューに追加する
新しいメニューを作成したら、次はヘッダーに表示したい項目を追加していきます。
画面左側には、固定ページ・投稿・カテゴリーなどの項目が並んでいます。
この中からヘッダーに表示したいページを選び、「メニューに追加」をクリックすると、右側のメニュー構造に反映されます。
ヘッダーには、読者がよく使うページを中心に入れるのが基本です。
たとえば、次のような項目がよく使われます。
- ホーム
- プロフィール
- お問い合わせ
- カテゴリーページ
- サービス紹介ページ
- 重要なまとめ記事
ただし、項目を増やしすぎるとヘッダーが見づらくなるため注意が必要です。
特にスマホでは表示スペースが限られるので、まずは本当に見せたい項目にしぼることを意識しましょう。
迷った場合は、5〜6項目程度から始めると、見た目と使いやすさのバランスが取りやすくなります。
グローバルナビとスマホ開閉メニューにチェックを入れる
表示したい項目を追加したら、最後にどこへ表示するメニューなのかを設定します。
画面下部の「メニュー設定」にある項目の中から、「グローバルナビ」と「スマホ開閉メニュー内」にチェックを入れましょう。
設定ができたら、「メニューを保存」をクリックします。
このチェックを入れておくことで、作成したメニューがヘッダーで使われるようになります。
特に注意したいのが、「グローバルナビ」へのチェック忘れです。
メニュー自体を作成していても、ここにチェックが入っていないとヘッダーに表示されません。
また、スマホからのアクセスも多いブログでは、「スマホ開閉メニュー内」にもチェックを入れておくのがおすすめです。
これを設定しておけば、スマホ表示でもメニューボタンの中に同じメニューを表示できます。
「せっかく作ったのにヘッダーに出てこない」という場合は、この設定が原因になっていることがよくあります。
保存前に、チェックが入っているかを一度確認しておきましょう。
サブメニューを設定する
メニュー項目が多い場合や、関連するページをまとめて見せたい場合は、サブメニューを設定すると便利です。
サブメニューを作ると、親となるメニューの下に項目をぶら下げる形で表示できます。いわゆるドロップダウンメニューのような形です。
階層を作った場合、下図のように親メニューにカーソルを合わせると、その下にサブメニューが表示されます。
設定方法はかんたんで、メニュー構造に追加した項目をドラッグ＆ドロップで少し右にずらすだけです。すると、その項目は一つ上のメニューの子項目として設定されます。
ただし、サブメニューを増やしすぎると操作しにくくなることもあるため、最初は本当に必要なものだけに絞りましょう。
特にブログ初心者のうちは、まずはシンプルな構成で作り、必要に応じてあとから追加していくのがおすすめです。
カスタマイザーでヘッダーデザインを整える
メニューの中身を作成したら、次はカスタマイザーでヘッダー全体の見た目を整えていきましょう。
SWELLでは、「外観」→「カスタマイズ」→「ヘッダー」から、レイアウト・ロゴ・配色・ヘッダーバー・グローバルナビのデザインなどをまとめて調整できます。
先にメニューを作っておくと、実際の表示を確認しながら調整できるため、完成形をイメージしやすくなります。
ここでは、見た目を整えるうえで特に重要な6つのポイントに絞って、順番に見ていきます。
ヘッダーレイアウトを選択する（PC・SP）
SWELLでは、パソコンとスマホでそれぞれヘッダーレイアウトを設定できます。
設定場所は「外観」→「カスタマイズ」→「ヘッダー」です。ここでロゴやメニューの配置を選ぶことで、サイト全体の印象が大きく変わります。
ヘッダーは読者が最初に目にする部分なので、見た目のおしゃれさだけでなく、使いやすさも意識して選ぶことが大切です。
特にスマホでは表示スペースが限られるため、PCで見やすいレイアウトでも、スマホでは少し窮屈に見えることがあります。
そのため、PCとスマホの両方を確認しながら、バランスのよいレイアウトを選びましょう。
PCのヘッダーレイアウト
PCヘッダーのレイアウトは4種類あります。
ロゴの横にメニューを並べるタイプや、ロゴとメニューを上下に配置するタイプなどがあり、サイトの雰囲気に合わせて選べます。
【PC】ヘッダーナビをロゴの横に（右寄せ）
【PC】ヘッダーナビをロゴの横に（左寄せ）
【PC】ヘッダーナビを下に
【PC】ヘッダーナビを上に
一般的なブログで使いやすいのは、ロゴの横にメニューを配置するレイアウトです。シンプルで見やすく、読者も迷いにくいため、初心者にも使いやすい形といえます。
一方で、メニュー項目が多い場合や、すっきりした印象にしたい場合は、ロゴとメニューを上下に分けるレイアウトも相性がよいです。
迷ったときは、まずは標準的な配置から始めて、あとでサイトの雰囲気に合わせて調整していくのがおすすめです。
スマホのヘッダーレイアウト
スマホ用のヘッダーレイアウトは3種類あります。
ロゴの位置とメニューボタンの位置を組み合わせながら、見やすい形を選びましょう。
ロゴ：左/メニュー：右
ロゴ：中央/メニュー：右
ロゴ：中央/メニュー：左
スマホでは、PC以上に「見た目の整い」と「押しやすさ」の両方が大切です。
たとえば、ロゴを中央に置くとすっきり見えやすく、ロゴを左に置くと一般的なサイトに近い印象になります。
どのレイアウトが正解というよりも、自分のサイトでロゴが見やすいか、メニューボタンが押しやすいかで決めるのがおすすめです。
設定後は、必ずスマホ表示でも確認して、窮屈に見えないかチェックしておきましょう。
ヘッダーロゴを設定する
ヘッダーロゴはサイトの「顔」とも言える大切な要素です。
サイトの一番上に置かれ、訪問者に「このサイトの個性」を一目で伝える役割があります。
ヘッダーロゴの設定手順
ヘッダーロゴの設定手順は以下の通りです。
WordPress管理画面から「外観」⇒「カスタマイズ」⇒「ヘッダー」⇒「ロゴ画像の設定」を表示させます。
「画像を選択」ボタンをクリックし、あらかじめ用意しておいたヘッダーロゴをアップロードします。
【推奨のヘッダーロゴのサイズ】
横幅：600px ✕ 高さ：135px
ロゴ画像は大きすぎると見た目や表示速度に影響しやすいため、必要以上に大きな画像は避けるのがおすすめです。
PCとスマホ、それぞれの表示サイズを数値で調整し、「公開」ボタンで保存しましょう。
ヘッダーの背景色と文字色を設定する
ヘッダーの背景色と文字色を調整すると、サイト全体の印象を大きく変えられます。
白ベースでシンプルに見せることもできますし、ブランドカラーを使って個性を出すことも可能です。
ヘッダー背景色：デフォルト、ヘッダー文字色：デフォルト
ヘッダー背景色：サックス、ヘッダー文字色：デフォルト
ヘッダー背景色：デフォルト、ヘッダー文字色：サックス
設定では、背景色だけを変えることも、文字色だけを変えることもできます。
そのため、サイト全体のデザインに合わせて、落ち着いた印象にも、やわらかい印象にも調整できます。
ただし、色を決めるときは見た目のおしゃれさだけでなく、文字がきちんと読めるかを優先することが大切です。
背景色と文字色の差が小さいと、読者にとって見づらいヘッダーになってしまいます。
迷った場合は、まずは白や薄い色をベースにして、文字色を濃い色にする組み合わせから試してみましょう。
「ヘッダーバー」にSNSリンクを配置する
ヘッダーのさらに上の方に、「ヘッダーバー」も置くことが可能です。
SNSのアイコンを表示することができるので、XやInstagramなどのSNSへ誘導したい場合は、ヘッダーバーにアイコンを表示しておくと自然に案内できます。
キャッチフレーズを表示する
キャッチフレーズの表示を次の３つから選択できます。
- 表示しない
- ヘッダーバーに表示
- ヘッダーロゴの近くに表示
キャッチフレーズを表示しない
キャッチフレーズをヘッダーバーに表示
キャッチフレーズをヘッダーロゴの近くに表示
＼クリックして開く／
キャッチフレーズを設定する手順はこちら
グローバルナビのデザインを調整する
ヘッダー内のメニュー部分であるグローバルナビは、見た目を少し整えるだけでも印象が変わります。
SWELLでは、マウスホバーエフェクトや背景色、サブメニューの背景色などを調整できます。
ここで大切なのは、派手にしすぎることよりも、読者が使いやすいデザインにすることです。
装飾を増やしすぎると目立ちはしますが、かえって読みにくく感じることもあります。
そのため、まずはシンプルな設定から始めて、必要に応じて少しずつ調整していくのがおすすめです。
マウスホバーエフェクト
マウスホバーエフェクトとは、メニューにカーソルを合わせたときに、色や線、背景などが変化する演出のことです。
SWELLでは以下の5種類のパターンから選べるため、サイトの雰囲気に合わせて調整できます。
ラインの出現（中央から）
ラインの出現（左から）
ブロックの出現
背景グレー
背景明るく
ホバーエフェクトを設定すると、読者は「ここはクリックできる場所なんだ」と直感的にわかりやすくなります。
ただし、動きが強すぎると落ち着かない印象になることもあるため、ブログでは控えめなもののほうが使いやすい場合が多いです。
迷った場合は、まずはシンプルなライン表示や、軽い背景変化から試してみるとよいでしょう。
ヘッダーメニューの背景色設定
ヘッダーメニューの背景色を設定すると、メニュー部分をよりはっきり見せることができます。
背景色を設定しない
背景色を設定する
背景色を入れるとデザインにメリハリが出ますが、強い色を使いすぎると本文より目立ってしまうこともあります。
まずはサイト全体になじむ色から試し、必要に応じて調整するのがおすすめです。
サブメニューの背景色設定
サブメニューの背景色は、「ホワイト」と「メインカラー」から選べます。
ドロップダウンで表示されたときの印象が変わるため、ヘッダー全体の統一感を整えたいときに役立ちます。
色：ホワイト
色：メインカラー
白を選ぶとシンプルで落ち着いた印象になり、メインカラーを選ぶとサイトらしさを出しやすくなります。
ただし、ここでも大事なのは見た目より読みやすさです。
文字色との組み合わせによっては見づらくなることがあるため、設定後は実際の表示を確認しておきましょう。
SWELLヘッダーの便利機能を設定する
ヘッダーの見た目が整ったら、次は必要に応じて便利機能を設定していきましょう。
SWELLでは、追従ヘッダー、背景透過、検索ボタン、スマホメニューボタン、カスタムボタンなど、ヘッダーをより便利にする機能が用意されています。
ただし、これらの機能はすべて必須ではありません。そのため、最初から全部設定しようとしなくても大丈夫です。
まずは
- 読者がメニューを使いやすくなるか
- 自分のブログに必要か
- 見た目がごちゃごちゃしないか
を考えながら、必要なものだけ取り入れていきましょう。
ヘッダーを追従表示させる
SWELLでは、ページを下にスクロールしても、ヘッダーを画面の上に表示したままにできます。これが「追従ヘッダー」です。
追従機能については、以下の動画で確認してみてください。
ヘッダーの追従機能（PC)
ヘッダーの追従機能（スマホ)
追従ヘッダーを有効にすると、読者はページの途中にいても、すぐにメニューや検索へアクセスしやすくなります。
- 特に記事数が多いブログや、回遊してほしいサイトでは便利な機能です。
- 一方で、画面上部の表示領域を使うため、サイトによっては少し圧迫感が出ることもあります。
そのため、実際の表示を確認しながら、使いやすさとのバランスで判断するのがおすすめです。
アッフィー設定自体はシンプルなので、迷ったら一度ONにして表示を試してみましょう。
ヘッダー背景を透過させる
SWELLでは、ヘッダーの背景を透明にする設定もできます。
これをONにすると、トップページの一番上に大きな画像を入れている場合、ヘッダーの白い帯が消えて、画像の上にロゴやメニューがそのまま表示されるようになります。
たとえば、トップページに
- 大きなメイン画像を入れている
- おしゃれなトップ画面を作りたい
- 画像をできるだけ広く見せたい
という場合に向いている設定です。
背景を透明にする
背景を透明にしない
さらに、背景を透明にすると、後ろの画像の色によっては、ロゴやメニューの文字が見えにくくなることがあります。
設定したあとは、文字がちゃんと読めるかを必ず確認しておきましょう。
検索ボタンの表示位置を切り替える
SWELLでは、ヘッダーに検索ボタンを表示できます。
検索ボタンがあると、読者は見たい記事を自分で探しやすくなります。
- 特に、記事数が増えてきたブログでは便利です。
- 反対に、まだ記事数が少ないブログでは、無理に表示しなくても困らないことが多いです。
つまり検索ボタンは、記事が増えてきたブログほど役立ちやすい機能です。
そのため、「読者に記事を探してもらいやすくしたい」と感じたタイミングで設定すれば問題ありません。
検索ボタンの表示位置（PC）
PCでは、検索ボタンの表示方法を次の3つから選べます。
- 表示しない
- ヘッダーバー内のアイコンリストに表示
- ヘッダーメニューに表示
検索バーを表示しない
ヘッダーバー内のアイコンリストに表示
ヘッダーメニューに表示
シンプルに見せたいなら非表示でもOKです。
ただ、記事数が多いブログでは表示しておくと親切です。
迷った場合は、「ヘッダーメニューに表示」がわかりやすく、初心者にも使いやすい設定です。
表示されないときは、検索ボタン側だけでなく、ヘッダーバーの設定も合わせて確認してみてください。
検索ボタンの表示位置（SP）
スマホでは、検索ボタンの表示方法を「表示しない」または「カスタムボタンにセット」から選べます。
検索バーを表示しない
カスタムボタンにセット
スマホ画面は表示スペースが限られているため、必要な機能だけをコンパクトに配置するのがポイントです。
検索機能を使ってもらいたい場合は、「カスタムボタンにセット」を選ぶとよいでしょう。
スマホのメニューボタンを設定する
スマホで表示されるメニューボタンは、見た目を少し調整できます。
たとえば、アイコンの下にテキストを表示することができます。
メニューアイコンだけだと意味が伝わりにくい場合でも、「メニュー」などの文字を添えることで、読者が迷いにくくなります。
テキストを表示しない
テキストを表示する
また、メニューボタンに背景色をつけることも可能です。
背景色をつけるとボタンが目立ちやすくなるため、スマホでも押しやすく感じてもらいやすいです。
背景色なし
背景色あり
ただし、目立たせすぎると全体のデザインから浮いてしまうこともあります。
サイトの雰囲気に合うかを見ながら調整してみてください。
カスタムボタンを設定する
「カスタムボタンの設定」では、ヘッダーに設置したいボタンを自由に設定できます。
設定できるのは次の４つです。
最初から全部設定せず、アイコンだけ、またはアイコン＋テキストだけでも十分使えます。
必要に応じて、背景色やリンク先を追加していきましょう。
アイコンクラス名
アイコンクラス名を設定すると、ボタンにアイコンを表示できます。
アイコンクラス名：空白
アイコンクラス名：icon-home
たとえば、icon-home と入力するとホーム系のアイコンを表示できます。
見た目で役割が伝わりやすくなるので、スマホでも使いやすいボタンを作りやすいです。
アッフィーアイコンクラス名を空白にすると、検索アイコンが表示されます。検索ボタンとして使いたいときは、この仕様を覚えておくと便利ですよ。
使えるアイコンクラス名は、公式サイトの「
SWELLで使えるアイコンの一覧」で確認できます。どのアイコンを使うか迷ったときは、そこで探してみましょう。
アイコン下に表示するテキスト
設定したアイコンの下に、テキストを表示することもできます。
たとえば、「検索」「ホーム」「お問い合わせ」などと表示しておくと、アイコンだけよりも意味が伝わりやすくなります。
とくに、ブログに慣れていない読者にも親切です。くい読者にも親切です。
アイコンだけではわかりにくそうな場合は、テキストも一緒に表示しておくのがおすすめです。
カスタムボタン背景色
カスタムボタンには背景色をつけることもできます。
背景色をつけるとボタンが目立ちやすくなり、押してほしいボタンを強調しやすくなります。
たとえば、検索ボタンや問い合わせボタンなど、よく使ってほしい機能に向いています。
ただし、色を強くしすぎるとヘッダー全体がうるさく見えることもあります。サイト全体の配色に合わせて、違和感のない色を選ぶようにしましょう。
リンク先URL
「リンク先URL」にURLを入力すると、そのリンクへ移動するボタンを作れます。
たとえば、問い合わせページ、プロフィール、トップページなど、よく見てもらいたいページへの導線として使えます。
スマホでもすぐ移動できるので、読者に次の行動を促しやすくなります。
リンク先URLを設定したい場合は、検索ボタンの表示設定（SP）を「表示しない」にしておきましょう。
ヘッダーメニュー（SP）をループさせる
スマホでは、ヘッダーメニューをループ表示させることもできます。
「グローバルメニューをループさせる」がどういうことかについては、以下の動画で確認できます。
この設定を使うと、メニュー項目を横にスライドしながら確認しやすくなります。
項目数が多い場合でも、限られたスマホ画面の中でメニューを見せやすいのがメリットです。
ただし、メニュー数が少ない場合は、無理にループ表示にしなくても問題ありません。
メニューの数や見やすさを確認しながら、必要なときだけ使うくらいで大丈夫です。
ヘッダーにボタンを設置する手順
SWELLでは、ブログパーツとウィジェットを使えば、ヘッダーにボタンを設置できます。
ヘッダーにボタンを置いておくと、読者が必要なページへすぐ移動できるので、お問い合わせ・申し込み・商品ページへの導線を作りやすくなります。
ヘッダーにボタンを設置するメリット
ブログのヘッダーにボタンを置くメリットは、読者が迷わず行動しやすくなることです。
- 読者が迷わずクリックできる！
たとえば「お問い合わせ」や「お申し込み」などのボタンが上部に固定されていると、読者は「どこを押せばいいの？」と迷いません。 - 目標（商品の購入や登録など）につながりやすくなる！
読んでほしいページへの入り口が常に表示されるため、商品の購入や登録などの目標にもつながりやすくなります。
「読者に見てほしいページがある」「ブログの導線をわかりやすくしたい」という場合は、ヘッダーへのボタン設置はかなり効果的です。
ヘッダーにボタンを設置する手順
SWELLでヘッダーにボタンを置く設定は、以下の手順で完了します。
ここから順番に見ていきましょう。
ブログパーツでSWELLボタンを作成する。
まずは、ヘッダーに表示するボタンをブログパーツで作成します。
ワードプレス画面で「ブログパーツ」＞「投稿を追加」の順にクリックします。
画面左上の「+」ボタンをクリックし、「SWELLボタン」を選びましょう。
続いて、タイトルを入力し、SWELLボタンにテキストとリンク先URLを設定します。
入力が完了したら「公開」ボタンをクリックして保存してください。
保存できたら、WordPress管理画面に戻ってブログパーツ一覧を開きます。
作成したブログパーツの呼び出しコードをコピーしておきましょう。
このコードを、次の手順でウィジェットに貼り付けます。
ウィジェットでブログパーツを挿入する
ブログパーツを作成したら、次はその呼び出しコードをウィジェットに入れて、ヘッダーへ表示させます。
ワードプレス管理画面で、「外観」＞「ウィジェット」の順にクリックします。
利用できるウィジェット一覧から「カスタムHTML」を「ヘッダー内部」へドラッグ＆ドロップします。
カスタムHTMLの「内容」欄に先ほど作成したブログパーツの呼び出しコードを貼り付け、「保存」をクリックすれば設定完了です。
アッフィーこれでヘッダーにSWELLボタンが表示されますよ
なお、ブログパーツの使い方をもっと詳しく知りたい方は、関連記事もあわせて確認してみてください。
【必要な人だけでOK】CSSを使ってヘッダーを微調整する
SWELLの基本機能だけでもキレイなヘッダーは作れますが、「もう少しだけ見た目を調整したい」という人向けのテクニックです。
ここで紹介するのは、コードをそのまま貼り付けるだけでできる簡単な微調整です。
どちらも、「外観」＞「カスタマイズ」＞「追加CSS」に貼り付ければ反映できます。
追従ヘッダーの影を消す
スクロールしたときに表示される追従ヘッダーには、初期状態でうっすら影がついています。
この影を消すと、ヘッダー全体がすっきりした印象になります。
「影はいらない」「フラットなデザインにしたい」という場合に向いている調整です。
以下のコードを、「外観」＞「カスタマイズ」＞「追加CSS」に貼り付けてください。
アッフィー「追加CSS」にそのままコピペするだけ！
/* 追従ヘッダーの影を消す */
.-body-solid .l-fixHeader {
box-shadow: none;
}何もしない場合と比べると、CSSを追加したあとは追従ヘッダー下の影がなくなり、見た目がすっきりします。
大きな変更ではありませんが、細かい印象を整えたいときに使いやすいカスタマイズです。
デフォルト
追加CSSを適用
ヘッダーメニューの間隔を調整する
ヘッダーメニューの項目が、少し詰まって見えることがあります。
そんなときは、メニュー同士の余白を広げると見やすくなります。
ナビゲーションをすっきり見せたい場合におすすめです。
以下のコードを、同じく「追加CSS」に貼り付けてください。
/* メニューの間隔を調整する */
.c-gnav>.menu-item>a {
padding: 0 1.2em;
}このCSSを追加すると、ヘッダーメニューの左右の余白が広がり、各項目が見やすくなります。
「少し窮屈に見える」と感じたときに使うと、バランスを整えやすいです。
デフォルト
追加CSSを適用
SWELLのヘッダーの設定でよくある質問（FAQ）
SWELLのヘッダー設定を進める中で、つまずきやすいポイントをよくある質問としてまとめました。
上手く表示されない時は、以下を確認してみてください。
グローバルナビゲーションがヘッダーに表示されないのはなぜ？
まず確認したいのは、メニューの位置設定です。
メニューの設定画面にある「メニューの位置」で、「グローバルナビ」にチェックが入っているか見てみましょう。
チェックが入っていないと、作成したメニューはヘッダーに表示されません。
チェックが入っているのに表示されない場合は、パソコンやスマホに古いデータが残っている可能性があります。
一度キャッシュのクリアを行い、ページをもう一度読み込んでみてください。
キャッシュのクリアの手順は次のとおり
「リセット」タブを開き、「キャッシュのクリア」の「キャッシュを削除する」をクリックしてください。
ここまで行ったら、サイトを再読み込みして、グローバルナビが表示されるか確認しましょう。
スクロールしても追従ヘッダーが表示されないのはなぜ？
追従ヘッダーが表示されないときは、追従設定がオフになっている可能性があります。
「外観」＞「カスタマイズ」＞「ヘッダー」の中にある、「ヘッダーの追従設定」を確認してください。
この中にある、以下の項目にチェックが入っているか見直しましょう。
- ヘッダーを追従させる（PC）
- ヘッダーを追従させる（SP）
どちらか、または両方がオフになっていると、スクロールしても追従ヘッダーは表示されません。
パソコンとスマホで設定が分かれているので、自分が確認している表示環境に合わせてチェックすることも大切です。
設定を保存したあとに表示されない場合は、こちらもあわせてページを再読み込みして確認してみてください。
まとめ：SWELLのヘッダー設定で読者が迷わないサイトを作ろう
今回は、SWELLを使ったヘッダーとメニューの具体的な設定方法を解説しました。
この記事で紹介した内容を、あらためてまとめると次の4つです。
SWELLは、難しい知識がなくても、クリック操作を中心にヘッダーを整えやすいテーマです。
そのため、ブログ初心者でも見やすいヘッダーを作りやすいのが大きなメリットです。
ヘッダーやメニューが整うと、読者は知りたい情報にたどり着きやすくなります。
結果として、サイト全体の見やすさが上がり、回遊しやすいブログに近づきます。
まずはこの記事の手順を参考にしながら、メニュー設定から1つずつ整えていけば大丈夫です。
少し調整するだけでも、読者にとって使いやすいサイトになりますよ。
SWELLをまだ使うか迷っている方や、ほかの機能もあわせて知りたい方は、以下のレビュー記事も参考にしてみてください。
今回はここまでです。
最後まで読んでいただきありがとうございました。
