SWELLのドロップダウンメニュー設定＆カスタマイズ基本ステップ

SWELLでドロップダウンメニューを設定したいのに、「子メニューがうまく出ない」「スマホで見るとごちゃごちゃしている」と感じていませんか。

SWELLのドロップダウンメニューの設定やカスタマイズを調べているあなた向けに、できるだけ手順をかみ砕いてまとめました。

SWELLドロップダウンメニュー設定の全体像をまず押さえよう

SWELLドロップダウンメニュー設定前に確認したい3つのポイント

いきなり管理画面をいじり始めるよりも、まずは「どんなメニューにしたいか」を簡単に整理しておくと失敗が減ります。最初にチェックしておきたいポイントを表にまとめました。

確認すること	内容
メニューの目的	ブログ用なのか、事業サイトなのかなど、サイトのゴールをはっきりさせる
優先したい導線	読んでほしいカテゴリーや商品ページ、お問い合わせなどを洗い出す
階層の深さ	ドロップダウンは基本2階層までにして、迷わせない構造にする

私も昔は「とにかく全部のカテゴリーをメニューに入れておけば親切でしょ」と思っていたのですが、結果的にドロップダウンが縦に長く伸びてしまい、ほとんどクリックされない状態になりました。

SWELLでドロップダウンメニューを作る前に、「どこに案内したいのか」「どの階層まで見せるのか」をざっくりメモに書き出しておくと、そのあとがかなりラクになります。

SWELLで使うメニューの種類を理解しておく

SWELLでは、メニューまわりがいくつかの場所に分かれています。それぞれ、だいたい次のような役割です。

• グローバルナビ（ヘッダーメニュー）：PC表示で、画面上部に横並びで出るメインメニュー
• スマホ用ヘッダーメニュー・開閉メニュー：スマホでハンバーガーアイコンをタップしたときに開くメニュー
• フッターメニュー：ページ下部に表示されるリンク集

ドロップダウンとして階層をつけるのは、主にヘッダー側のメニューです。スマホでは、同じメニュー構造が「開閉式のリスト」の形で表示されるイメージになります。

この動き方だけ頭に入れておくと、「PCではドロップダウン、スマホでは開閉メニュー」という関係性がイメージしやすくなります。

メニュー構造を紙に書いてから作ると失敗しない

WordPressの「外観 > メニュー」を開く前に、紙やメモアプリで一度メニュー構造を書き出してみるのがおすすめです。例えば、こんな感じです。

• 親メニュー：ブログ / サービス / プロフィール / お問い合わせ
• 子メニュー（ブログ）：ブログトップ / カテゴリーA / カテゴリーB
• 子メニュー（サービス）：サービス一覧 / 料金表 / よくある質問

こうしておくと、SWELLのドロップダウンメニューの設定画面で、「どの項目を親にして、どれを一段下げるか」を迷わずに決められます。頭の中だけで組み立てようとすると、途中で必ずごちゃっとしてくるので、先に書き出して整理してしまいましょう。

SWELLドロップダウンメニュー設定の基本ステップ

メニューを作成してグローバルナビに割り当てる

まずは、WordPress側でメニューの「箱」を用意し、ヘッダーに表示する準備をします。ざっくりした流れは次のようになります。

• 管理画面の「外観」メニューから「メニュー」を開く
• 新しいメニュー名（例：ヘッダーメニュー）を入力して作成する
• 固定ページ・投稿・カテゴリーなどから、表示したい項目をメニューに追加する
• 画面下の「メニューの位置」で「グローバルナビ」にチェックを入れて保存する

この「メニューの位置」を指定し忘れると、いくら項目を並べてもサイト上にまったく出てこないので、最初に必ずチェックしておきたいポイントです。

ステップ	操作
1	外観 > メニューを開く
2	メニュー名を決めて新規作成する
3	ページやカテゴリーをメニューに追加する
4	「グローバルナビ」にチェックを入れて保存する

ここまで完了すると、まだドロップダウンにはなっていませんが、ヘッダーに横並びのメニューが表示されている状態になっているはずです。

