【CSS不要】超簡単にWordPressのメニューをドロップダウンさせる方法

merumaga

【WATANABEのブログで楽に効率よく稼ぐ方法を知れるメルマガ】

※無料登録者に有料級特典あり!現在、登録者が増加中!!

※【事前告知】高額商材の販売は一切ありません。



こんにちは WATANABEです。

 

初めてWordPressでブログを作った時って、手探りで何でも挑戦してみちゃうことってありませんか?

その時、親メニューとか子メニューとかをイジってしまって、「何がなんだかわからなくなった…」なんてことも経験したことあるでしょう。

 

実際に、私自身もメニューを細かく区切っています。

それは、メニューで表示させるときに便利だからです。

 

ただ、そうすると、親メニューと一緒に子メニューも表示したいのにやり方”がわからなかったら意味がありません。

むしろ、無駄な行為となっちゃうでしょう。

 

なので今回は、親メニューの下に子メニューを表示させる方法(ドロップダウン)を紹介していきます。

WordPressは本当に簡単に色んなカスタマイズができますので、ぜひ挑戦してみてくださいね。

 

【CSS不要】超簡単にWordPressのメニューをドロップダウンさせる方法

【超簡単!】初心者でも5分でできる階層表示のやり方について

 

メニューバーを階層表示させる方法は、本当に簡単です。

全て画像で説明できちゃうくらい、とっても簡単なんです。

なので、初心者の方でもぜひ挑戦してみてください。

 

※今回はCSSをイジる等の作業は一切しません。

マウスを動かすだけで全て完了しますので、安心してくださいね。

 

【実践編】初心者でも5分でできる階層表示のやり方

ドロップダウンの手順 ①

まずは、サイトの上のバーで表示されているメニュー欄を見てください。

そこに【カスタマイズ】がありますので、クリックしましょう。

 

ドロップダウンの手順 ②

左にメニュー一覧が表示されますので、【メニュー】という項目をクリックしましょう。

 

ドロップダウンの手順 ③

あなたが作成した【メニュー名】を選択し、次はメニュー表示させる工程にいきましょう。

【+ 項目を追加】というバナーがありますので、クリックしましょう。

 

ドロップダウンの手順 ④

ここで子メニューとして階層表示させた項目をチェックしてください。

※今回は、「カテゴリー」から子メニューを作ります。

 

ドロップダウンの手順 ⑤

子メニューとして追加したい項目をチェックしたら、次はマウスで親メニューの下に移動させます。

 

このように、親メニューの下に移動させると、微妙に右にズレますよね。

これでOKです!!

 

※ちなみに、子メニューにもさらに子メニューを追加することができますよ。

後は保存するだけで、ドロップダウンの設定は終了です。

 

ドロップダウンの手順 ⑥

カスタマイズの結果を見てみましょう。

 

マウスで矢印をメニューの上に乗せると、以下のようにドロップダウンするようになりました。

なんだかオシャレですね♪

 

ということで、超簡単な作業でドロップダウンのカスタマイズをすることができます。

CSSをイジることも一切ありませんので、失敗することもありません。

なので、ぜひやってみてくださいね♪

 

ドロップダウンをカスタマイズすると、本当にオシャレなサイトを作ることができますよ。

 

親メニューと子メニューで細かくする意味について

メニューをドロップダウンさせることでユーザーの回遊率を効率よくできる

 

メニューバーをドロップダウンで表示する意味ですが、1番の理由は「ユーザビリティーの向上」です。

ユーザーが使いやすいサイトにすることが1番の目的なのです。

 

そして、こちら側の意図としては、

「ユーザーが求めている移動場所をハッキリと提示してあげることで、ユーザーのストレスを感じさせない」

ことです。

ユーザーにストレスを感じさせないことで、ユーザーに気軽に”サイト回遊=2PV”させることができるのです。

 

また、興味のある項目を目につかせることができれば、その点でもユーザーにクリックを促すことができます。

 

例えば、目の前にお金が落ちていたら見てしまいますよね?

これは「条件反射」で、そういった行動を起こしてしまいます。

 

では、なぜ見るのか…。

それは「興味があるから」です。

単純明快ですよね♪

 

なので、メニューをドロップダウンさせる意味は、”ユーザーの興味を引くものを目につかせる”ためにあるのです。

 

本当に見えない努力ですし些細なことなんですが、こうした些細なことは微妙に効果をもたらしてくれたりするので、ぜひやってみてくださいね。

必ずしも全てのユーザーに意味のあるカスタマイズとは言えませんが、一部のユーザーのためにも使いやすいサイトに作り上げましょう。

 

使いやすいサイトほど愛される!と再確認しよう

あなたは、同じようなサイトがあった時、どんなサイトをブックマークしますか?

きっと、「使いやすいサイト」ですよね。

 

使いやすい”という意味は、それぞれで違ってくるでしょうけど、”痒いところに手が届く便利なサイト”なら使いやすいと言えるのではないでしょうか。

 

メニューをドロップダウン表示させることは、これと同じですよね。

ユーザーのため、そして他のサイトと差別化を図るためにもドロップダウンが出来るのならば、ぜひやっていきましょう。

 

また、ドロップダウンさせることでサイトが大手メディアっぽくなります。

「おしゃれでしっかり作られたサイト」というイメージをユーザーに印象づかせることが出来ますので、その点でもメリットがありますね。

 

特にアドセンスを扱うような大量のアクセスを狙うサイトならば、大手メディアのようなイメージを抱かせることは本当に大事です。

サイトをブックマークしてもらって安定的なアクセスを獲得するためにも、カッコいいおしゃれなサイトを作り上げましょう。

 

まとめ

メニューをドロップダウンさせるカスタマイズは、自己満足の世界かもしれません。

でもその自己満足は、一部のユーザーには便利な機能になっています。

 

サイトをおしゃれにカスタマイズすることは、ユーザーのためになっていますので、どんどんイジってみてください。

どこまでもユーザビリティーを意識することが大事ですからね。

 

▼こちらの記事も一緒に読まれています▼