#mixi新デザイン自己流Hack
10月1日の新デザインへの移行でいきなり物議を醸しているmixi
特にwebデザインコミュニティではいろいろな意見が出ています。そこでブラウズにFireFoxを使っている僕としては、ユーザースタイルシートを使わない手は無い。anti.dmz-plus.comさんの記事「mixiの新デザインをHackしてみる」をもとに、CSSでmixiのレイアウトを少しだけ自分好みにしてみました。
1枚目の画像は自分のホーム。2枚目は日記のページ。今回のデザイン変更でページ全体が真っ白な印象になっているのが不評の原因だと思うので、僕は重要度の低い左右のエリアに色をつけました。これで中央のメインコンテンツ部分が大分見やすくなります。
それと、右の画像では変更の効果をわかりやすくするために広告の表示を一時的に制御しています。（mixiは広告収入で成り立っているので、広告の非表示化はmixiの利益を損なう可能性があります。実行の際は自己責任でお願いします。）
では、肝心のCSSを以下に掲載します。
@-moz-document domain(mixi.jp){
*{
line-height: 1.5em !important;
}
#bodyContents{
background-color:#FFFFFF !important;
}
#bodySub .contents{
background-color:#F2F2F2 !important;
}
#bodySub ul{
background-color:#F2F2F2 !important;
}
#bodySub .moreLink01{
background-color:#F2F2F2 !important;
}
#bodySide .contents{
background-color:#F2F2F2 !important;
}
#bodySide .contents td{
background-color:#F2F2F2 !important;
}
#bodySide .listBoxUtility01{
background-color:#F2F2F2 !important;
}
#bodyMainAreaSub .contents{
background-color:#F2F2F2 !important;
}
#bodyMainAreaSub dd{
background-color:#F2F2F2 !important;
}
scrollbar[orient="horizontal"] {
display: none !important;
}
}
下記のディレクトリにあるuserContent-example.cssと言うファイルをコピー、同じフォルダ内にuserContent.cssとリネームして設置。その中に上記のCSSをコピー＆ペーストで上書き保存したあと、FireFoxを再起動すればOKです。
Windows Vista
C:¥Users¥*****¥AppData¥Roaming¥Mozilla¥Firefox¥Profiles¥*****¥chrome
Windows XP
C:¥Documents and Settings¥*****¥Application Data¥Mozilla¥Firefox¥Profiles¥********¥chrome
※他にも色々な方がそれぞれの好みに合わせてカスタマイズを楽しんでいるようなので以下に紹介します。
■いろいろ感想文「ユーザスタイルシートで、mixiリニューアル画面の改造」（FireFox版）
■akiyan.com「リニューアル後のmixiを2カラム/750px幅化するユーザースタイルシートを書いてみた」
■ケーズメモ「リニューアル後のmixiの表示をユーザースタイルシートで変えてみる IE/Sleipnir編」
■しゃおの雑記帳はてな支店「mixi２ペイン化ユーザスタイルシート」
#この記事へのコメント
記入の必要性が無い場合はメールアドレス欄未記入を推奨します。
#この記事へのトラックバック
この記事のトラックバックURL » http://blog.gragre.com/trackback/304947
10月1日より、mixiがリニューアルされましたー。できる事がいっぱい増えたよーなのですが、元々mixiをフル活用してたわけではないワタクシにしてみたら、「んんー。ちょっと見にくくなったかもー」ってなのが感想でした。タダで使用していながら何ですが、もう昔からあ
mixiのデザインをHackして見やすくする裏技 10月1日からmixiのデザインが一新されました 今まで２列と３列とでデザインを選択して設定できてましたが、 リニューアルにより...
