スマホで自分のサイトを見たとき、「メニューがちょっとダサいな」「もっとスッキリ見せたいな」と感じたことはありませんか。
この記事では、Swellのハンバーガーメニューをカスタマイズするときに押さえておきたい基本から、メニューの中身の作り方、デザイン調整のポイント、トラブル対処まで、順番にかみ砕いてお話ししていきます。
ブログ収益化の教科書プレゼント
↓ ↓ ↓
Swellハンバーガーメニューをカスタマイズする前に知っておきたい基本
まずは、Swellで使われるスマホ用のハンバーガーメニューがどんな仕組みになっているのかをサクッと整理しておきます。ここが曖昧なままCSSだけ触ってしまうと、「どこを変えているのか分からないのに表示だけ崩れた」ということになりやすいので、最初に軽く全体像をつかんでおきましょう。
SWELLのスマホ開閉メニュー（ハンバーガーメニュー）の仕組み
Swellでは、スマホ表示時にヘッダー右上あたりに三本線のボタンが表示されます。
このボタンをタップすると、画面の上や横からメニューがスッと現れる仕組みになっていて、テーマ内では「スマホ開閉メニュー」や「スマホメニュー」と呼ばれています。一般的なハンバーガーメニューと同じイメージです。
このスマホメニューは、おおまかに次の3つのパーツでできています。
| 要素 | 役割のイメージ |
|---|---|
| ハンバーガーボタン | 三本線のボタン本体。タップするとメニューが開閉する部分 |
| メニューの中身 | リンクやボタンの一覧。どのページへ誘導するかを決める場所 |
| 背景・オーバーレイ | メニュー展開時に画面をうっすら暗くして、メニューに目線を集める背景 |
この3つはそれぞれ別々に調整できるので、「ボタンだけ色を変える」「中身のレイアウトだけ作り込む」「背景だけ少し暗くする」といったカスタマイズができます。
設定の入り口としてよく触るのは、次のあたりです。
- 外観 ＞ カスタマイズ ＞ サイト全体設定 ＞ スマホ開閉メニュー
- 外観 ＞ カスタマイズ ＞ ヘッダー（ロゴやハンバーガーボタンの位置など）
「このあたりでスマホメニューをいじるんだな」と頭の中に地図を作っておくだけでも、カスタマイズのハードルがぐっと下がります。
カスタマイズ前にやるべきSWELL側の初期設定
いきなりCSSを書き始める前に、まずはSwell本体の設定だけでシンプルな状態を作っておくのがおすすめです。
テーマ側でついている装飾が強すぎると、あとから書くCSSとぶつかって、意図しない崩れが起こりやすくなるからです。
具体的には、次のようなところを先に整えておくと安心です。
- スマホ開閉メニューの背景色や不透明度を、白や黒など分かりやすい色にしておく
- オーバーレイの色と濃さを調整し、メニューと背景のコントラストを確認しておく
- ハンバーガーボタン下の「MENU」テキストを表示するかどうか決めておく
- スマホ時のヘッダーレイアウト（ロゴとボタンの位置）を実機で確認しておく
私自身は、最初は白い背景に黒い文字くらいのシンプルな状態で形を整えて、そのあとでブランドカラーや背景画像を足していくことが多いです。
見た目を派手にするのはいつでもできるので、まずは「読める」「押せる」「迷わない」の3つをクリアすることを優先してみてください。
【深呼吸タイム】 稼ぐために必要な3つのポイントを知っていますか？ これら全部を暴露します。
Swellハンバーガーメニューの中身をカスタマイズする具体的な手順
続いて、ハンバーガーメニューの「中身」をどう作るかを考えていきます。見た目のデザインよりも先に、「どのページへのリンクをどう並べるか」を決めておくと、あとでメニュー全体がぐっと使いやすくなります。
WordPressメニューでスマホ専用メニューを作る
まずはWordPress標準の「メニュー機能」を使って、スマホ用のメニューを用意します。
これはSwellに限らず、WordPressサイトであれば共通して使える機能です。
流れとしては、次のようなステップになります。
- 外観 ＞ メニューを開き、「スマホ用メニュー」など分かりやすい名前で新規作成
- 固定ページ、投稿、カテゴリ、カスタムリンクを追加して並び順を決める
- 階層は深くしすぎない（スマホでは2階層くらいまでが目安）
- 表示する場所として「スマホ開閉メニュー内」など、スマホ向けの位置にチェックを入れる
入れる項目はサイトのタイプによって変わりますが、代表的な例をまとめるとこんなイメージです。
| サイトのタイプ | メニューに入れたい主な項目 |
|---|---|
| 個人ブログ・雑記ブログ | トップ、プロフィール、人気記事、カテゴリ一覧 |
| アフィリエイトブログ | トップ、ランキング、ジャンル別一覧、レビュー・比較記事一覧 |
| 店舗・教室サイト | 料金・メニュー、予約・問い合わせ、アクセス、よくある質問 |
| 制作会社・フリーランス | サービス内容、制作実績、料金表、プロフィール、お問い合わせ |
スマホのハンバーガーメニューは、画面を開かないと中身が見えません。
その分、「本当に必要なリンクだけを入れる」「初めての人が迷わない並び順にする」という意識が大事になります。
私が運営しているブログでも、メニューから項目を減らしただけで、読んでほしい記事へのクリックが明らかに増えたことがあるので、欲張りすぎないのはかなり効きます。
ブログパーツとウィジェットで中身を自由にデザイン
Swellの強みは、ブログパーツとウィジェットを組み合わせることで、スマホメニューの中身をかなり自由に作り込めるところです。
WordPress標準のメニューだけでは単純な縦並びが中心になりますが、ブログパーツを使うと、ボックス型のメニューやアイコン付きのボタンなど、ブロックエディタの感覚でレイアウトを組めます。
ざっくりした手順は次のとおりです。
- 「ブログパーツ」で新規追加し、スマホメニュー専用のブロックを作る
- テキストやボタン、アイコン、ボックスなどを使ってデザインを整える
- 保存して、ブログパーツのショートコードを控えておく
- 外観 ＞ ウィジェットの「スマホ開閉メニュー下」エリアにウィジェットを追加
- カスタムHTMLなどのウィジェット内にショートコードを貼り付けて保存
この方法なら、例えば次のようなスマホメニューが作れます。
- カテゴリをカード型のボックスで3列に並べた、ビジュアル重視のメニュー
- 著者写真と自己紹介、SNSアイコンをまとめた「プロフィールメニュー」
- よくある質問をアコーディオンで開閉できるFAQメニュー
最初はシンプルなテキストリンクだけでもOKですが、「ちょっと差別化したいな」と思ったときは、ブログパーツを使ったハンバーガーメニューのカスタマイズにチャレンジしてみてください。
【ちょっと一息♪】 私の妻がどうやって7日で初報酬を得て5万円の不労所得を得られるようになったか？
その全貌を知りたくありませんか？
CSSでハンバーガーメニューのデザインをカスタマイズする
ここからは、Swellのハンバーガーメニューの見た目をCSSでカスタマイズするときの考え方を整理していきます。細かいコードはサイトごとに調整が必要なので、ここでは「どの部分をいじると、どんな変化が起こるか」をイメージできるようにすることを目標にしてもらえればOKです。
ハンバーガーボタン（3本線）を整えるCSSのポイント
スマホメニューの入口になるハンバーガーボタンは、ユーザーの目に一番入りやすいパーツです。
デフォルトでも十分使えますが、少しだけカスタマイズするだけで、サイト全体の印象がぐっと変わります。
よく調整されるのは、次のような部分です。
| 調整する部分 | 変えるとどう見え方が変わるか |
|---|---|
| 線の太さ | 太くするとポップな印象、細くするとスタイリッシュな印象になる |
| 線の長さ | 長いほど存在感が増し、短いほど控えめでコンパクトな雰囲気になる |
| 線の間隔 | 狭いとぎゅっと詰まった印象、広いとゆったりとした印象になる |
| 色 | ブランドカラーに合わせると、サイト全体の世界観がそろう |
| ホバー・タップ時の色 | 色が変わると「ここは押せるボタンだ」と直感的に伝わる |
よくあるカスタマイズとしては、次のようなものがあります。
- ハンバーガーボタンの色をブランドカラーに変更する
- タップ時に少し色を濃くして、押した感覚を分かりやすくする
- メニューを開いたときは三本線を「×」マークに変える
追加CSSにいきなり大量のコードを書くのではなく、まずは「色だけ変えてみる」「太さだけ変えてみる」と、1項目ずつ試していくと安心です。
変更するたびにスマホ実機やブラウザの検証ツールで表示を確認しながら、少しずつ理想の形に近づけていきましょう。
メニューエリア全体の色・余白・リンクスタイルを整える
ハンバーガーボタンがきれいでも、メニューの中身が読みづらいとユーザーはすぐ離れてしまいます。
Swellのハンバーガーメニューをカスタマイズするときは、メニューエリア自体の「読みやすさ」と「押しやすさ」もセットで整えるのがおすすめです。
特にチェックしたいのは、次のようなポイントです。
- 背景色と文字色のコントラストは十分か（薄い色同士の組み合わせになっていないか）
- 各メニュー行の上下の余白は、指でタップしやすい広さになっているか
- リンクにホバー時やタップ時の変化（色・下線など）はついているか
- アイコンとテキストのサイズバランスは崩れていないか
私がよくやるのは、実際に片手でスマホを持って、親指だけでメニューを触ってみることです。
そのときに「ここに大事なメニューがあると押しにくいな」「この文字サイズだとギリギリ読めるけど疲れるな」と感じた部分は、余白やフォントサイズを微調整してあげると、体感としての使いやすさが一気に変わります。
★ちょっとだけ宣伝させてください★ 「ブログで10万」と聞くと、 と思われがちですが、実は「勝ちパターン」を知っているかどうかだけなんです。
PCでもSwellハンバーガーメニューを使いたいときのカスタマイズ
最近は、スマホだけでなくPCでもハンバーガーメニューを採用するサイトが増えています。Swellの標準ではスマホ表示時にハンバーガーメニューが使われますが、CSSの調整やヘッダー設定の工夫で、PCでも似たようなレイアウトに寄せることができます。ここでは、実際に実装するかどうかを判断するための考え方を中心に整理します。
PC表示でハンバーガーメニューを出すときの考え方
PCでもハンバーガーメニューを出す場合、見た目のかっこよさだけで決めると、あとで使い勝手の面で困ることがあります。
メリットと注意点を、ざっくりと表にしておきます。
| 観点 | メリット | 注意点 |
|---|---|---|
| デザイン性 | ヘッダーをすっきりさせやすく、ミニマルな印象にしやすい | メニューが隠れるため、ユーザーによっては気づきにくい |
| ファーストビュー | メインビジュアルやキャッチコピーを大きく見せられる | 重要ページへの導線までのクリック数が増える可能性がある |
| 実装コスト | CSSの調整だけで対応できるケースも多い | テーマのアップデートや他のカスタマイズとの相性を確認する必要がある |
【稼げるキーワード教えます】
▼ ▼ ▼
特に、サービスサイトやポートフォリオサイトでは、ヘッダーをシンプルにして世界観を出したい場面が多いので、PCのハンバーガーメニューとの相性はかなり良いです。
一方で、記事をたくさん読んでもらいたいブログでは、最初からカテゴリやメニューが見えているほうが親切なこともあります。
自分のサイトの目的や読者の行動をイメージしながら、「PCまでハンバーガーにするかどうか」を決めるのがポイントです。
PC×スマホでメニュー表示を分けるときの注意点
「PCではグローバルメニュー」「スマホではハンバーガーメニュー」というように、デバイスごとにメニュー表示を分けるケースも多いと思います。
Swellはヘッダー設定やメニューの割り当てである程度出し分けできるので、そのときに意識しておきたいポイントをまとめておきます。
- PCとスマホでメニュー内容が違いすぎないようにする（別サイトに見えないように）
- どのデバイスから見ても、重要ページへは2クリック以内で行ける構成にする
- メニューの文言は短く、意味が直感的に分かる日本語にそろえる
- PCだけに入れるメニュー、スマホだけに入れるメニューを事前に決めておく
私がよくやるのは、「スマホでは削ってもいいけれど、PCでは欲しいメニュー」をメモに書き出しておくことです。
そのうえで、Swellのヘッダー設定とWordPressメニューの組み合わせを調整すると、見せたい情報を整理しながらハンバーガーメニューのカスタマイズが進められます。
サイトタイプ別Swellハンバーガーメニュー構成アイデア
ここからは、実際にSwellのハンバーガーメニューを作り込んでいくときの「型」をいくつか紹介します。自分のサイトに近いパターンをベースにして、細かい部分だけアレンジしていくと、ゼロから考えるよりもスムーズに進められます。
ブログ・アフィリエイト向けのメニュー構成例
個人ブログやアフィリエイトサイトでは、「どの記事にたどり着いてほしいか」がはっきりしていることが多いです。
ハンバーガーメニューでは、初めて来た人が迷子にならずに、読みどころや収益記事に自然と誘導される構成を意識してみましょう。
代表的なメニュー構成を表にまとめると、次のようになります。
| メニュー項目 | 目的・役割 |
|---|---|
| トップページ | 迷ったら戻れる場所。サイト全体の入口を用意する |
| プロフィール | 誰が書いているのか伝え、読者の安心感や信頼感を高める |
| 人気記事 | 初めての人に、まず読んでほしい記事へと誘導する |
| カテゴリ一覧 | 興味のあるジャンルを自分で選んで読み進めてもらう |
| おすすめまとめ | 収益性の高いまとめ記事や厳選レビューへ誘導する |
| お問い合わせ | お仕事の相談や質問の窓口を分かりやすく用意する |
私の場合、「人気記事」と「おすすめまとめ」を別枠で用意することが多いです。
人気記事はアクセスの多い記事、まとめは自分が特に読んでほしい記事、というように役割を分けると、ハンバーガーメニューでの導線設計がぐっとやりやすくなります。
店舗・教室・サービスサイト向けのメニュー構成例
お店や教室、サービスサイトでは、ユーザーが知りたい情報がある程度決まっています。
ハンバーガーメニューのカスタマイズでは、「問い合わせや予約につながりやすいリンクから優先して並べる」のが基本です。
よく使われる構成を表にすると、次のようなイメージになります。
| メニュー項目 | 目的・役割 |
|---|---|
| メニュー・料金 | まず値段や内容を知りたい人に、必要な情報をまとめて届ける |
| 予約・お問い合わせ | 電話・フォーム・公式LINEなど、行動につながる窓口をまとめる |
| アクセス | 住所や地図、駐車場、最寄り駅からの行き方を分かりやすく見せる |
| 営業日・営業時間 | いつやっているかを一目で伝え、問い合わせ前の不安を減らす |
| スタッフ紹介 | 顔や人柄を見せて、初めての人でも安心して来店できるようにする |
| よくある質問 | 料金やキャンセルなどの疑問を事前に解消して予約につなげる |
スマホのハンバーガーメニューから直接電話をかけられるように、「電話する」ボタンを目立つ位置に置いておくのも効果的です。
特に飲食店やサロンでは、「電話」「地図」など、行動に直結するボタンをメニューの上のほうに置くだけで、予約や来店につながる確率が変わってきます。
★ブログでは公開できない裏情報★ 例えば、 などをこっそり暴露しています。ぜひ公開停止する前に受け取ってください。
私の発行するメルマガではブログでは公開できない秘匿性が高い特別な情報を発信しております。
Swellハンバーガーメニューをカスタマイズするときの注意点とトラブル対処
ここでは、実際にSwellのハンバーガーメニューをカスタマイズするときに起こりがちなトラブルと、その防ぎ方をまとめておきます。事前に知っておくだけでも焦りにくくなるので、軽く目を通してから作業を始めるのがおすすめです。
ハンバーガーメニューが開かないときのチェックリスト
よくあるのが、「カスタマイズしたらハンバーガーボタンを押しても何も起きなくなった」「メニューの中身が真っ白のまま」というパターンです。
いきなりテーマのバグを疑う前に、次のようなポイントを順番にチェックしてみてください。
| 症状 | よくある原因 | まず試したい対処 |
|---|---|---|
| ボタンを押しても何も起きない | メニュー位置の設定ミス、JavaScript系プラグインとの相性 | メニューの割り当てを確認し、怪しそうなプラグインを一時停止する |
| メニューの中身が空っぽに見える | スマホ用に紐づくメニューがそもそも作られていない | 外観 ＞ メニューで「スマホ開閉メニュー内」に設定されたメニューを確認する |
| デザインが崩れて文字が読めない | 追加CSSの指定が強すぎて、テーマのスタイルと衝突している | 追加CSSを一度すべてコメントアウトして、崩れが直るか確認する |
| PCだけ表示がおかしい | メディアクエリ（画面幅条件）の記述ミス | min-widthやmax-widthの値が正しいか、対象の画面幅を見直す |
| カスタマイズ前の状態に戻らない | どこを触ったのか分からなくなっている | 追加CSSを一旦削除・退避し、ブラウザキャッシュをクリアして確認する |
私もよくやるのが、「まず追加CSSをすべてコメントアウトしてみる」という方法です。
それで直るなら、書いたCSSのどこかが原因なので、少しずつ戻していくことで問題の箇所を特定できます。
アップデートやプラグイン変更に強いカスタマイズにするコツ
Swellはテーマとしてのアップデートもしっかり行われているので、せっかく整えたハンバーガーメニューのカスタマイズが、更新で崩れてしまうのは避けたいところです。
長く付き合えるカスタマイズにするために、次のポイントを意識してみてください。
- テーマファイルを直接編集せず、追加CSSや子テーマでカスタマイズする
- セレクタはなるべくシンプルにし、!importantの多用は避ける
- 共通パーツには共通のクラス名を付けて、無駄な重複指定を減らす
- 大きく見た目を変えるときは、変更前のスクリーンショットを残しておく
- JavaScriptをいじる系のプラグインは増やしすぎない
私は、カスタマイズ内容をメモアプリなどに簡単に残しておくようにしています。
「いつ、どのコードを、何のために入れたのか」が分かるだけでも、あとから見直すときの不安がかなり減ります。
★初心者さん必見★ 「あと3ヶ月早くこの情報を知りたかった…」 そうならないために、今すぐ実践したいノウハウをギュッと一つのメルマガに詰め込みました。 無料で読めるうちに受け取っておいてください。
Swellハンバーガーメニュー カスタマイズのよくある質問
最後に、Swellのハンバーガーメニューをカスタマイズするときによく聞かれる質問を、Q&A形式でまとめておきます。同じような疑問を持っていたら、このあたりも参考にしてみてください。
Q1. Swellハンバーガーメニュー カスタマイズは、初心者でもやって大丈夫？
完全な初心者でも、Swellのカスタマイザー操作に慣れていれば、ハンバーガーメニューのカスタマイズには十分チャレンジできます。
いきなり凝ったアニメーションを付けようとするのではなく、次のようなステップで少しずつ慣れていくのがおすすめです。
- スマホ開閉メニューの基本設定を整える（色・背景・オーバーレイなど）
- WordPressメニューで、スマホ用の中身を決める
- ハンバーガーボタンの色や線の太さだけ、シンプルに変えてみる
- メニューエリアの背景色や文字色、余白を整える
この段階でも、かなり「自分のサイトらしいメニュー」になります。
小さな変更から始めて、慣れてきたら少しずつSwellハンバーガーメニュー カスタマイズの範囲を広げていくと、楽しく続けやすいと思います。
Q2. Swellハンバーガーメニューをカスタマイズすると、SEOに悪影響はない？
Swellのハンバーガーメニューをカスタマイズしたからといって、それ自体が直接SEOに悪影響を出すことは基本的にありません。
むしろ、スマホから重要なページにたどり着きやすくなることで、回遊性や滞在時間が良くなり、結果的にはプラスに働くことも多いです。
気をつけたいのは、次のような点です。
- 重要なページをメニューから完全に消してしまわない
- 画像やアイコンだけに頼らず、テキストリンクもきちんと用意する
- 文字が小さすぎたり、色が薄すぎたりして読みにくくなっていないか確認する
検索エンジンのためというより、「初めて来た人がストレスなく目的のページにたどり着けるか」を基準にSwellのハンバーガーメニューをカスタマイズしていけば、大きく間違うことはありません。
Q3. Swellハンバーガーメニューでやりすぎたカスタマイズはどこまで戻せる？
追加CSSや子テーマで行ったSwellハンバーガーメニューのカスタマイズであれば、基本的にはいつでも元の状態に戻せます。
追加CSS欄のコードを消したり、コメントアウトしたりすれば、テーマ標準のデザインに戻るからです。
注意したいのは、テーマファイルそのものを書き換えている場合や、プラグインでテンプレートを上書きしている場合です。
この場合は、どのファイルをどのように触ったのかを覚えていないと復元が難しくなります。
不安であれば、Swellハンバーガーメニュー カスタマイズの前に、必ずバックアップを取っておくことをおすすめします。
Swellハンバーガーメニュー カスタマイズのまとめ
この記事の要点を整理しておきます
- Swellのハンバーガーメニューは「ボタン」「中身」「背景」に分けて考えるとカスタマイズしやすいです。
- 中身の構成は、WordPressメニューとSwellのブログパーツ＋ウィジェットを組み合わせることで、かなり自由に作れます。
- CSSでの調整は、色や太さ、余白などの基本から始めて、慣れてきたらアニメーションやPC表示への応用に広げていくのが安全です。
- PCでもハンバーガーメニューを使うかどうかは、デザイン性と分かりやすさのバランスを見て決めるのがポイントです。
- 追加CSSや子テーマを上手に使い、バックアップとメモを取りながら進めると、アップデートにも強いカスタマイズになります。
今日からできる最初の一歩としては、「今のメニュー構成」と「理想のメニュー構成」を紙やメモアプリに書き出してみてください。そのうえで、Swellのカスタマイザーを開き、スマホ開閉メニューの中身と色を少しだけ整えてみましょう。
それだけでも、Swellのハンバーガーメニューを自分のサイトに合わせてカスタマイズしていく感覚がつかめてくるはずです。
慣れてきたら、この記事で紹介したアイデアを一つずつ取り入れて、自分だけのスマホメニューを育てていってください。
【深呼吸タイム】 稼ぐために必要な3つのポイントを知っていますか？ これら全部を暴露します。
記事を読んだらコチラ
▼ ▼ ▼
