WordPressテーマのSWELLで使うメニューは、「基本設定＋ちょっとした工夫＋必要ならCSS」だけで簡単におしゃれカスタマイズできます。
読み終わるころには、自分のサイトに合ったSWELLメニューの作り方がイメージできて、「よし、ここから直していこう」と手が動く状態になっているはずです。
ブログ収益化の教科書プレゼント
↓ ↓ ↓
まずは全体像を整理しよう｜SWELLメニューカスタマイズの前に
いきなり細かいデザインを触る前に、「どのメニューがどこに出るのか」「何のためのメニューなのか」を軽く整理しておきましょう。
SWELLでカスタマイズできるメニューの種類をざっくり把握
SWELLはメニューの種類がいくつかあり、最初は名前と役割がごちゃっとしがちです。よく使うものを簡単な表にしておきます。
| メニューの種類 | 主な表示場所 | 主な役割 |
|---|---|---|
| グローバルメニュー | PCのヘッダー上部 | サイトの主要ページへの入口 |
| スマホ開閉メニュー | スマホのハンバーガー内 | スマホユーザー向けの全体ナビゲーション |
| スマホ用ヘッダーメニュー | スマホ画面上の横並びメニュー | 特に押してほしいページへのショートカット |
| フッターメニュー | ページ最下部 | お問い合わせや規約などの補足リンク |
「せっかくだから全部埋めよう」と考えると、どこに何を置くか分からなくなりがちです。最初は、PCとスマホそれぞれで「ここにこのメニューが出る」とざっくりイメージしておくと、あとが楽になります。
私も最初は頭の中だけで考えていましたが、紙やメモアプリに「PC表示」「スマホ表示」と2つのレイアウトを描いてみると、整理のスピードが全然違いました。
メニューをいじる前に決めておきたい3つのこと
デザインやCSSから入ると、途中で「あれ、そもそも何をメニューに出したかったんだっけ？」となりやすいです。SWELLのメニューをカスタマイズする前に、次の3つだけ先に決めておきましょう。
- サイトのゴール（問い合わせが欲しいのか、商品を見てほしいのか、ブログを回遊してほしいのか）
- メニューに必ず入れたいページ（できれば5〜7個くらいまでに絞る）
- スマホユーザーに優先して見てほしいページ
たとえば、個人ブログなら次のような構成になりやすいです。
- ホーム
- 各カテゴリ（3〜4個）
- プロフィール（運営者情報）
- お問い合わせ
店舗サイトや教室サイトなら、次のようなイメージです。
- メニュー・料金
- 予約方法
- アクセス
- お客様の声
この「何をメニューに載せるか」を先に決めておくだけで、SWELLのメニュー調整はかなりスムーズになります。
【深呼吸タイム】 稼ぐために必要な3つのポイントを知っていますか？ これら全部を暴露します。
基礎編｜SWELLのメニュー設定とシンプルなカスタマイズ
ここからは、WordPress標準のメニュー機能とSWELLの基本設定を使って、土台となるメニューを整えていきます。まずはPCのグローバルメニュー、そのあとにスマホまわりを見ていきましょう。
グローバルメニュー（ヘッダーメニュー）の基本設定
最初に整えたいのが、PCで表示されるグローバルメニューです。大まかな流れは次のとおりです。
| ステップ | 作業内容 | ポイント |
|---|---|---|
| 1 | 「外観＞メニュー」で新しいメニューを作成 | 名前は「グローバル」など分かりやすいものにする |
| 2 | 固定ページやカテゴリーをメニューに追加 | メニュー数は5〜7個を目安に絞る |
| 3 | ドラッグで並び替えや階層化を行う | 子メニューを作りすぎないように注意 |
| 4 | 表示する位置にチェックを入れる | SWELLなら「ヘッダーメニュー」に割り当てる |
グローバルメニューでよくある悩みが、「メニューが多すぎてPCで2段になってしまう」というものです。できれば、横並びのメニューは5個前後に抑えるのがおすすめです。
どうしても数が増えてしまうときは、次のように分担させるとスッキリします。
- 絶対に見てほしいページ → ヘッダーメニュー
- それ以外のページ → フッターやサイドバー
こうすると、見た目のごちゃつきも減り、ユーザーもどこを見ればいいか迷いにくくなります。
スマホメニューとハンバーガーメニューの基本設定
次に、スマホ向けのメニューを整えます。SWELLには、スマホで表示されるメニューが大きく2種類あります。
- ハンバーガーアイコンをタップすると開く「スマホ開閉メニュー」
- 画面上部に横並びで出せる「スマホ用ヘッダーメニュー」
よくある組み合わせは、次のようなパターンです。
- スマホ開閉メニュー → PCのグローバルメニューと同じものを入れる
- スマホ用ヘッダーメニュー → 特に押してほしい2〜3ページだけを置く
スマホ開閉メニューの見た目は、カスタマイザーのヘッダー関連やサイト全体の設定から、背景色や文字色、ラベル（「メニュー」などのテキスト）を調整できます。
一度、自分のスマホでサイトを開いて、親指でタップしながら「ここにこのボタンがあった方が押しやすいな」と確認すると、改善のポイントが見つかりやすいです。
よくあるSWELLメニュー構成パターン
「そもそも、どういうメニュー構成が無難なのか分からない」という声もよく聞きます。代表的なパターンを、サイトのタイプ別に表にしてみました。
| サイトタイプ | ヘッダーメニュー例 | スマホ用ヘッダーメニュー例 |
|---|---|---|
| 個人ブログ | ホーム / カテゴリA / カテゴリB / プロフィール / お問い合わせ | 人気記事 / プロフィール |
| 教室・サロン | ホーム / メニュー・料金 / 予約方法 / お客様の声 / アクセス | 予約 / メニュー・料金 |
| コーポレート | ホーム / 事業内容 / 事例紹介 / 会社概要 / お問い合わせ | 事例紹介 / お問い合わせ |
自分のサイトがどのパターンに近いかを考え、「ほぼ同じ構成をベースにして、必要なページ名だけ変える」というやり方がおすすめです。ゼロから完全オリジナルで考えるより、ずっと迷いが減ります。
【ちょっと一息♪】 私の妻がどうやって7日で初報酬を得て5万円の不労所得を得られるようになったか？
その全貌を知りたくありませんか？
デザイン編｜コードなしでSWELLメニューを整える
ここからは、CSSを書かなくてもできる範囲のデザイン調整をまとめます。まずはカスタマイザーだけで、見た目と読みやすさを整えてしまいましょう。
カスタマイザーだけでできる見た目カスタマイズ
SWELLはカスタマイザーがかなり充実していて、コードを書かなくてもメニューの見た目を細かく調整できます。代表的な設定項目を表にまとめると、こんな感じです。
| 設定項目 | 場所の例 | 変更できる内容 |
|---|---|---|
| ヘッダーメニューの色 | ヘッダー関連の設定 | 文字色・ホバー時の色・下線の有無など |
| スマホ開閉メニュー | サイト全体やヘッダーの設定 | 背景色・文字色・ラベルのテキストなど |
| ヘッダーの高さ | ヘッダーのデザイン設定 | ロゴのサイズやメニューの位置のバランス |
| フォント設定 | サイト全体のタイポグラフィ | 文字の太さ・大きさ・行間 |
まずはCSSを触らずに、ここを一通りチェックしてみるのがおすすめです。特に、メニューの文字色と背景色のコントラストは、読みやすさに直結します。
白背景に薄いグレーの文字、というような組み合わせだと、オシャレには見えても読みにくくなることが多いです。最初は、白背景に濃いめの文字色といったシンプルな配色から始めると失敗しにくいです。
フォント・余白・色で「読みやすさ」を上げるコツ
SWELLのメニューをおしゃれにしたくて、つい文字を小さくしたり、色を薄くしたりしがちです。でも、メニューは読み込ませるというより「一瞬で認識してもらう」ものです。
最低限、次のポイントだけは意識してみてください。
- PCでは、本文より少し大きめの文字サイズにする
- スマホでは、指でタップしやすい大きさを保つ
- 背景と文字色のコントラストをしっかりつける
- メニュー同士の間隔を少しゆったりめにする
これだけでも、特別な装飾をしなくてもぐっと見やすくなります。私なら、まずはシンプルな配色と余白で「読みやすいメニュー」を作り、そのあとでサイトのアクセントカラーを少しずつ足していきます。
実践編｜CSSでSWELLメニューをおしゃれにカスタマイズ
ここからは、一歩踏み込んでCSSを使ったカスタマイズの方向性を紹介します。「必ずやるべき」というより、「こういうこともできるんだな」とイメージするために読んでもらえればOKです。
ハンバーガーメニューをCSSでカスタマイズするときの考え方
ハンバーガーメニューは、SWELLを使ったサイトでもよくいじられる部分です。よくあるカスタマイズのパターンを、ざっくり表にしてみました。
| カスタマイズパターン | 見た目のイメージ | 難易度の目安 |
|---|---|---|
| 3本線の色や太さを変える | サイトのテーマカラーに合わせたアイコン | 低（CSSを数行追加する程度） |
| タップ時に「×」アイコンへ変化させる | 開閉状態が直感的に分かるデザイン | 中（疑似要素や変形の指定が必要） |
| 画面の右下などに丸いボタンとして固定 | 片手操作でも押しやすい位置に配置 | 中〜高（positionや余白の調整が必要） |
| スクロール量に応じて背景色を変える | ヘッダーがどんな背景でも読みやすい | 高（場合によってはJavaScriptも使う） |
【稼げるキーワード教えます】
▼ ▼ ▼
追加CSSを書くときは、次のような点を意識しておくと安心です。
- もともとSWELLに用意されているスタイルを大きく崩しすぎない
- スマホだけに効かせたい場合は、メディアクエリで範囲を絞る
- 子テーマや追加CSSにまとめて書き、あとから見返しやすくしておく
いきなり複雑なアニメーションに挑戦するより、「色と太さを変える」くらいの小さなカスタマイズから始めて、少しずつ慣れていくと挫折しにくいです。
★ちょっとだけ宣伝させてください★ 「ブログで10万」と聞くと、 と思われがちですが、実は「勝ちパターン」を知っているかどうかだけなんです。
フルスクリーンメニューやボックスメニューのアイデア
メニューを開いたときに、画面いっぱいにメニューが広がるフルスクリーン風のデザインや、スマホ開閉メニューの中をボックス状に並べるカスタマイズもよく見かけます。
こんなサイトでは、特に相性が良いと感じます。
- 世界観やブランドイメージをしっかり見せたいサイト
- メニューの数が少なめで、一つひとつを大きく見せたいサイト
- 写真やアイコンと一緒にメニューを見せたいサイト
実装は少し難しめで、CSSや場合によってはJavaScriptも必要になりますが、「メニューをただの文字リンクだけにしない」という発想はどのサイトにも応用できます。
PC表示でもハンバーガーメニューを使うときの注意点
最近は、PCでもハンバーガーメニューを採用しているサイトも増えてきました。その影響か、「PC表示もハンバーガーだけにしたい」という相談もよくあります。
ただ、PCユーザーの中には、ハンバーガーメニューにそこまで慣れていない人もいます。特に、年齢層が高めのターゲットや、堅めの業界のサイトでは注意が必要です。
もしPCでもハンバーガーを使うなら、次のような工夫をしてあげると親切です。
- ハンバーガーアイコンの近くに「メニュー」と文字も添える
- お問い合わせボタンなど、一部の重要リンクはヘッダー内に常時表示しておく
- メニューを開いたときのアニメーションをシンプルにして、迷わせない
デザイン重視で攻めたい気持ちも分かりますが、「ターゲットユーザーが迷子にならないか」を一度立ち止まって考えてみると、ちょうどいいラインが見つかりやすくなります。
設計編｜SWELLメニューの構造とSEO・導線設計
ここからは、もう少し引いた視点で「メニュー構造をどう決めるか」という話をします。SWELLのメニューをいい感じにカスタマイズするには、見た目よりも先に「構造」を整えることがとても大事です。
サイトの目的からSWELLメニューを設計する
メニューは、サイトの「案内看板」のようなものです。いくらデザインがきれいでも、ユーザーが行きたい場所にたどり着けなければ意味がありません。
まずは、サイトの目的から逆算して考えます。
- お問い合わせや予約を増やしたい → 「お問い合わせ」「予約」を目立つ位置に置く
- ブログのPVを伸ばしたい → カテゴリや人気記事への導線を強くする
- 資料請求や申し込みを増やしたい → 「サービス概要」と「資料請求」を分かりやすく配置する
SWELLでは、ヘッダーメニュー、スマホ用ヘッダー、フッターメニューなど複数のメニューを出し分けられます。「ヘッダーはメインの案内」「フッターは補足情報」というように、役割を分けて考えると整理しやすいです。
ブログ型とコーポレート型のメニュー例
ここで、タイプ別にもう少し具体的なメニュー例を挙げてみます。あくまで例ですが、「だいたいこんなイメージ」という参考にはなるはずです。
| タイプ | ヘッダーメニューの例 | 補助メニューの例 |
|---|---|---|
| ブログ型 | ホーム / カテゴリA / カテゴリB / プロフィール / お問い合わせ | フッターに「プライバシーポリシー」「運営者情報」 |
| アフィリエイト寄りブログ | ホーム / おすすめサービス / 比較記事 / 使い方ガイド / プロフィール | サイドバーに「人気記事」「カテゴリー一覧」 |
| コーポレートサイト | ホーム / 事業内容 / 事例 / 会社概要 / お問い合わせ | フッターに「採用情報」「ニュース」「個人情報保護方針」 |
| 店舗・サロン | ホーム / メニュー・料金 / 予約方法 / アクセス / お客様の声 | スマホ用ヘッダーに「予約」「メニュー」ボタン |
自分のサイトに近いパターンを一つ選んで、まずはその形をほぼコピーし、そのあとに「このページはいらないな」「ここにもう1つ足したいな」と調整していくと、スムーズに形になります。
いきなりオリジナル構成を考えるより、「型から入る」つもりでSWELLのメニューを組んでいくと迷いにくいですよ。
ありがちな失敗パターンとチェックリスト
最後に、SWELLでメニューを調整している人がよくはまりがちな失敗と、そのチェックポイントをまとめておきます。
| 失敗パターン | よくある症状 | チェックポイント |
|---|---|---|
| メニューを詰め込みすぎ | PCでメニューが2段になってしまう | 優先度の低いリンクはフッターなどに移せないか |
| スマホで縦に長すぎる | メニューをスクロールしているうちに疲れてしまう | 階層を減らせないか、カテゴリをまとめられないか |
| 色が見づらい | 背景と文字のコントラストが弱い | 一度、白背景＋濃い文字色に戻してみる |
| ラベルが分かりにくい | 専門用語だらけで何を押せばいいか分からない | 初めての人でも意味が分かる言葉になっているか |
メニューの調整が一通り終わったら、次のようなチェックをしてみてください。
- PCとスマホの両方で、主要ページに2〜3クリック以内でたどり着けるか
- 家族や友人など、サイトに詳しくない人に触ってもらい、困った点を聞いてみる
- 自分でも1週間ほど使ってみて、「ここ押しづらいな」と感じる部分がないか
SWELLのメニューは、一度作って終わりではなく、実際のユーザーの反応を見ながら少しずつ変えていくイメージで向き合うと、どんどん良くなっていきます。
★ブログでは公開できない裏情報★ 例えば、 などをこっそり暴露しています。ぜひ公開停止する前に受け取ってください。
私の発行するメルマガではブログでは公開できない秘匿性が高い特別な情報を発信しております。
SWELLメニューカスタマイズのよくある質問
Q1. CSSを書かなくても、SWELLメニューのカスタマイズは十分できますか？
A. 一般的なブログや小規模サイトであれば、CSSを使わなくてもほとんどの調整はできます。
グローバルメニューやスマホメニューの色・フォント・配置などは、SWELLのカスタマイザーだけでかなり細かく変えられます。ハンバーガーのアニメーションを凝ったものにしたい、フルスクリーン風のメニューにしたい、といったときにだけ追加CSSを検討する、くらいの感覚で大丈夫です。
Q2. SWELLのメニューに何個までリンクを入れてもいいですか？
A. 技術的にはたくさん入れられますが、使いやすさを考えると、ヘッダーメニューは5〜7個に収めるのが無難です。
メニューが多すぎると、PCでは横幅に収まらず崩れたり、スマホでは縦に長くなりすぎて使いづらくなったりします。どうしても多くなってしまうなら、重要度の低いページをフッターやサイドメニューに移して、ヘッダーは「最重要の導線だけ」にするとスッキリします。
Q3. SWELLメニューをカスタマイズしたら、SEOに悪影響が出ることはありますか？
A. 一般的な範囲でメニューをカスタマイズする分には、SEOに悪影響が出ることはほとんどありません。
むしろ、ユーザーが目的のページにたどり着きやすくなれば、回遊率や滞在時間が伸びる可能性があり、結果的にプラスに働くこともあります。むやみにリンクを隠したり、メニューを複雑にしすぎたりするとかえって使いにくくなるので、「シンプルで分かりやすいメニュー」を目指すのが一番の安全策です。
SWELLメニューカスタマイズのまとめと次の一歩
ここまでの内容を整理しておきます
- SWELLでメニューをいじる前に、サイトの目的と入れるべきページを先に決めておく
- グローバルメニューとスマホ向けメニューで役割を分けると、構成がスッキリする
- 最初はカスタマイザーだけで色・フォント・余白を整え、足りない部分だけCSSで補う
- ハンバーガーやフルスクリーン風のメニューは、ターゲットユーザーとの相性を考えて採用する
- メニューの数を絞り、誰でも分かる言葉でラベルをつけることが、SEOとユーザビリティの両方に効く
今日からできる最初の一歩としては、まず紙やメモアプリに「今のメニュー構成」と「理想のメニュー構成」を書き出してみてください。そのうえで、「外観＞メニュー」とカスタマイザーを開き、ヘッダーとスマホメニューだけでもいいので、1箇所ずつ見直してみましょう。
SWELLのメニューは、一度で完璧に仕上げなくても大丈夫です。少しずつ手を入れて、自分のサイトに合った形に育てていくつもりで、気楽にカスタマイズを楽しんでみてください。
★初心者さん必見★ 「あと3ヶ月早くこの情報を知りたかった…」 そうならないために、今すぐ実践したいノウハウをギュッと一つのメルマガに詰め込みました。 無料で読めるうちに受け取っておいてください。
記事を読んだらコチラ
▼ ▼ ▼
