SWELL ドロップダウンメニュー完全ガイド！スマホ設定も解説

2025-11-26

こんにちは。hakubi code 代表のてらだです。

SWELLを使ってWebサイトを制作していると、ヘッダー周りのメニュー設定、特に「ドロップダウンメニュー」の挙動やデザインで迷うことって結構ありますよね。

「PCではマウスホバーでシュッと出したいけど、スマホではタップで展開するアコーディオンにしたい」
「メニューの下に英語をおしゃれに入れたいけど設定場所どこ？」

みたいな悩み、すごく分かります。私自身、クライアントワークで何度もこの設定を行ってきましたが、SWELLは機能が豊富な分、設定箇所が分散していて、慣れるまでは少し戸惑うポイントかもしれません。

実は、SWELLのドロップダウンメニューは、WordPress標準の機能をベースにしつつ、SWELL独自のカスタマイザー設定を組み合わせることで、驚くほど柔軟なナビゲーションを作ることができるんです。これを使いこなせれば、ユーザーにとって分かりやすいサイト構造（SEOにも効きます！）と、プロっぽい見た目を両立できます。

この記事では、Web制作の現場で私が実際にやっている「鉄板の設定手順」をベースに、初心者の方がつまずきがちなポイントや、CSSを使った一歩進んだカスタマイズ術まで、余すところなく共有しますね。「メニューが表示されない！」というトラブル解決策も網羅しているので、ぜひ参考にしてください。

WordPress標準機能を使った、SEOに強い正しい階層構造の作り方
スマホユーザーの離脱を防ぐ、タップで開閉するアコーディオン設定の完全手順
サイトのブランド力を高める、英語サブタイトル表示や配色のカスタマイズ術
「メニューが出てこない」「開かない」時の原因切り分けと具体的な解決策

SWELLのドロップダウンメニュー設定と基本の手順

まずは、PCサイトにおけるグローバルナビゲーションのドロップダウン設定から解説していきます。
「SWELL専用の管理画面があるのかな？」と思われがちですが、ベースとなるのはWordPress本体の「メニュー」機能です。ここを正しく理解して設定することが、SWELLで美しいドロップダウンを実現するための土台になります。基本をおろそかにすると、後で「スマホで表示がおかしい」といったトラブルに繋がるので、しっかり押さえておきましょう。

グローバルナビで階層を作るやり方

ドロップダウンメニュー（親メニューにカーソルを合わせると子メニューが出てくる仕組み）を作るための操作は、実は非常にアナログでシンプルです。
WordPressの「外観」＞「メニュー」画面で行う「ドラッグ＆ドロップ」による階層化（インデント）がすべての鍵を握っています。複雑なコードを書く必要は一切ありません。

ウェブサイトの上部に「ホーム」「会社概要」「事業内容」「コラム」「お問い合わせ」の5つのグローバルナビゲーションメニュー、下部に白い背景で「子テーマ①」「子テーマ②」の親メニュー項目と、右側に「子テーマ③」が接続されたドロップダウンサブメニュー構造が表示されたウェブサイトナビゲーション階層図 — 完成イメージ

具体的な設定手順は以下の通りです。一手順ずつ確認しながら進めてみてください。

WordPress管理画面の左側サイドバーメニュー。上部に赤い枠線で強調された「外観」メニュー項目から、右側にドロップダウン展開された「テーマ」「パターン」「カスタマイズ」「ウィジェット」「メニュー」「テーマファイルエディター」サブメニューが日本語で表示された管理画面インターフェース

メニュー編集画面を開く WordPressの管理画面サイドバーから「外観」＞「メニュー」をクリックします。まだメニューを作成していない場合は、「新しいメニューを作成しましょう」リンクから、メニュー名（例：PC用グローバルナビ）を入力して新規作成してください。
項目を追加する 左側のパネル（固定ページ、投稿、カスタムリンク、カテゴリーなど）から、ナビゲーションに表示させたいページにチェックを入れ、「メニューに追加」ボタンを押します。追加された項目は、右側の「メニュー構造」エリアに一列に並びます。

WordPress メニュー管理画面。上部に赤い枠線と矢印で「右へずらす（サブ項目化）」アノテーション付きのメニュー構造。左側の赤い縦線で階層を示し、「ホーム」「会社概要」の親メニューから、インデント付きで「小メニュー①サブ項目」「小メニュー②サブ項目」「小メニュー③サブ項目」の子メニュー、下部に「事業内容」セクションが階層的に配置された日本語メニューカスタマイズ手順イラスト