子メニューを作ってドロップダウンにする

次に、ドロップダウンメニューの要となる「階層」を作っていきます。WordPressのメニュー画面では、メニュー項目をドラッグして右にずらすと、その項目が一段下の「子メニュー」として扱われます。

具体的には、次のように操作します。

例えば、「ブログ」を親メニューにするなら、その下に「ブログトップ」「カテゴリーA」「カテゴリーB」などを入れて、右に少しずらして子メニューにします。

SWELLでドロップダウンメニューを作ったのに子メニューが出てこないときは、たいていこの「右にずらす操作」ができていないか、ずらし方が中途半端で階層になっていないケースが多いです。

スマホの開閉メニューにも反映させる

ヘッダーに設定したグローバルナビのメニューは、テーマ設定によってスマホ用ヘッダーや開閉メニューにも使われます。スマホでの見え方を整えるには、外観 > カスタマイズから、スマホメニューまわりの設定も一緒に見直しておくと安心です。

スマホ表示を意識するうえで、特にチェックしておきたい点を表にまとめました。

項目	ポイント
ハンバーガーアイコン	画面右上にきちんと表示されているか、背景色と同化して見えにくくなっていないか
メニューの文字数	スマホ画面で1行に収まるくらいの長さか、テキストが長すぎて改行だらけになっていないか
階層の深さ	子メニューは2階層までに抑え、親メニューの数も絞ってタップしやすくする

スマホでは、ドロップダウンというより「タップすると中身が開くリスト」になるイメージです。PCだけで確認して終わらせず、必ずスマホ実機かプレビューで、開閉のしやすさや文字の読みやすさもチェックしておきましょう。

SWELLドロップダウンメニューのカスタマイズ例まとめ

アイコンやサブテキストでメニューをわかりやすくする

SWELLは、メニュー名の前にアイコンを表示したり、英語のサブテキストを添えたりといった「ちょっとした装飾」がしやすいテーマです。こうしたひと手間だけでも、ドロップダウンメニューの印象はけっこう変わります。

イメージしやすいように、要素ごとの例と効果を整理します。

カスタマイズ要素	具体例	効果
アイコン	本のアイコン＋「ブログ」など	ひと目で「ここは記事一覧なんだな」と伝わる
サブテキスト	「ブログ（Blog）」「サービス（Service）」など英語表記を添える	デザイン性が上がり、少しだけ洗練された印象になる
強調メニュー	色付きボタン風の「無料相談」や「お問い合わせ」	一番押してほしい導線に視線を集めやすくなる

私の場合、問い合わせや申込ページなど「ここを押してもらえると嬉しい」というメニューだけボタン風にして、他のメニューとの差をつけることが多いです。

CSSなしでできる簡単カスタマイズ

ドロップダウンメニューのカスタマイズというと、難しいコードのイメージがあるかもしれませんが、SWELLの場合は管理画面だけでできることもかなり多いです。

例えば、次のような調整はCSSなしでも可能です。

• メニュー文字のサイズや太さを、カスタマイザーで変更する
• ヘッダーの背景色や文字色を、テーマ設定から変える
• スクロール時にヘッダーを追従させるかどうかを切り替える

特に、ドロップダウン部分の背景色と文字色のコントラストはとても大事です。両方の色が似ていると、せっかくメニューが出ていても「なんか文字が読みにくいな」と感じられて、クリックされにくくなってしまいます。

ちょっとだけCSSを使うカスタマイズアイデア

もう一歩踏み込んで、CSSで雰囲気を整えるアイデアも軽く紹介しておきます。ここでは考え方だけを書きますが、「こういう方向に変えられるんだな」とイメージしてもらえれば十分です。

こうした装飾を試したいときは、いきなりテーマファイルを触るのではなく、「外観 > カスタマイズ > 追加CSS」に少しずつ書き足していくのがおすすめです。うまくいかなければ削除すれば元に戻るので、安心して試せます。

SWELLドロップダウンメニューで起きやすいトラブルと対処法

ドロップダウンメニューが表示されない・開かない

