SWELLでメガメニュー風のナビを設定する方法と整理のコツ

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

記事が増えてくると、ヘッダーのメニューに項目が並びきらず困ることはありませんか。カテゴリーが多いほど、読者は目的の記事にたどり着きにくくなってしまいます。メガメニューのように階層で整理すれば、たくさんの項目もすっきり見せられます。

この記事では、SWELLのグローバルナビでメガメニュー風のメニューを作る方法を手順付きで解説します。私が実際にやってしまった失敗や、見やすく整理するコツもお伝えしますね。メニュー画面の操作だけで設定できますよ。

▼あわせて読みたい：メニューで記事を回遊してもらうなら、ページの表示速度も大切です。ブログの土台になるサーバー選びはこちらで解説しています。

あわせて読みたい

エックスサーバーの評判は本当？初心者ブログで実際に使ってみた正直レビュー 本記事はアフィリエイト広告を含みます。 「エックスサーバーって評判いいって聞くけど、初心者の自分でも本当に使いこなせるのかな」と不安になっていませんか。 サー...

SWELLのメガメニューとは？設定前に知っておきたい基本

メガメニューとは、ヘッダーの項目にカーソルを合わせたとき、関連するページを一覧で広げて表示するメニューのことです。項目が多いサイトでも、読者が目的のページを探しやすくなります。

SWELLでは、「外観」→「メニュー」で項目に親子関係をつけることで、グローバルナビにドロップダウンを表示できます。この階層づくりが、メガメニュー風ナビの土台になります。

メニューを階層化するメリット

階層にまとめると、ヘッダーには大きなカテゴリーだけを並べ、細かい項目はその下に収められます。私も以前は10個近い項目を横に並べていて、スマホでは折り返して見づらくなっていました。親項目を5つ程度に絞ってからは、見た目も回遊率も改善しています。

親項目は「カテゴリー」でまとめるのが基本

親項目には「サーバー」「テーマ」など大きなカテゴリーを置き、その下に関連する記事やサブカテゴリーを並べるのが基本です。以前使っていた別のテーマでは、階層を深くしすぎて表示が崩れたことがありました。階層は2段までに抑えると安心です。

SWELLでメガメニュー風のナビゲーションを設定する方法

ここからは、実際にグローバルナビに階層メニューを設定する手順を見ていきましょう。操作はすべて「メニュー」画面で完結します。

作業前に、親項目と子項目の組み合わせを紙に書き出しておくと迷いません。先に設計図を作るのが、きれいなメニューへの近道です。

子項目はドラッグで右にずらして作る

メニュー画面では、項目を少し右にずらして配置すると子項目になります。私は最初これを知らず、すべて同じ階層に並べてしまいました。ずらした項目は「サブ項目」と表示されるので、そこで確認できますよ。

スマホ用メニューも忘れずに設定する

SWELLでは、スマホで開くメニューの表示場所も別に用意されています。パソコンだけ整えて満足していると、スマホではメニューが空のままということも。メニューの位置を両方チェックしておきましょう。

メガメニューを使いやすくする整理のコツ

階層メニューが表示できたら、次は読者が迷わず選べるように中身を整理していきましょう。項目の並べ方ひとつで、使いやすさは大きく変わります。

意識したいのは、「少なく、短く、わかりやすく」の3つです。詰め込むほど、かえって読者は選べなくなります。

子項目は5〜6個までに絞る

私は以前、1つの親項目に15個近い記事をぶら下げてしまい、ドロップダウンが画面の下まで伸びてしまいました。子項目は5〜6個までに絞り、残りはカテゴリーページへ案内するように変えたところ、クリックされる項目がはっきり増えています。

ナビゲーションラベルで表示名を短くする

記事をメニューに追加すると、記事タイトルがそのまま表示されて長くなりがちです。各項目を開いて「ナビゲーションラベル」を書き換えれば、表示名だけを短くできますよ。10文字前後に収めると、ひと目で内容が伝わります。

▼あわせて読みたい：メニューで案内する記事も、検索から読まれてこそ価値が高まります。無料から使えるキーワード調査ツールの実力はこちらで正直にレビューしています。

あわせて読みたい

ラッコキーワードレビュー｜無料から使えるキーワード調査ツールはブログ運営に本当に使えるか正直に話... 本記事はアフィリエイト広告を含みます。 「ラッコキーワード、無料で使えると聞くけど、有料プランまで必要なのか正直知りたい」という人はいませんか。記事のネタを探...

SWELLのメガメニュー設定でよくある質問

子項目がドロップダウンで表示されません。

まずは子項目が「サブ項目」になっているか確認しましょう。問題なければ、メニューの位置にグローバルナビが選ばれているか、キャッシュが残っていないかもチェックしてみてください。

親項目をクリックしてもページに移動させたくありません。

親項目をカスタムリンクで作り、URL欄に「#」を入れる方法がよく使われます。見出しとしてだけ使いたいときに便利ですよ。

画像入りの本格的なメガメニューは作れますか？

専用のプラグインを使う方法もありますが、テーマとの相性やデザインの崩れには注意が必要です。私も別テーマで試したとき表示が崩れたので、導入前にバックアップを取っておきましょう。

メニューの項目はどの順番で並べるのがいいですか？

読まれてほしい順に左から並べるのが基本です。収益につながるカテゴリーを左側に置くと、自然と目に入りやすくなりますよ。

まとめ：メガメニューで読者を迷わせないサイトにしよう

SWELLでは、メニュー画面で項目に親子関係をつけるだけで、メガメニュー風のナビゲーションを作れます。子項目は5〜6個までに絞り、ナビゲーションラベルで表示名を短くするのが使いやすさのコツでした。

メニューは、読者がサイトの中を移動するための地図のようなものです。まずは親項目を5つに絞るところから、メニューを見直してみてください。

▼あわせて読みたい：全ページに表示されるメニューこそ、文字のミスは避けたいもの。お手頃価格で始められる日本語校正ツール「Shodo」を実際に使ってみた感想をまとめています。

あわせて読みたい

Shodo（ショドー）レビュー｜日本語校正ツールはブログ運営に本当に使えるか正直に話します 本記事はアフィリエイト広告を含みます。 「Shodo、無料で使えると聞くけど、有料プランまで必要なのか正直知りたい」という人はいませんか。記事を公開したあとに誤字...

おすすめ記事