階層化（親子関係）を作る ここが最重要ポイントです。子メニュー（ドロップダウンで表示させたい項目）にしたいパネルをマウスでドラッグし、親メニューにしたい項目の「真下」かつ「一段右側」にずらしてドロップします。
「副項目」の表示を確認する 正しくドラッグ＆ドロップができると、ずらした項目の名前の横に「サブ項目」という薄い文字が表示されます。これが出ていれば、WordPressが「これは子メニューだな」と認識した証拠です。さらに孫メニュー（3階層目）を作りたい場合は、さらに右にずらします（ただし、UXの観点から3階層以上はあまりおすすめしません）。

階層レベル	PCでの挙動	推奨する使い方
親項目（第1階層）	常にヘッダーに表示される	カテゴリーの親や主要ページ（Top, Service, Contactなど）
子項目（第2階層）	親にホバーすると展開	具体的なサービス内容、詳細カテゴリーなど
孫項目（第3階層）	子にホバーすると横に展開	情報量が極端に多い場合のみ使用（通常は避けるのが無難）

設定後の重要チェック：
メニュー構造を作り終えたら、必ず画面下部の「メニュー設定」セクションにある「メニューの位置」で「グローバルナビ」にチェックを入れてから「メニューを保存」してください。このチェックを忘れると、いくら完璧な階層構造を作ってもサイト上には一切表示されません。初心者が一番やりがちなミスNo.1なので要注意です。

この「右にずらす」という操作だけで、SWELLのテーマ機能が自動的に階層構造を読み取り、PC画面ではマウスホバーによるドロップダウン展開を実装してくれます。プラグインなどは一切不要です。

メニュー下に英語の説明を表示する方法

SWELLのデモサイトやお洒落なブログでよく見かける、メニューの日本語タイトルの下に小さく英語（例：HOME, CONCEPT, NEWS, CONTACT）が表示されているデザイン。これ、すごく洗練された雰囲気が出ますよね。これを実装するには、WordPressの隠れた機能である「説明（Description）」フィールドを使用します。

ウェブサイトのナビゲーションメニューバー。「ホーム」「会社概要」「事業内容」「コラム」「お問い合わせ」の5つのメニュー項目が表示され、「ホーム」がアクティブ状態（赤い四角枠で強調）で選択されている実装メニューの表示例を示す写真 — 完成イメージ

「そんな入力欄、どこにもないけど？」と思った方、正解です。実はデフォルトの状態では、この入力欄は非表示になっているんです。以下の手順で掘り起こす必要があります。

1. 「表示オプション」でフィールドを有効化する

WordPressフロントエンド画面の上部管理バー。左側に「こんにちは、hakubicode さん」の挨拶テキストが表示され、中央に赤い四角枠で強調された「表示オプション」ドロップダウンメニューボタン、右側に「ヘルプ」ドロップダウンボタンが配置されたWordPress管理ツールバー

WordPress メニュー管理画面の「画面上の要素」セクション。「固定ページ」「投稿」「LP」「カスタムリンク」「カテゴリー」「タグ」のチェックボックスオプション、および「詳細メニュー設定」の「リンクターゲット」「タイトル属性」「CSS クラス」「自分とリンク先の関係(XFN)」「説明」（赤い四角枠で強調）が表示され、右側に「表示オプション」ドロップダウンボタンが配置されたメニュー表示設定インターフェース

メニュー編集画面の最上部、右上に「表示オプション」という小さなタブがあります。これをクリックして展開してください。ずらっと並んだチェックボックスの中に「説明」という項目があるので、これにチェックを入れます。これで準備完了です。

2. 英語テキストを入力する

チェックを入れた状態で、各メニュー項目の右端にある「▼」をクリックして詳細パネルを開いてみてください。先ほどまではなかった「説明」というテキストエリアが出現しているはずです。

WordPressメニュー項目編集フォーム。「ホーム」メニュー項目の設定画面に、「URL」フィールド（ハッシュ記号「#」入力），「ナビゲーションラベル」フィールド（「ホーム」入力）、「説明」フィールド（赤い枠線で強調）に「HOME」と入力された状態が表示される。下部に「現在のテーマが対応している場合、説明がメニューに表示されます」と説明文が記載されたメニューアイテム設定UI

ここに、表示させたい英単語を入力します。

ホーム → HOME
お問い合わせ → CONTACT
サービス紹介 → SERVICE
会社概要 → ABOUT US

