アッフィーこんな悩みを解決できる記事をご用意しました！
私はブログを始めて3年。
これまでに100本以上の渾身の記事を書き上げてきました。
その結果、累計で6桁の収益を達成することができました。
実は、ヘッダーやメニューを分かりやすくしただけで、読者がすぐにサイトから離れてしまうのを防ぐことができ、収益アップにも繋がりました。
SWELLなら、難しいプログラミングの知識がなくても、クリックするだけでプロのようなヘッダーが作れます。
この記事は約10分で読めて、実際の作業も20分くらいで終わります。基本から少し難しい設定まで、順を追って解説していくので安心してください。
この記事を読んで実践すれば、読者が記事を迷わず読み進めてくれる、見やすいサイトに仕上げることができます。
まだSWELLを購入していないなら、以下の記事を参考にSWELLを導入しましょう。
SWELLヘッダーの基本知識
サイトの第一印象は、読者が最初に見る「ヘッダー」で決まります。
ヘッダーはサイト全体の案内係であり、ブログの雰囲気を伝える大切なパーツです。
まずは、ヘッダーの役割や設定する場所を把握しておきましょう。
SWELLヘッダーの各パーツ名称と役割
SWELLのヘッダー機能では以下のパーツを設定できます。
- ヘッダーバー：お知らせやSNSのリンクなどを表示する、一番上のエリア
- ヘッダーロゴ：サイトのシンボルになる画像
- グローバルナビゲーション：サイト内の主要ページへのリンクを集めたメニュー
これらを組み合わせることで、あなたのサイトに合ったオリジナルのヘッダーを作り上げることが可能です。
まずはヘッダーメニューを用意しよう
ヘッダーの中でもヘッダーメニュー（グローバルナビゲーション）は、サイトの大切な記事への道しるべです。
ヘッダーメニューがキレイに整理されていると、読者は迷わずに読みたいページへたどり着けます。
その結果、サイト内の色々な記事を読んでくれるようになり、サイトに長く滞在してくれたり、商品の購入に繋がったりします。
読者に「使いやすい」と思ってもらうための、心臓部とも言えるパーツです。
ヘッダーをカスタマイズする画面は3つ
ヘッダーの設定は、WordPressの管理画面にある3つの画面で行います。
設定をする前に、カスタマイズする画面が3つあることを確認しておきましょう。
ヘッダーメニューを作る：「外観」＞「メニュー」
ヘッダーのデザインを設定する：「外観」＞「カスタマイズ」＞「ヘッダー」
ヘッダーにボタンを設置する：「外観」＞「ウィジェット」
このように、役割ごとに設定する画面が違います。
順番に見ていきましょう。
ヘッダーメニューを作成する手順
ヘッダーのデザインを設定する前に、まずはヘッダーメニュー（グローバルナビゲーション）に表示する「中身」を作りましょう。
WordPressの基本機能を使いますが、ヘッダー作りの土台となる大切なステップです。
ヘッダーメニューを作成する手順は以下の通りです。
WordPress管理画面から「外観」⇒「メニュー」を選択します。
この画面では、サイト内に表示されるすべてのメニューを管理していきます。
「新しいメニューを作成しましょう」というリンクをクリックし、メニュー名を入力しましょう。
このメニュー名は管理用で実際のサイトには表示されません。
アッフィーメニュー名は「ヘッダーメニュー」や「グローバルナビ用」など、どこで使うメニューなのか一目で分かる名前をつけておくと、あとで管理がラクになりますよ。
メニュー名を入力したら、「メニューを作成」ボタンを押して次に進みましょう。
左側の「固定ページ」「投稿」「カテゴリー」などから表示したい項目を選び、「メニューに追加」をクリックします。
するとメニュー構造に項目が追加されます。
サブメニュー（ドロップダウン）を作成する場合は、項目をドラッグして階層を作ります。
項目をドラッグ＆ドロップで少し右にずらすと、その項目が一つ上の項目の「サブ項目」になります。
今回は、「ブログの始め方」という親メニューの下に、「ブログの始め方（XSERVER）」と「ブログの始め方（ConoHa WING）というサブ項目を設定しました。
上記の階層を作った場合、下図のようにグローバルメニュー（ブログの始め方）にカーソルを当てると、サブメニュー（下図では「ブログの始め方（XSERVER）」など）が表示されます。
「メニュー設定」で「グローバルナビ」と「スマホ開閉メニュー内」にチェックを入れ、「メニューを保存」をクリックします。
「外観」⇒「カスタマイズ」⇒「ヘッダー」⇒「レイアウト・デザイン設定」で、プレビューを見ながらヘッダーのレイアウトを調整しましょう。
PCとスマホのレイアウトを別々に設定できるので、両方とも確認しながら設定しましょう。
カスタマイザーでヘッダーデザインを整える
メニューの中身ができたら、ヘッダーのデザインの設定に入りましょう。
SWELLのカスタマイズ機能を使えば、実際の見た目を画面で確認しながら調整できます。
ヘッダーをカスタマイズできる項目は以下の12個です。
ヘッダーレイアウトを選択する（PC・SP）
SWELLでは、「外観」＞「カスタマイズ」＞「ヘッダー」から、パソコンとスマホでそれぞれレイアウトを選ぶことができます。
パソコン用にはロゴを真ん中に置くデザインなど4種類、スマホ用にはロゴとメニューボタンの配置を変える3種類が用意されています。
色々なパターンを試して、一番しっくりくるものを見つけてみましょう。
PCのヘッダーレイアウト
PCヘッダーのレイアウトは4種類あります。
【PC】ヘッダーナビをロゴの横に（右寄せ）
【PC】ヘッダーナビをロゴの横に（左寄せ）
【PC】ヘッダーナビを下に
【PC】ヘッダーナビを上に
スマホのヘッダーレイアウト
スマホのヘッダーレイアウトは3種類です。
ロゴ：左/メニュー：右
ロゴ：中央/メニュー：右
ロゴ：中央/メニュー：左
ヘッダーロゴを設定する
ヘッダーロゴはサイトの「顔」とも言える大切な看板です。
サイトの一番上に置かれ、訪問者に「このサイトの個性」を一目で伝える役割があります。
ヘッダーロゴの設定手順
ヘッダーロゴの設定手順は以下の通りです。
WordPress管理画面から「外観」⇒「カスタマイズ」⇒「ヘッダー」⇒「ロゴ画像の設定」を表示させます。
「画像を選択」ボタンをクリックし、あらかじめ用意しておいたヘッダーロゴをアップロードします。
【推奨のヘッダーロゴのサイズ】
横幅：600px ✕ 高さ：135px
速度を重視するなら600 × 135px程度がおすすめです。
ロゴは小さく表示されることが多いため、表示速度への影響を考えると、必要以上に大きな画像は避けましょう。
PCとスマホ、それぞれの表示サイズを数値で設定します
サイズは最初デフォルトのままプレビューで確認し、ちょうどいいと感じる数値に調整しましょう。
アッフィーサイトの雰囲気に合わせたロゴを用意することで、訪問者への第一印象が大きく変わります。
デザインツールCanvaなどを使って透過処理されたロゴを作ると、より洗練された印象になりますよ。
「公開」ボタンを押して設定を保存します。
ヘッダーの背景色と文字色を決める
サイトの雰囲気に合わせて、ヘッダーの背景色や文字の色を自由に設定できます。
ヘッダー背景色：デフォルト、ヘッダー文字色：デフォルト
ヘッダー背景色：サックス、ヘッダー文字色：デフォルト
ヘッダー背景色：デフォルト、ヘッダー文字色：サックス
カラーパレットで感覚的に選んだり、カラーコードを直接入力したりすることが可能です。
色の組み合わせで印象がガラッと変わるので、実際の見た目を確認しながらじっくり選んでみましょう。
ヘッダーを追従させる
ページを下にスクロールしても、ヘッダーが画面の一番上にずっと表示される「追従（ついじゅう）ヘッダー」の設定ができます。
追従機能については、以下の動画で確認してみてください。
ヘッダーの追従機能（PC)
ヘッダーの追従機能（スマホ)
読者はいつでもメニューを見ることができるので、とても便利になります。
アッフィーヘッダーを追従させるかどうかは、チェックを入れるだけで簡単に切り替えられますよ
ヘッダー背景を透過させる
この設定はトップページ限定の特別設定です。
トップページの大きな画像を迫力あるように見せたい場合は、ヘッダーの背景を透かせる設定がおすすめです。
「ヘッダーの背景を透明にするかどうか」で「する」を選択すると、大きな画像とヘッダーが合わさったデザインになります。
背景を透明にする
背景を透明にしない
「ヘッダーバー」にSNSリンクを配置する
ヘッダーのさらに上の方に、「ヘッダーバー」も置くことが可能です。
SNSのアイコンを並べて表示することができるので、SNSを見てほしい時に便利です。
キャッチフレーズを表示する
キャッチフレーズの表示を次の３つから選択できます。
- 表示しない
- ヘッダーバーに表示
- ヘッダーロゴの近くに表示
キャッチフレーズを表示しない
キャッチフレーズをヘッダーバーに表示
キャッチフレーズをヘッダーロゴの近くに表示
キャッチフレーズのテキストは別途設定が必要になります。
キャッチフレーズを設定する手順は以下の通りです。
さらに、「キャッチフレーズに「○○○○」を表示する」にチェックを入れると、キャッチフレーズの後ろにサイト名が表示されます。
ヘッダーメニュー（グローバルナビ）を設定する
ヘッダーメニュー（グローバルナビ）では以下が設定できます。
マウスホバーエフェクト
マウスホバーエフェクトとは、リンクや画像、ボタンにマウスを乗せた（ホバーした）際に、アニメーションや色の変化で視覚的な反応を示す機能のことを言います。
マウスホバーエフェクトは以下の5種類あります。どんな種類があるかは、以下で確認できますよ！
ラインの出現（中央から）
ラインの出現（左から）
ブロックの出現
背景グレー
背景明るく
ヘッダーメニューの背景色設定
ヘッダーロゴとグローバルメニューが縦に並んでいる場合のみ、グローバルメニューの背景色を設定できます。
背景色を設定しない
背景色を設定する
サブメニューの背景色設定
サブメニューの背景色を「ホワイト」と「メインカラー」から選べます。
色：ホワイト
色：メインカラー
ヘッダーメニュー（SP）をループさせる
スマホで表示したとき、グローバルメニューをループさせることができます。
「グローバルメニューをループさせる」がどういうことかについては、以下の動画で確認できます。
検索ボタンの表示設定を切り替える
ヘッダーで検索ボタンを表示するかどうかを切り替えられます。
検索ボタンの表示位置（PC）
PCの場合は、「表示しない」「ヘッダーバー内のアイコンリストに表示」「ヘッダーメニューに表示」から選べます。
それぞれ以下のようになります。
検索バーを表示しない
ヘッダーバー内のアイコンリストに表示
ヘッダーメニューに表示
アッフィー検索ボタンは読者にとって便利なので、必ず設定しましょう
検索ボタンの表示位置（SP）
スマホの検索ボタンの表示は、「表示しない」か「カスタムボタンにセット」のいずれかから選べます。
検索バーを表示しない
カスタムボタンにセット
スマホのメニューボタンを設定する
スマホで表示されるメニューボタンは、アイコンの下にテキストが表示できます。
テキストを表示しない
テキストを表示する
また、メニューボタンに背景色をつけることもできます。
背景色なし
背景色あり
カスタムボタンを設定する
「カスタムボタンの設定」では、ヘッダーに設置したいボタンを自由に設定できます。
設定できるのは次の４つです。
アイコンクラス名
アイコンクラス名を設定すれば、アイコンを表示することができます。
アイコンクラス名：空白
アイコンクラス名：icon-home
アッフィークラス名を空白にすると検索アイコンが表示されます
ここで使えるアイコンクラス名は公式サイトSWELLで使えるアイコンの一覧で紹介されていますので確認してみてください。
アイコン下に表示するテキスト
設定したアイコンの下にテキストを表示できます。
カスタムボタン背景色
設定したアイコンに背景色をつけることができます
リンク先URL
「リンク先URL」にURLを入力すると、そのリンクへ飛ぶボタンが作れます。
ヘッダーにボタンを設置する手順
SWELLではヘッダーにボタンを簡単に設置できます。
ヘッダーにボタンを設置するメリット
ブログのヘッダーにボタンを置くと、以下のようなメリットがあります！
- 目標（商品の購入や登録など）につながりやすくなる！
読んでほしいページへの入り口がずっと表示されるので、結果的にブログの目標が達成されやすくなります。 - 読者が迷わずクリックできる！
「お申し込み」や「お問い合わせ」などのボタンが常に上にあるので、読者が「どこを押せばいいの？」と迷いません。
ヘッダーにボタンを設置する手順
SWELLでヘッダーにボタンを置くのは、以下の手順で行います。
具体的には以下の通りです。
ブログパーツでSWELLボタンを作成する。
ワードプレス画面で「ブログパーツ」＞「投稿を追加」の順にクリックしましょう。
画面左上の「+」ボタンをクリックし、「SWELLボタン」をクリックしてください。
タイトルを入力し、SWELLボタンにテキストとリンク先のURLを入力します。
入力が完了したら「公開」ボタンをクリックして保存しましょう。
ワードプレスの管理画面に戻ったらブログパーツの一覧を表示して、作成したブログパーツの呼び出しコードをコピーしておきましょう。
ウィジェットでブログパーツを挿入する
ワードプレス管理画面で、「外観」＞「ウィジェット」の順にクリックしてください。
利用できるウィジェット一覧から「カスタムHTML」を「ヘッダー内部」へドラッグ＆ドロップします。
カスタムHTMLの「内容」欄に先ほど作成したブログパーツの呼び出しコードを貼り付け、保存をクリックしてください。
アッフィーこれでヘッダーにSWELLボタンが設置されますよ
ブログパーツの使い方については、以下の記事で詳しく解説していますので参考にしてください。
【初級者もOK】CSSを使ってヘッダーを微調整する
SWELLの基本機能だけでもキレイなヘッダーは作れますが、もうちょっとだけこだわりたい人向けのテクニックです。
コピーして貼り付けるだけで使える、簡単なカスタマイズ方法を2つ紹介します。
追従ヘッダーの影を消す
スクロールした時についてくるヘッダーの下には、最初から薄い影がついています。
これを消して、すっきりとした平らな印象にしたい時の設定です。
以下の暗号（コード）を、「外観」＞「カスタマイズ」＞「追加CSS」に貼り付けるだけで、影を消すことができます。
アッフィー「追加CSS」にそのままコピペするだけ！
/* 追従ヘッダーの影を消す */
.-body-solid .l-fixHeader {
box-shadow: none;
}何もしない場合（デフォルト）とCSSを追加した場合の比較は下図のとおりです。
デフォルトでは追随ヘッダーの下にうっすらと影が見えますが、CSSを追加すると影が消えていることがわかります。
デフォルト
追加CSSを適用
ヘッダーメニューの間隔を調整する
ヘッダーメニューの間隔が狭く感じる場合がありますよね。
そんな時は、以下のコードを「追加CSS」に貼り付けるだけで、メニューの間隔を調整することができます。
/* メニューの間隔を調整する */
.c-gnav>.menu-item>a {
padding: 0 1.2em;
}何もしない場合（デフォルト）とCSSを追加した場合を比較したのが下図です。
CSSを追加するとメニューの間隔が広がっているのがわかります。
デフォルト
追加CSSを適用
SWELLのヘッダーの設定でよくある質問（FAQ）
設定を進める中で、つまずきやすいポイントをQ&A形式でまとめました。
上手く表示されない時は、以下を確認してみてください。
グローバルナビゲーションがヘッダーに表示されないのはなぜ？
メニューの設定画面にある「メニューの位置」で、「グローバルナビ」にチェックが入っているか確認してください。
チェックが入っているのに表示されない場合は、パソコンやスマホに古いデータが残っていることが原因かもしれません。
一度キャッシュのクリアを行い、ページをもう一度読み込んでみてください。
キャッシュのクリアの手順は次のとおり
「リセット」タブをクリックし、「キャッシュのクリア」の「キャッシュを削除する」をクリックしてください。
スクロールしても追従ヘッダーが表示されないのはなぜ？
設定がオフになっている可能性があります。
「外観」＞「カスタマイズ」＞「ヘッダー」の中にある、「ヘッダーの追従設定」を確認してください。
「ヘッダーを追従させる（PC）」「ヘッダーを追従させる（SP）」のチェックが入っているか見直してみましょう。
まとめ：SWELLのヘッダー設定で読者が迷わないサイトを作ろう
今回は、SWELLを使ったヘッダーとメニューの具体的な設定方法を解説しました。
今回説明した4つのアクションをまとめます。
難しい知識がなくても、クリックするだけで色々なデザインが作れるのは、SWELLならではの良いところです。
メニューを整えることで、読者が知りたい情報へスムーズにたどり着けるサイトに進化します。
この記事を読んで実践すれば、読者のサイト離脱率を下げることができますよ！
まだSWELLを使うか迷っている方や、他の機能も詳しく知りたい方は、以下のレビュー記事も併せて読んでみてください。
