hereticanthem co.,ltd.

Myspaceのアーティストページをデザインをカスタマイズする機会があったので、記事にしてみました。最近ではMyspaceをオフィシャルサイトにしちゃうアーティストも多いようで、凝ったデザインをしているページをよく見かけます。
一般ユーザーとアーティストユーザーでデザインカスタムの方法が違うのはMyspaceに書かれている通りですが、実際にどんな方法でカスタムしていくのか今回知ることができました。

まず一般ユーザーにはあったプロフィール2.0はアーティストユーザーにはありません。
で、どうやってカスタムしていくかというと、
『Edit Profile』の『Musician』にある『Bio』に自らソースコードを記述してデザインカスタマイズしていくようです。
『Bio』にCSSを記述していくのですが、Myspaceで決まっちゃってるClass名があるので、それをコツコツ調べながらやっていくわけです。
今回作成したCSSを載せておきます。
背景画像などは自分でサーバーを借りて載せるか、Myspaceのアルバムに入れちゃってURLをコピーしちゃってください。
基本

<style>
table, tr, td { background-color:transparent; }
table, tr, td { background-color:transparent; border:none; border-width:0px; }
table table table {  width:100%; max-width: 600px; }
table table table table { width:100%; }
body, .bodyContent  { background-color:000000; background-image:url(ここには自分の画像をリンク); background-position:Top Center; background-attachment:fixed; background-repeat:no-repeat; border-width:0px; border-style:Solid; }
table table { border:0px; }
table table table table { border:0px; background-image:none; background-color:transparent; }
table table table { border-style:Solid; border-width:0px; background-attachment:fixed; }
table, tr, td, li, p, div,.text,.redtext, .blacktext12 { color:dbd5c9; }
.whitetext12 { color:5f0116; }
.orangetext15 { display:none; }
.lightbluetext8, .blacktext10, .redbtext,.btext { color:dbd5c9; }
.nametext { color:dbd5c9; }
a:active, a:visited, a:link, a.searchlinksmall:active, a.searchlinksmall:visited, a.searchlinksmall:link, a.navbar:active, a.navbar:visited, a.navbar:link, a.redlink:active, a.redlink:visited, a.redlink:link { color:5f0116; }
a:hover, a.searchlinksmall:hover, a.navbar:hover, a.redlink:hover { color:dbd5c9; }
</style>

内容

<style>
/** friendsComments **/
html body.bodyContent table tbody tr td table.friendsComments { color: 484848 !important; width: 860px !important; margin: 0 !important; padding: 0 !important; margin-top: 20px !important; overflow: hidden !important; background-color: transparent !important; margin-left: -1px !important; _width: 860px !important; _margin-left: -2px !important; }
html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table { width: 100% !important; border-collapse: separate !important; border-spacing: 0px 0px !important; background-color: transparent !important; height: auto !important; }
table.friendsComments tbody tr td.text table tbody tr td { background-color: transparent !important; height: auto !important; }
table.friendsComments tbody tr td.text table tbody tr td span.orangetext15 { background-image: url(http://heretic.jp/werenotafraid/myspace/comments.jpg); background-repeat: no-repeat !important; background-color: transparent; display: block !important; height: 55px !important; color: c70b0b !important; width: 850px; position: relative; overflow: hidden; font-size: 0px; text-align: right; margin-top: -1px; line-height: 20px !important; _width: 850px !important; _border-left: 1px 000000 !important; _border-right: 1px 000000 !important; _height: 50px !important; _margin-bottom: -1px !important; }
html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td b { display: block; position: absolute; z-index: 9; width: 720px; height: 15px; line-height: 1.4; overflow: hidden; margin: -28px 0 0 100px; text-align: right; padding-right: 12px !important; color: 646464; font-weight: normal; font-size: 13px; _margin: -28px 0 0 100px; _font-size: 11px !important; _color: 646464; }
html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td b span.redtext { font-weight: normal; color: 131313; padding: 0px 2px; }
html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td b a { color: 0075e2 !important; font-size: 12px !important; text-transform: none; margin: 0 -7px 0 -8px !important; padding: 0 9px 0 9px !important; background-color: transparent !important; position: relative !important; display: inline !important; z-index: 9; border: none !important; letter-spacing: 0px !important; _font-size: 12px !important; _margin: 0 !important; _padding: 0 !important; }
html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table { overflow: hidden !important; border: 1px 000000 !important; border-color: 000000 !important; width: 100% !important; }
html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table tr td { background-color: transparent !important; text-align: left; vertical-align: top; overflow: hidden !important; font-size: 12px !important; line-height: 1.4 !important; text-transform: none !important; letter-spacing: 0px; color: 646464 !important; margin: 0 !important; padding: 5px 0px 5px 0px; border-bottom: 0px 000000 !important; border-color: 000000 !important; _line-height: 1.4 !important; }
html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table tr td span.blacktext10 { color: 484848 !important; text-transform: None !important; margin: 0px !important; padding: 0px important; display: block !important; font-size: 12px; font-family: arial, sans-serif !important; font-weight: normal; letter-spacing: 1px; text-align: right; margin: 5px 10px -12px 0px !important; width: 650px; border-top: 1px 577988; _margin: 12px 0px -.5em 0px !important; _width: 650px; }
html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td { background-color: transparent !important; }
html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td a { display: block; border: 0px 484848 !important; border-color: 484848 !important; border-top-style: solid !important; border-top-width: 0px !important; text-align: center; text-transform: Uppercase; padding: 8px; font-size: 12px; letter-spacing: 1px; color: transparent !important; position: relative !important; margin-top: -3px !important; background-color: transparent; _margin-top: -6px !important; }
html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table tr td a { display: block !important; color: 484848 !important; margin: 0px !important; padding: 10px 10px 0px 10px !important; text-transform: none !important; margin-bottom: -15px !important; font-size: 11px !important; line-height: 1.4 !important; border: none !important; letter-spacing: 0px !important; text-align: center !important; width: 110px !important; overflow: hidden !important; font-weight: normal; _width: 124px !important; _margin-bottom: -15px !important; }
html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table tr td a img { visibility: visible !important; border: 1px 848484 !important; border-color: 848484 !important; padding: 0px !important; margin: 0px !important; margin-top: -12px !important; width: auto !important; _margin-left: 0px; }
html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table tr td img.ImgOnlineNow { display: block; position: relative; margin: 15px 0 -20px 26px !important; border: none !important; _margin: 15px 0 -20px 21px !important; }
html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table tr td img { max-width: 100%; margin: 0px !important; margin: 0px 0px 12px 0px !important; }
/** friendSpace **/
html body.bodyContent table tbody tr td table tbody tr td.text table.friendSpace tbody tr td.text table tbody tr td span.orangetext15 { display: block !important; height: 60px !important; width: 500px !important; font-size: 0px; overflow: hidden; background-image: url(http://heretic.jp/werenotafraid/myspace/friends.jpg); background-repeat: no-repeat; color: 282828 !important; line-height: 1.4 !important; margin-top: 0px !important; background-color: transparent !important; text-indent:-9999px; }
</style>

こんな感じでしょうか。
もっと強引な方法もあるらしくコンテンツtableをposition:relative;なんかしてz-indexでぺたぺた貼りつけていく方法もあるっぽい。
まだまだ触ったばかりなので意味不明な部分が多いですが、他のアーティストページを見る限りもっと強引な手段や、もっと簡潔なソースの記述もあるみたいです。う〜ん。面倒な作業が多そう。。
今後もMyspaceをカスタマイズする機会がある気がするので、また新しいことを見つけたら報告します。
間違いがあったらごめんなさい。コメントいただければ修正しますので。