入力したら、忘れずに「メニューを保存」ボタンを押してください。SWELLはこの「説明」フィールドに入力されたテキストを自動的に取得し、グローバルナビのメインテキスト（日本語）の下に、小さめのフォントサイズ（英語）でレイアウトしてくれます。

デザインのコツ：
入力する英語は、すべて「大文字（UPPERCASE）」で統一するか、あるいは「先頭だけ大文字（Capitalize）」にするか、ルールを決めておくと統一感が出ます。個人的には、小さく表示されるサブテキストはすべて大文字（ALL CAPS）にすると、視認性が高く、デザインのアクセントとして綺麗にまとまるのでおすすめです。

背景色や文字色をカスタマイズする

ドロップダウンメニューの色味は、サイト全体の印象を大きく左右します。SWELLでは、CSSを書かなくても「カスタマイザー」から直感的に色を変更できるようになっています。ブランドカラーに合わせて調整しましょう。

設定場所は、「外観」＞「カスタマイズ」＞「ヘッダー」の中にあります。少し下にスクロールすると、メニュー周りの色設定項目が出てきます。

主要な設定項目と配色の考え方

ヘッダー背景色
- ナビゲーションバー全体の色です。ここを白（#ffffff）にするか、黒（#333333）にするか、あるいはブランドカラーにするかでサイトの雰囲気がガラッと変わります。
ヘッダー文字色
- リンクテキストの色です。背景色とのコントラスト比（明度差）を十分に確保することが重要です。
ドロップダウンメニューの背景色
- 子メニューが展開した時の背景色です。「ホワイト」か「メインカラー」を選ぶことができます。ヘッダー背景色と同じにするのが一般的ですが、あえて少し濃い色や薄い色にして、メインメニューとの区別をつけるテクニックもあります。

ここで一点、Web制作のプロとして特に注意してほしいのが「色のコントラスト比」です。デザイン性を重視して「薄いグレーの背景に、濃いグレーの文字」のような組み合わせにすると、視力の弱いユーザーや、屋外でスマホを見ているユーザーにとって非常に読みづらくなってしまいます。

Webアクセシビリティ（誰にでも使いやすいWebサイトであること）の観点からも、背景色と文字色のコントラスト比は「4.5:1」以上確保することが推奨されています。これはSEOの観点からも、ユーザビリティシグナルとして間接的に評価されるポイントです。

（出典：ウェブアクセシビリティ基盤委員会（WAIC）『コントラスト (最低限) の達成基準 1.4.3 を理解する』）

SWELLのカスタマイザーには「ヘッダー文字色（ホバー時）」などの設定はないため、もしマウスを乗せたときの色変化などを細かく指定したい場合は、後述するCSSでのカスタマイズが必要になりますが、基本的にはこの標準設定だけで十分きれいなメニューが作れます。

ドロップダウンが表示されない時の対処

「手順通りにやったはずなのに、サイトを見てもドロップダウンメニューが出てこない！」これ、SWELL初心者あるあるです。焦らずに以下のポイントを順番にチェックしてみてください。9割以上の確率で解決します。

チェック1：インデント（字下げ）が正しくできているか？

メニュー編集画面を見て、子メニューにしたい項目が親項目の「真下」に揃って並んでいませんか？これだとただの「並列のメニュー」です。しっかりとマウスでドラッグして右にずらし、点線の枠が階段状になっていること、そして項目名の横に「副項目」と出ていることを再確認してください。

チェック2：メニューの位置設定は正しいか？

これが一番多いミスかもしれません。SWELLには複数のメニュー位置がありますが、PCでドロップダウンを表示できるのは基本的に「グローバルナビ」です。

グローバルナビ：PCヘッダーのメインメニュー。ドロップダウン対応。
スマホ用ヘッダー：スマホ画面の上部に固定される帯状メニュー。ここはドロップダウン非対応です。
フッターメニュー：ページ最下部。ここもドロップダウンはしません。

「スマホ用ヘッダー」にチェックを入れて、「スマホでドロップダウンが出ない」と悩んでいる方が多いのですが、スマホで階層メニューを出したいなら、後述する「スマホ開閉メニュー（ハンバーガーメニュー）」を使うのが正解です。

チェック3：キャッシュの影響

設定は完璧なのに表示が変わらない場合、ブラウザのキャッシュや、キャッシュ系プラグイン（WP Super Cacheなど）、あるいはサーバー側のキャッシュ機能が悪さをしている可能性があります。一度「キャッシュクリア」を行ってから、シークレットモードでサイトを確認してみてください。

親項目をクリックできないようにする

