4/30/2010

[MySpace のデザインを変更する:第七回] メニューバーのデザインを変更する

★変更を記述するページ
ホーム > プロフィール変更 もしくは デザイン変更 > アーティスト詳細の「バイオグラフィー」の「編集」
Profile > Edit Profile or Customize Profile > Musician Detail > Musician Bio > Edit


★変更方法
バーの背景を黒の透明度 70%、枠線が黒、せせり出てくるメニューの背景を白の透明度 80%、マウスが重なった際にはさらに白くする感じだとこんな具合で。
<style>
div[id="topnav"] {
background: rgba(0, 0, 0, .7);
}
div[id="topnav"] ul, div[id="subnav"] ul {
border: 1px solid rgb(0, 0, 0) !important;
border-top: none;
background-color: transparent !important;
}
div[id="topnav"] ul li, div[id="subnav"] ul li {
border-bottom: 1px solid rgb(0, 0, 0) !important;
}
div[id="subnav"] li {
background: rgba(255, 255, 255, .8);
}
div[id="subnav"] li a {
width: 140px !important;
}
div[id="topnav"] ul li a:link, div[id="topnav"] ul li a:visited,
div[id="subnav"] ul li a:link, div[id="subnav"] ul li a:visited
{
color: rgb(0, 102, 255) !important;
background: none !important;
}
div[id="topnav"] ul li a:active, div[id="topnav"] ul li a:hover,
div[id="subnav"] ul li a:active, div[id="subnav"] ul li a:hover
{
background-color: transparent !important;
background: rgba(255, 255, 255, .8) !important;
color: rgb(255, 0, 0) !important;
}
</style>


結構色々と設定しなければならなかった。
まず div[id="topnav"] でメニューバーの背景を変える。
次に、div[id="topnav"] ul, div[id="subnav"] ul の背景を透過させ、黒の枠を付ける。MySpace 側ではこの部分の border-top を none にしているので、それに従う。この場合、border で枠全体を指定し、border-top で none にする方が短くて済むのでこうしてある。
加えて、div[id="topnav"] ul li, div[id="subnav"] ul li でborder-bottom を指定し、メニュー項目の分割線を決める。
続けて div[id="subnav"] li で、せせり出てくるメニュー項目の背景を変える。
さて、div[id="subnav"] li a の幅を 140px で定義しているのは、なにも定義しないとメニュー項目の右側に僅かな余白ができているので、それを潰す目的で設定してある。
最後はメニューの文字色を定義しているものの、肝心のせせり出てくるメニュー項目の文字色は MySpace 側で !important 指定がされているので変えられず、メニューバーにマウスが重なったときの文字色しか変更できなかった。

★確認環境
Safari 5.0、Firefox 3.6.3、Chrome 5.0.375.70、Opera 10.53

★サンプル画面
WINGS OF FALLEN ANGEL on MySpace Music - Free Streaming MP3s, Pictures & Music Downloads

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.