「ユーザスタイルシートで、mixiリニューアル画面の改造」（FireFox版）

10月1日より、mixiがリニューアルされましたー。できる事がいっぱい増えたよーなのですが、元々mixiをフル活用してたわけではないワタクシにしてみたら、「んんー。ちょっと見にくくなったかもー」ってなのが感想でした。

タダで使用していながら何ですが、もう昔からあの「FLASH広告」が嫌いなのですよ。開けたとたん2つも目に入ってきて、「ちょっと疲れるー」ってなるのですね。しかもリニューアルに伴って全体的に色が薄くなったんで、また総天然色のFLASHが目立つこと目立つこと。

後、個人的に「白ベース」のサイトが「まぶしくて苦手」ってのもありまして。初めて「ユーザスタイルシート」を導入することにしました。

で。「ユーザスタイルシート」とは何ぞや、ちうと「WEBページで使用されてるスタイルシートに、更に手を加えることができる代物」であります。

mixiさんは、リニューアルに伴い、今までTableで構築してたページを、スタイルシートで構築するように修正をかけておられました。なので「どこの部分をどんな色で」とか「どこの部分をどの場所に」とかは、全部スタイルシートに情報がありまして。

ちうことは。「ユーザスタイルシート」で修正して換えられる余地があるのですよ。これはリニューアルしたからこそ、できるよーになってるわけです。そんなもんは利用しなくてはーヽ(´ー｀)ノ

「ユーザスタイルシート」は、使用してるブラウザでそれぞれ用意されてるもんがあるよーなので、ワタクシは通常使用しているFireFox（Ver 2.0.0.7）のアドオンである「Stylish」ってやつで変えてみることにしました。

ついでなんで、「背景色設定」「広告非表示」「文字色（ちょっと薄めに）」「行間設定」「センタリング」と、一発目に気になったとこを変えちゃってみました。こんだけのことですが、大分見やすくなったので満足ー。

ほんまは「3列のまま横幅を850くらいにする」ってのをやりたかったのですが、各ブロックごとに横幅指定してるっぽかったので、力作業が必要と判断して断念しております。

参考になるかどうかは怪しいですが、ワタクシの設定した「ユーザスタイルシート」の内容を、さらしておきます。また、バグとかあったら教えてくださいな。

@-moz-document domain("mixi.jp"){
  *{
    line-height: 1.8em !important;
  }
  body{
    background: #EBE5D8 !important;
    color: #616161 !important;
  }
  #headerArea { 
    margin-left: auto !important;
    margin-right: auto !important;
    width:950px !important;
  }
  #bodyArea{
    margin-left: auto !important;
    margin-right: auto !important;
    width: 950px !important;
    background: #FAF7F0 !important;
  /* 絵文字が入力できなくなるので以下をコメントアウト 
    （2007/10/09 追加） */
    /* overflow:hidden !important; */
  }
  .adBanner,#adBanner,#prSepecial,.prContents,
  .diaryBottomAd,.sponsorList01,
  .messageAreaAd,.finishAd,#footprintjack,#footprintjack02 {
    display:none !important;
  } 

  #oldMain {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 950px !important;
    background: #FAF7F0 !important;
  }

  #footerArea {
    clear:both !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width:950px !important;
  }

  /* ログイン画面のセンタリング （2007/10/03 追加） */
  #login_main {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 950px !important;
  }
}

今度、mixiが「テンプレート」を用意してくれるか、はたまたリニューアルをかけるのかはちょっとわかりませんが、とりあえず、「リニューアルあけ」に臨時対応してみました。参考にしたサイトはこことか、こことか、他にも「ユーザスタイルシート」でぐぐるといろいろ出てくると思うので、興味のある方は調べてみても楽しいかもっすよー。スタイルシートの説明はここが便利っす(*^ーﾟ)b

※ 「ログイン画面のセンタリング」が抜けてたので足しました。（2007/10/03）

※ 絵文字入力に支障が出るので、#bodyArea の overflow:hidden をコメントアウト。（2007/10/09）