【WordPress】Simplicityでトップページ上にメニューをドロップダウンにしたぞ!

https://farm6.static.flickr.com/5762/20919637280_707214c8c3.jpg

Simplicityでツイート数を表示する方法
Simplicityでツイート数を表示する方法
こんにちは。部長ナビ(@nabi_1080)です。Simplicityにおける「ツイート数表示」の方法がわかりましたので、記事で紹介した...

↑ツイート数を表示することに成功しました。よろしければどうぞ!

こんにちは。部長ナビ(@nabi_1080)です

さて、今回は、兼ねてから実装したかった「ドロップダウンメニュー」を付けましたので、やり方をご紹介します!

ドロップダウンメニューとは?

今までのウチのブログのメニューは「メニューをクリックすると、固定ページに飛んで、そこにリンクが貼ってある」という形でした。すなわち、「メニューをクリック」、「固定ページで見たいペー陣のリンクをクリック」と2回クリックが必要でした

これを、ドロップダウンに変えることで、マウスカーソルを合わせると、下にビローンとメニューが出て、いきなりそこにアクセスできるようになります

私は、メニューを2段にしたくなかったので、色々考えて、限られたメニューのみを表示していましたが、ドロップダウンにすることで、一気にドーンと表示できるので、サブメニューをまとめることで、想像以上のメニューを表示させることができました

では、やり方行ってみよう!

まずは、Simplicityのテーマ→メニューで階層化を行う

Simplicityは最初っから、ドロップダウンにするようなメニューがあるんですね。知らなかった・・・。

なお、固定ページを適当に作って、それを表示させ、そのサブカテゴリーとして表示させたいカテゴリーをドラッグアンドドロップで持って行けば簡単に階層化が可能です。ザ・簡単!

次に、表示をカッコよくする
http://tiyuno.com/simplicity/menu

このページを参考にしました

休みじゃ無きゃ、できねえな、マジで。今日休みで良かったっす

さっき、階層化を行ったので、後は表示をどうするかです。これを子テーマのstyle.cssにブチ込めば終了です。

私は上三角は付けませんでした。

あと、私が行ったのは、このサイトにあるコードで、「遅れて表示」の速度を上げました。すぐ表示されるようにしました

ただ、上にフワッと上がってくるのはそのままにしました。そっちの方がなんかカッコいいので

できた!

と言うわけで、念願のドロップメニューができました

まさかの「Apple関連レビュー」と「通常レビュー」、さらには「企業提供サンプルレビュー」と分けることができました。スゲー!階層化スゲー!ドロップダウンメニュー最高!

っつーわけで、こんな感じで行きます。

なお、ブログ運営の所に「男塾」が入っているのは、気にしないでください(笑)何となくです。何となく。

たけPに見てもらって、後でまた修正かけます

Simplicityお使いの方は参考にしてくださいね。

本当にSimplicityは初心者向けだし、カスタマイズのやり方がすぐに出て来るので最高です。みんなもWordPress使う時は、Simplicityオススメだよ!

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

この記事の関連カテゴリ

サイト内検索