「サービス一覧」という親メニューを作って、その下に「Web制作」「コンサルティング」という子メニューを配置したとします。この時、親の「サービス一覧」自体には特定のページが存在せず、ただの「ラベル（見出し）」として扱いたいケースってありますよね。クリックしてもどこにも飛ばず、ただドロップダウンが開けばいい、という状態です。

この挙動を実現するには、「カスタムリンク」を使います。

メニュー項目の選択パネルから「カスタムリンク」を選びます。
URLの欄に、半角で「#」（シャープ）とだけ仮入力します。
リンク文字列の欄に、親項目の名前（例：サービス一覧）を入力します。
「メニューに追加」をクリックします。
追加されたカスタムリンクを親メニューの位置に配置し、子メニューをその下にインデントさせます。
仮入力したURL欄の「#」を削除します。

これで、ユーザーが親項目をクリックしてもページ遷移は起きず、ドロップダウン機能だけが働くようになります。特にスマホのアコーディオンメニューでは、親項目をタップした時に「ページ遷移してしまう」のか「メニューが開く」のかが曖昧だとユーザーが混乱します。仮入力→削除でURLを空欄にしておけば、タップ＝メニュー展開という挙動に統一できるので、UX（ユーザー体験）が劇的に向上しますよ。

メニューのURL欄を「#」のままにしておくと末尾に「#」が付いたURLへのリンク、空欄にするとクリック自体をオフにできます。

スマホ版SWELLドロップダウンメニューの最適化

現代のWebトラフィックの7〜8割はスマートフォンからです。PCでの見た目以上に、スマホでのメニュー操作性はコンバージョン率に直結します。ここでは、SWELLのスマホメニュー（ハンバーガーメニュー）を使いやすく最適化するための設定を深掘りします。

スマホでアコーディオン化する設定

SWELLのスマホメニュー（≡ボタンを押すと横から出てくるドロワーメニュー）において、サブメニューをどのように表示するかは、ユーザビリティを左右する重要なポイントです。SWELLではカスタマイザーで簡単に制御できます。

設定場所：「サイト全体設定」→「基本デザイン」→「■ サブメニューの表示形式」

この設定画面の中に「サブメニューの表示方式」という項目があります。以下の2つから選択できますので、適宜判断しましょう。

設定名	挙動の特徴	メリット・デメリット
アコーディオン化しない	メニューを開いた最初から、すべての子・孫メニューが展開された状態で表示される。	メリット：クリック数が減る。デメリット：メニュー項目が多いと縦に長くなりすぎ、下の方にある項目（お問い合わせなど）にたどり着けなくなる。
アコーディオン化する	親項目の横に「∨」ボタンが表示され、初期状態では子メニューは隠れている。タップで展開。	メリット：情報が整理され、全体の見通しが良い。ユーザーが見たい情報だけを選んで展開できる。デメリット：1タップの手間が増える。

特に階層構造が深いサイトや、メニュー項目数が多いサイトでは、「アコーディオン化しない」設定にしてしまうと、メニューを開いた瞬間に画面が文字だらけになり、ユーザーが圧倒されてしまいます。「アコーディオン化する」を選んで、すっきりとしたナビゲーションを提供しコンバージョン率の向上を狙いましょう。

スマホメニューが開かない原因と対策

SWELLユーザーからよく相談されるトラブルの一つに、「スマホでハンバーガーボタン（≡）をタップしてもメニューが開かない」、あるいは「アコーディオンの矢印（∨）をタップしても反応しない」というものがあります。

この現象の犯人は、十中八九「JavaScriptの不具合」です。

SWELLのアコーディオン機能はJavaScriptというプログラムで動いています。もし、以下のような運用をしている場合は注意が必要です。

トラブルを引き起こしやすい要因

高速化プラグインの使用：「Autoptimize」や「EWWW Image Optimizer」、「Flying Scripts」などで、JavaScriptの「遅延読み込み（Delay）」や「圧縮（Minify）」設定を過度に行っていませんか？ SWELLはテーマ自体に強力な高速化機能があるため、これらのプラグインと機能が重複（コンフリクト）し、メニューのスクリプトが動かなくなることがあります。
jQueryの設定：SWELLの設定で「jQueryを読み込まない」にしている場合、一部のプラグインが動かなくなることがありますが、SWELL本体のメニュー機能は基本的に脱jQuery化されています。しかし、古いプラグインが干渉している可能性もあります。

