忍者ブログ
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

公式のメニューバー設定に無駄に抵抗するCSS。
CSS
#MenuBar { width: 780px; height: 23px; }
#MenuBar #MenuBarLeft { float: left; }
#MenuBar #MenuBarLeft a { /*▽*/ float: left; display: block; height: 23px; font-size: 10px; text-decoration: none; /*△*/ line-height: 23px; text-align: left; }
#MenuBar #MenuBarRight { float: right; }
#MenuBar #MenuBarRight .MenuItem { /*▽*/ padding: 0; width: 115px; /*△*/ float: right; margin-left: 5px; }
#MenuBar #MenuBarRight .MenuItem a { float: left; display: block; height: 23px; font-size: 10px; text-decoration: none; }
#MenuBar #MenuBarRight .MenuItem .Text { /*▽*/ float: left; display: block; width: 40px; padding: 0; text-align: center; /*△*/ line-height: 23px; }
#MenuBar #MenuBarRight .MenuItem.Twitter { /*▽*/ width: 95px; /*△*/ }
#MenuBar #MenuBarRight .MenuItem.Twitter .Text { width: 72px; }
#MenuBar #MenuBarRight .MenuItem.Quote { /*▽*/ width: 75px; /*△*/ }
#MenuBar #MenuBarRight .MenuItem.Quote .Text { /*▽★*/ width: 52px !important; /*★△*/ }
#MenuBar #MenuBarRight .MenuItem.Bookmark { /*▽*/ width: 115px; /*△*/ }
#MenuBar #MenuBarRight .MenuItem.Bookmark .Text { /*▽★*/ width: 92px !important; /*★△*/ }
#MenuBar #MenuBarRight .MenuItem.Heart { /*▽*/ width: 140px; /*△*/ }
#MenuBar #MenuBarRight .MenuItem.Heart .Text { /*▽★*/ width: 82px !important; /*★△*/ }
#MenuBar #MenuBarRight .MenuItem.Heart .EditHeartIconHeader.cboxElement { /*▽★*/ display: block; float: left; width: 35px !important; height: 23px !important; padding: 0 !important; font-size: 10px !important; /*★△*/ line-height: 23px; text-align: center; }
#MenuBar #MenuBarRight .MenuItem.HeartGuest { /*▽*/ width: 90px; /*△*/ }
#MenuBar #MenuBarRight .MenuItem.HeartGuest .EditHeartIconHeader.cboxElement { /*▽★*/ background-repeat: no-repeat; background-position: top left; background-image: url("http://img01.pipa.jp/tegaki/img07/Heart.png"); width: 62px !important; height: 23px; padding: 0 0 0 28px !important; /*★△*/ line-height: 23px; }

補足
● /*▽*/~/*△*/ で囲った範囲
  body内にて埋め込みスタイルシート「<style>~</style>」としてあらかじめ指定されているプロパティ。
  セレクタを「#MenuBar」から指定してやる事で、こちら(ユーザー)のCSSを優先させる事が出来る。
● /*▽★*/~/*★△*/ で囲った範囲
  インラインスタイルシートであらかじめ指定されているプロパティ。
  値を上書きしたい場合は!important必須。

隣接セレクタでMenuBarLeftも弄れなくもない(ie6未対応)
PR

Comment

現在、新しいコメントを受け付けない設定になっています。