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

グローバルメニュー

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

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

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

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

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

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

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

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

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

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

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

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

参考になれば幸いです。

 

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

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

 

ではでは。



シェアクリックをお願いします。

FacebookでシェアするTwitterでつぶやく
はてなブックマーク!

この記事は参考になりましたか?

この記事に対しての評価をお願いします。 
★1つ 最低最悪!くだらん。★2つ イマイチ!★3つ 普通。★4つ 良いね♪★5つ 最高!ブラボー!! (8 投票, 評価平均値: 3.00)
読み込み中 ... 読み込み中 ...
※5段階の簡単評価です。★をクリックすることで誰でも簡単に評価できますので「ポチっとな」をお気軽にお願いします。

Facebookページにご参加ください。

facebookではWEBビジネスに関する新着ニュースを厳選し配信しております。SEO関連・スマホアプリ・wordpress・サイトデザイン・新ビジネス等の情報収集にお役立てください。


スポンサードリンク
Hiroyuki Suga

Hiroyuki Suga株式会社IMPACT 代表取締役

投稿者プロフィール

約10年間のサラリーマン生活を経て、34歳で独立起業。
JOB: WEBコンサル&システム開発・運用
LOVE: 面白い事・フットサル・平和・妻&子(6歳)
メルマガ配信中!ぜひ登録おねがいいたします。

この著者の最新の記事

関連記事

ピックアップ記事

  1. wordpress

    2014-5-30

    えっ?これも!?wordpressで制作されたハイクオリティWEBサイト100選!

    最近では新しいCMSがドンドン誕生してきており、その機能の進化は凄いと感じます。特にWordPres…
  2. mail

    2013-8-23

    メルマガ配信スタンド・メール配信ASPシステム徹底比較!メルマガマーケティングとは?

    メルマガ配信スタンドについて考える さて今回はメールマガジン配信について考えてみようと思います。 …
  3. Disqus-アイキャッチ

    2013-5-31

    「DISQUS」で高機能コメント欄にレベルアップ!wordopress導入編

    「DISQUS」というサービスをご存知でしょうか? wordpressデザインを学ぶための超有名ブ…
  4. tcd

    2013-5-23

    ワードプレステンプレート「TCDさんのwordpressテーマ」が素晴らしすぎる件

    当サイトは既にご承知の通りwordpressという無料CMSツールを活用して構成されております。 …

はてなブックマーク人気エントリー

メルマガ登録

人気記事

  1. Google-extension
  2. SEO40
rank
ページ上部へ戻る