[MySpace のデザインを変更する：第十回] 「フレンドコメント」のデザインを変更する

★変更を記述するページ

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

★変更方法
「フレンドコメント」部分で、各コメントの間に破線の白い区切り線を入れ、コメント部分をメインコンテンツ部分の幅いっぱいに表示したい場合はこんな感じ。

<style>
.friendsComments, .friendsComments table {
width: 100% !important;
}
.friendsComments table table td {
border-bottom: 1px dashed rgb(255, 255, 255) !important;
}
.columnsWidening {
width: 650px;
max-width: 650px;
margin-left: 20px;
}
</style>

まず、.friendsComments, .friendsComments table でコメント部分の領域を広げる。これをしないと Firefox と Opera で幅いっぱいに広がらない。
次に .friendsComments table table td で各コメントの下に破線を引くよう指定する。
最後に、.columnsWidening で幅を 650px に指定する。まぁ私のページの大きさに併せているので、width の数値は各々違うと思う。また、max-width で width と同じ数値を指定しないと、WebKit 系ブラウザ Safari と Chrome でコメント部分の幅が異常に広がってしまう。これは長い URL を入れられた場合に改行できないために起こる現象を防ぐ。で、コメントした人の画像とコメントが近過ぎるので、margin-left で少し調整する。

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