wordpressのグローバルメニューを少しカスタマイズしてみます。【動画付】：WEBビジネス館

当サイトの上部にはメニューが設置されています。このようにどのページにいっても一貫して表示されているメニューの事を「グローバルメニュー」といいます。

当サイトはTCDさんのTCDさんのDynamicというワードプレスのテンプレートを活用しているので、上部に横一列のグローバールメニューが表示されております。デザインは皆さんサイトによって様々ですが、多くの場合サイト上部に表示されていることが多いですね。

メニューのCSSを少し手直ししてみます。

もともとTCDさんのDynamicはデザイン性が高く、完成度も高いので、あまり手を加える必要はないのですが、今回少しだけ改良してみます。

もしTCDさんのテンプレートを利用している方でしたら、このソースコードをそのまま使えば同じように変更できると思います。

手直し箇所としては、メニューの色部分です。

現状ではマウスをメニュー上に持っていくと下部が赤く変わり、リンク先があることを明確に分かりますが、マウスを動かさなければ全メニュー項目が同じデザインとなっていおり、今いるページが分かりずらい状態になっております。

そこで、「今いるページのメニュー部分は別の色で表示する」という改良を加えたいと思います。

ただし、画像だと表現しずらいので、動画を作ってみました。はい。コチラ↓

いかがでしたでしょうか？イメージがつかめましたか？

ちなみに追加したソースコードはコチラです。

#global_menu ul ul .parent_menu &gt; a:hover, #global_menu ul li.active_menu_first ul .parent_menu &gt; a:hover, #global_menu ul li.active_menu_last ul .parent_menu &gt; a:hover
{ background:url(img/header/arrow1.gif) no-repeat right 17px; }
#global_menu &gt; ul &gt; li.current-menu-item &gt; a { border-bottom:2px solid #666666; }

参考になれば幸いです。

という事で、今回は動画で紹介してみましたが、初の動画アップだったので、イマイチ分かりづらくなってしまいました。

今後も動画を交えて、いろいろ解説、説明していきたいと思いますので、宜しくお願いいたします。

ではでは。