解決策としては、まず「SWELL設定」＞「高速化」タブを確認し、スクリプトの遅延読み込み対象にメニュー関連のファイルが含まれていないかチェックします。また、外部のキャッシュ系プラグインを一度すべて「無効化」して、正常に動くか確認してください。もし無効化して動くなら、そのプラグインの設定を見直す必要があります。

CSSでおしゃれにフォントを調整

SWELL標準のスマホメニューもシンプルで良いのですが、サイトのデザインによっては「もっと文字を大きくして押しやすくしたい」とか「フォントを変えて雰囲気を合わせたい」という要望も出てくるでしょう。微調整にはCSSを使います。

WordPressの「外観」＞「カスタマイズ」＞「追加CSS」を開き、以下のコードを参考に調整してみてください。

/* 1. メニューのリンク文字（親・子共通）を調整 */
/* ナビゲーション全体のテキスト、太さ、タップ領域を調整 */
#sp_menu .c-spnav li a {
    font-size: 16px;       /* リンク文字のサイズ */
    color: #333333;        /* リンク文字の色 */
    font-weight: bold;     /* 文字の太さ */
    padding-top: 1.2em;    /* 上部のパディング（タップ領域を広げる） */
    padding-bottom: 1.2em; /* 下部のパディング（タップ領域を広げる） */
}

/* 2. サブメニュー（展開した中身）のリンクを調整 */
/* 2階層目以下のリンクに適用されるスタイル */
#sp_menu .c-spnav .sub-menu li a {
    font-size: 14px;           /* サブメニュー項目の文字サイズ */
    padding-left: 2em;         /* 左のインデント（字下げ）を増やす */
}

/* 3. アコーディオン開閉ボタン（∨マーク）の調整 */
/* サブメニューを開閉する「矢印」ボタンの見た目を調整 */
#sp_menu .c-submenuToggleBtn {
    width: 50px;             /* ボタンの幅を広げ、押しやすく */
    background-color: #eee;  /* ボタン部分の背景色 */
    color: #333;             /* 矢印アイコンの色 */
    border-left: 1px solid #ddd; /* 視覚的な区切り線を追加 */
}

/* 4. 英語表記（サブタイトル）を調整 */
/* メニュー名の下に表示される英語や説明文のスタイル */
#sp_menu .c-smallNavTitle.desc {
    display: block;      /* ブロック要素として改行を適用 */
    font-size: 10px;     /* フォントサイズを小さく */
    color: #888;         /* 色を薄いグレーに */
    margin-top: 2px;     /* 上部の余白 */
    opacity: 1;          /* 透明度を100%に設定 */
}

特にスマホでは、指でタップする操作になるため、文字サイズ（font-size）だけでなく、パディング（padding）を調整して「タップできる領域」を広げてあげるのが、UX向上のための隠れたテクニックです。

フォントの種類そのものを変更したい（例：Google Fontsを使いたい）場合は、SWELLの標準機能でフォント設定を行うか、Webフォントを読み込む設定が別途必要になります。フォントの読み込みはサイトの表示速度に直結するので、正しい手順で行うことが大切です。詳しい手順については、以下の記事で解説しています。

追従ヘッダーの挙動と見た目の設定

ページを少しスクロールすると、画面上部から「スッ」と現れて固定表示されるヘッダーのこと、これをSWELLでは「追従ヘッダー」と呼びます。長いページを読んでいる途中でもすぐに他のページへ移動できるため、回遊率アップに効果的です。

この設定もカスタマイザーで行います。 「外観」＞「カスタマイズ」＞「ヘッダー」＞「ヘッダーの追従設定」

ここで重要なのが、「PCとスマホで挙動を分ける」という視点です。

PCの場合：画面が広いので、追従ヘッダーにもドロップダウンメニュー（グローバルナビ）を表示させてOKです。ただし、高さを少し抑えて（スリムにして）、コンテンツの邪魔にならないようにするのがセオリーです。
スマホの場合：スマホの画面は狭いです。追従ヘッダーが表示されると、画面の表示領域がさらに狭くなってしまいます。ですので、スマホでは「追従ヘッダーを有効化しない」を選択するか、表示するとしても「ロゴとメニューボタンだけ」のシンプルな構成にすることをおすすめします。

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

いかがでしたでしょうか。SWELLのドロップダウンメニューは、基本的にはWordPress標準の「メニュー」機能で階層（インデント）を作るだけで、驚くほど簡単に実装できます。しかし、そこから一歩進んで、スマホでのアコーディオン化設定、英語表記の追加、そして配色のカスタマイズを行うことで、サイトの使いやすさとデザイン性は格段に向上します。

ポイントをおさらいします。