5/01/2010

[MySpace のデザインを変更する:第九回] 「コンタクトメニュー」のデザインを変更する

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


★変更方法
「コンタクトメニュー」部分に独自の画像を使用し、「コンタクトメニュー」の文字を消す場合はこんな感じ。
<style>
.contactTable {
background:url("http://www.primedesignworks.com/myspace/contactTableBG.png") center center no-repeat;
}
.contactTable a img {visibility: hidden;}
.contactTable .whitetext12 {display:none;}
</style>


まず、.contactTable に背景として新しい画像を設定する。
次に .contactTable a img で「メッセージを送る」等の画像を非表示にする。新しい画像を貼るにはいいが、リンクを設定するのはめんどくさいので、既に「メッセージを送る」等の画像に貼られているリンクを活かすためにも、画像は display: none; で消してしまうのではなく、visibility: hidden; を使う。これなら画像の領域を活かせるので、リンクの場所を押さえるように画像を作れば良い。
最後に .contactTable .whitetext12 で「コンタクトメニュー」の文字を消す。

★確認環境
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.