一番多いのが、「メニュー自体が表示されない」もしくは「ドロップダウンの部分だけ出てこない」というパターンです。よくある原因と、確認してほしいポイントを整理しました。

症状	よくある原因	確認ポイント
メニュー自体が出ない	メニューの位置が未設定	外観 > メニューで「グローバルナビ」にチェックが入っているか
ドロップダウンだけ出ない	子メニューになっていない	子メニューが右にずれて「サブ項目」と表示されているか
一部のメニューだけ開かない	キャッシュやプラグインの影響	キャッシュ削除や不要なプラグイン停止で挙動が変わるか

私も、キャッシュ系のプラグインを入れたあとにドロップダウンが効かなくなったことがあります。そのときは、次の順番で切り分けました。

• ブラウザのシークレットモードで表示を確認する
• それでもおかしければ、キャッシュ系プラグインを一時的に停止する
• SWELL標準機能だけの状態でメニューの動きをチェックする

この流れで確認していくと、テーマ側の問題なのか、プラグインやキャッシュの問題なのかを判断しやすくなります。

親メニューをクリックさせず、子メニューだけ使いたいとき

よくある相談として、「親メニューはクリックさせず、子メニューだけ選んでもらいたい」というものがあります。例えば、「サービス」という親メニューをクリックしても何も起こらず、その下にある「サービス一覧」「料金」「よくある質問」だけ選べるようにしたいイメージです。

この場合は、次のような考え方が使えます。

• 親メニューにダミーのリンク（「#」など）を設定して、ページ遷移しないようにする
• 親メニュー用のページは作らず、代わりに別の場所からリンクする

ただし、スマホでは親メニューをタップしたタイミングで開閉のトリガーとして動くことがあるので、「タップしてもページには飛ばない」ことをユーザーが直感的に理解できるようにしておきたいです。

例えば、親メニューの名前を「ブログ」ではなく「ブログのカテゴリー一覧」にしておくと、「ここをタップすると一覧が開くんだな」とイメージしてもらいやすくなります。

階層を増やしすぎて、メニューがごちゃごちゃしてしまう

ドロップダウンメニューは便利な反面、階層を増やしすぎると一気に使いづらくなります。特にスマホでは、3階層以上になるとほとんど迷路のようになってしまいます。

階層ごとのおすすめ度をざっくりまとめると、次のようなイメージです。

階層	おすすめ度	コメント
1階層（親メニューのみ）	◎	とてもシンプルで迷いづらい
2階層（親＋子）	○	SWELLのドロップダウンメニューでは最もバランスが良い
3階層以上	△	PCでも操作しづらく、スマホではほぼ迷子になりがち

もしすでに3階層以上のメニューになっている場合は、次のような視点で見直してみてください。

• 本当にメニューに載せる必要があるページなのか
• 記事内リンクや関連記事、パンくずリストで代わりに案内できないか
• カテゴリーを整理すると、階層をもう一段浅くできないか

「メニューで見せる情報」と「記事の中で見せる情報」を分けて考えると、ユーザーにとっても検索エンジンにとっても理解しやすいサイト構造になっていきます。

SWELLドロップダウンメニュー設定とSEO・回遊率のコツ

どのページをメニューに入れるかの優先順位

メニューに入れるページを決めるときは、「サイトのゴールから逆算する」のがおすすめです。ブログの場合なら、だいたい次のような優先度になります。

• 優先度が高いもの：収益につながる記事、サービスページ、お問い合わせページなど
• 中くらい：ブログトップ、主要カテゴリー
• 優先度が低いもの：プロフィールや細かいサブカテゴリー、雑記的なページ

全部のページをドロップダウンメニューに入れたくなりますが、「このメニューから本当に飛んでほしい場所かどうか」を一度立ち止まって考えてみると、自然とメニューがすっきりしてきます。

ブログ型・サイト型でメニュー構成を変える

サイトのタイプによって、ドロップダウンメニューの構成にも違いが出ます。代表的なパターンを整理すると、次のようなイメージです。

