リニューアルしたmixiのカスタマイズが熱い

※2007/10/5更新　背景色がちゃんと適用されないのを修正。
4か月ぶりぐらいのブログ更新。最近CSS脳です、こんな時間にこんばんは。

リニューアル後のmixiを2カラム/750px幅化するユーザースタイルシートを書いてみた : akiyan.com
リニューアルを確認した瞬間にやろうと思ったけど、もう既にささっとやってしまった方がおられたのでそれを参考に自分用にカスタマイズ。滅多にしないトラックバックとかもしてみる。実は初めてかもしれない。

個人的には3カラムでも問題なかったので、それはそのまま維持しつつ広告を徹底的に非表示にしてみた。というかmixiニュースとか人気キーワードとか地味に楽しみなので削られると困る。広告に関してはまだ他のページに漏れがあるかも。
あと白が眩しかったから灰色気味にしたのと、トップの最新情報一つ一つに枠線があった方が見やすいって意見があったからそれを反映。確かに見やすい。
最新アルバム、最新ミュージック、自分の最新情報は見ないから非表示にした。あとmiklyとかはいらないからそれも削除。

比較画像

比較は以下の通り。3カラムながらもずいぶんすっきりしたと思う。

変更前	変更後

CSS

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("mixi.jp") {

/* 白があまりにも眩しいのでちょっと灰色気味に */
body { background-color: #f8f8f8 !important; }

/* 最新情報に枠線をつける */
#bodyContents div.contents {
    border: solid #aaaaaa 0px;
    border-width: 0px 1px 1px 1px;
}

/* ロゴ非表示 */
h1 { display:none; }

/* ヘッダの背景を透過色に */
#headerArea { background: transparent !important; }

/* ヘッダの高さをautoに */
#headerArea { height: auto !important; }

/* 検索フォーム非表示 */
div.searchForm01{ display: none; }

/* 「最新情報」ヘッダの非表示 */
#mymixiUpdate div.heading01 { display: none; }

/* 最新アルバム非表示 */
#newAlbum { display: none; }

/* 最新ミュージック非表示 */
#newPlaylist { display: none; }

/* 自分の最新情報非表示 */
#myUpdate { display: none; }

/* 広告バナー非表示 */
*.adBanner { display: none !important; }
#adBanner { display: none !important; }

/* mixiニュース下の広告非表示・ボーダーを自然に */
*.prContents { display: none; }
#mixiNewsArea #mixiNews { background: none !important; }
#mixiNewsArea #mixiNews p.moreLink01 { border-bottom: 1px solid #f6a838 !important; }

/* 日記ページ下の広告非表示 */
*.diaryBottomAd { display: none; }

/* 足あとページ縦バナー広告非表示 */
#footprintjack { display: none; }
#footprintjack02 { display: none; }

/* PR企画非表示 */
#prSepecial { display: none; }

/* mikly非表示 */
#miklyContents { display: none; }

/* プロフィール写真下「mixiプレミアムサービスのご案内」非表示 */
#myProfile p.statusIcon { display: none }

}

感想

自分で一からCSS書くより、人様が作ったページに自分が見やすいようにスタイル適用する方が楽しかった。
多分環境依存とか考えてないからもあるんだろうけど、何にしても自分がカスタマイズ好きなのかもしれない。