SWELLのスマホヘッダーメニュー設定方法｜使いやすく整えるコツ

2026年10月25日

※本記事はアフィリエイト広告を含む記事へのリンクを含みます。

パソコンでは見やすいメニューなのに、スマホで開くと項目が多すぎて使いにくいと感じていませんか。私もパソコン用のメニューをそのままスマホに表示していたため、メニューを開くと画面いっぱいに項目が並ぶ状態になっていました。

この記事では、SWELLのスマホ用ヘッダーメニューの設定方法を、設定画面の名前まで具体的に初心者向けに解説します。実際の失敗談も交えるので、読みながら進めれば、スマホの読者が迷わず移動できるメニューを作れます。

※ブログの作業環境を見直したい方へ：筆者が記事作成に使っているMacBook Air M5は、軽くて持ち運びやすく、デザインの調整や記事作りを快適にこなせるノートPCです。

➡️ AmazonでMacBook Air M5の最新価格を見る

価格は変動するため、最新の情報はAmazonの商品ページでご確認ください。

ニャフィ

スマホのメニューが、ごちゃごちゃして見にくいのにゃ…

たいがブログ

スマホの読者が多いからこそ、整えておきたいですよね。

ニャフィ

パソコンのメニューまで崩れたりしないかにゃ？

たいがブログ

スマホだけ別に設定する手順を、5つに分けて解説しますね。

▼あわせて読みたい：スマホでも快適に表示できるサーバー選びについては、こちらの記事で詳しく紹介しています。

SWELLのスマホヘッダーメニューの基本

スマホでは画面が狭いため、ヘッダーのメニューはボタンを押すと開く形で表示されます。SWELLでは、スマホ専用のメニューを別に設定できるのが大きな特徴です。

筆者はAFFINGER6を使っていたころ、スマホのメニューを思いどおりに整えるのに時間がかかりました。SWELLはメニューの表示位置を選ぶだけでスマホ用に切り替えられるので、作業がとても楽になりました。

スマホではメニューボタンから開く

スマホのヘッダーにはメニューボタンが表示され、押すと開閉メニューが開きます。読者はここからカテゴリーや固定ページへ移動するので、中身の整理がとても大切です。

パソコンとは別のメニューを表示できる

SWELLには、「スマホ開閉メニュー内」というメニューの表示位置があります。ここに専用のメニューを設定すれば、パソコンのメニューはそのままに、スマホだけ内容を変えられます。

スマホのヘッダーメニューを設定する方法

スマホ用のメニューは、「外観」→「メニュー」で作成し、表示位置を選んで保存するだけで設定できます。作る前に、どの項目を載せるかを決めておきましょう。

筆者はメニューの項目を絞ったところ、スマホからのカテゴリーページへの移動が増えたと感じています。項目が少ないほうが、読者は迷わずに目的のページを選べるのです。

項目は5〜7個程度に絞る

スマホのメニューは、5〜7個程度に絞ると見やすくなります。主要なカテゴリーとお問い合わせなど、読者がよく使うページを優先して載せましょう。

読まれやすいページを上に置く

メニューは上にある項目ほど押されやすくなります。人気のカテゴリーや収益につながるページを上に置くと、読者を自然に案内できます。

STEP

スマホ用のメニューを作る

「外観」→「メニュー」で「新しいメニューを作成」を選び、「スマホ用メニュー」などわかりやすい名前を付けます。載せたいカテゴリーやページを追加しましょう。

STEP

表示位置をスマホ用にして保存する

メニューの設定で、表示位置の「スマホ開閉メニュー内」にチェックを入れて保存します。これで、スマホのメニューボタンを押したときに表示されるようになります。

STEP

開閉メニューの見た目を整える

「外観」→「カスタマイズ」の「スマホ開閉メニュー」で、背景色や文字色を調整します。サイトのメインカラーとそろえると、まとまりのある印象になります。

STEP

項目の順番を調整する

メニューの項目をドラッグして並べ替えます。よく読まれるカテゴリーを上に、プライバシーポリシーなどは下にまとめると、読者が迷いにくくなります。

STEP

実際のスマホで確認する

実際のスマホでメニューを開いて確認します。筆者はメニューボタンが小さくて気づかれにくいと感じたので、ボタンの下に「MENU」と表示させる設定も見直しました。

スマホメニューをもっと使いやすくするコツ

スマホのメニューは、ひと工夫するだけで読者の移動がぐっと楽になります。ここでは、実際に運営しながら効果を感じたコツを紹介します。

筆者は外部モニターでChromeの「デベロッパーツール」を開き、いろいろなスマホの画面サイズをパソコン表示と並べて確認しています。実機を何台も用意しなくても、崩れやすい部分にすぐ気づけるので便利です。

ヘッダー下に横並びのメニューを置く

SWELLでは、スマホのヘッダーのすぐ下に横並びのメニューを表示することもできます。メニューボタンを押さなくても主要なカテゴリーが見えるので、読者の目に留まりやすくなります。

開閉メニューにウィジェットを追加する

開閉メニューの中には、メニューの下にウィジェットを表示できるエリアもあります。検索ボックスや人気記事を置くと、メニューを開いた読者をさらに案内できます。

スマホメニューのチェックポイント

項目が5〜7個程度に絞られている
よく読まれるページが上にある
メニューボタンに気づきやすい
いろいろな画面サイズで崩れていない

▼あわせて読みたい：パソコン表示とスマホ表示を並べて確認できる、筆者愛用の作業用モニターはこちらで紹介しています。

よくある質問

パソコンとスマホで同じメニューを使ってもいいですか？: 項目が少なければ同じメニューでも問題ありません。項目が多くなってきたら、スマホ用のメニューを別に作って内容を絞るのがおすすめです。
設定したメニューが反映されません。: キャッシュが残っている可能性があります。「WP Fastest Cache」などのキャッシュ系プラグインを使っている場合は、キャッシュを削除してから確認しましょう。
メニューの中で項目を階層にできますか？: メニュー画面で項目を右にずらすとサブ項目にできます。ただしスマホでは階層が深いと探しにくくなるので、1段階までにしておくと安心です。
開閉メニューの色だけを変えられますか？: 変えられます。カスタマイザーの「スマホ開閉メニュー」で、背景色や文字色を設定できます。ヘッダーの色と合わせると統一感が出ます。