サイトタイプ	親メニュー例	子メニュー例
ブログ型	ブログ / カテゴリーA / カテゴリーB	各カテゴリー内の人気記事やまとめ記事
事業サイト型	サービス / 実績 / 料金 / お問い合わせ	サービス詳細ページ、導入事例、料金表
教室・サロン型	メニュー / 料金 / アクセス / 予約	コース一覧、よくある質問、キャンセルポリシー

同じSWELLでも、誰に何をしてもらいたいサイトなのかによって「ちょうどいいドロップダウンメニュー」は変わります。自分のサイトをどのタイプに近いか当てはめて、「このメニュー構成でユーザーは迷わずゴールまで行けそうか」を考えてみてください。

分析しながらSWELLドロップダウンメニューを改善する

ドロップダウンメニューは、一度作ったら終わりではなく、アクセス解析を見ながら少しずつ改善していくのが理想です。

例えば、次のような点をチェックできます。

• メニューからのクリックが極端に少ないページはないか
• ドロップダウンの一番下のほうにある項目は、ほとんどクリックされていないのではないか
• PCとスマホで、よく押されているメニューが違っていないか

クリックされていないメニューは、

• 配置を見直して、より目立つ位置に移動する
• メニュー名の文言を、ユーザー目線でわかりやすい表現に変える
• 思い切ってメニューから外し、記事内やバナーなど別の導線を用意する

といった形で、少しずつ入れ替えていくとよいです。「なんとなくずっと同じメニュー」ではなく、「ちゃんと使われているメニュー」になるように、時々見直してあげるイメージですね。

SWELLドロップダウンメニューに関するよくある質問

Q1. SWELLでドロップダウンメニューを設定したのに、スマホでうまく表示されません

A1. SWELLでは、PC用のグローバルナビとスマホ用のメニューの関係をきちんと理解しておくことが大事です。スマホだけうまく表示されないときは、次の点を順番に確認してみてください。

• 外観 > メニューで、メニューの位置に「グローバルナビ」などがきちんとチェックされているか
• カスタマイザーで、スマホ用ヘッダーや開閉メニューを非表示にしていないか
• キャッシュ系プラグインや表示速度系プラグインの影響を受けていないか

この3つを見直すだけでも、スマホでのドロップダウン表示が戻るケースはかなり多いです。

Q2. SWELLのドロップダウンメニューの色やフォントだけ、簡単に変えられますか？

A2. はい、色やフォントの調整だけなら、カスタマイザーの設定だけで十分対応できます。例えば、次のような項目はCSSを書かなくても調整可能です。

• 全体のフォント種類や文字の太さ
• ヘッダーやメニューの背景色
• ホバー時の文字色や背景色

細かい余白や角丸など、より細部にこだわりたくなったときだけ、追加CSSを使うイメージでOKです。最初から無理にコードに挑戦しなくても、十分見やすいメニューにできます。

Q3. SWELLでドロップダウンメニューを使うと、SEOに悪影響はありますか？

A3. ドロップダウンメニューを使うこと自体が、SEO的にマイナスになることは基本的にありません。それよりも、「どんなページをメニューに置くか」「ユーザーが迷わず移動できるか」といった設計のほうが重要です。

ドロップダウンメニューをうまく設計できれば、

• ユーザーが目的のページにたどり着きやすくなり、滞在時間が伸びる
• 関連するページを行き来しやすくなり、ページビューが増える

といった良い変化が期待できます。逆に、階層を増やしすぎてごちゃごちゃすると、ユーザーが疲れて離脱してしまうので、その点だけ注意しておきましょう。

SWELLドロップダウンメニュー設定のまとめ

ポイントを簡単に振り返っておきます

今日からできる最初の一歩としては、まず紙やメモアプリに「理想のメニュー構造」を書き出してみてください。そのメモを片手に、WordPressの「外観 > メニュー」を開いて、親メニューと子メニューを組み立てていけば、今よりずっと使いやすいドロップダウンメニューが作れるはずです。

一度ていねいに整えておくと、SWELLのドロップダウンメニューはあなたのサイトの「案内係」として、長く活躍してくれます。