s-style-arts blog

昨日、10月01日にmixiが大幅にリニューアルされて、わたしの周りでも色々賛否意見が出ています。（主に、耳にするのは否の方ばかりですけど。）
ま、mixi的にも色んな思惑があってのリニューアルだっただろうし、中の人も大変な思いをしてがんばった結果だと思うのであえて文句やネガティブな事は言うつもりはなく、気に入らない部分は自分でなんとかすることにして、CSSをいぢれる範囲で変更してみました。

変更前

さて、わたしはリニューアルされる前まで、２コラムで使っていました。自分のプロフィール画像の下あたりに、３コラムと２コラムを切り替えるボタンが付いていたのですが、今回のリニューアルで無くなってしまって３コラムに固定されてしまいました。で、右コラムの上部に結構下品めなFlash広告、ヘッダーの部分にでかい広告と、画面がシンプルでスカスカなデザインになった分そちらばかりに目がいってしまうので、（美しいかどうかは別として広告を目立たせると言う意味では大成功のデザインなのかもしれません。）広告も消したい。
そこで、色々見ていると、友人のNORIさんの記事からFirefoxで変更できるということで、参考にしながら自分なりに気になる部分を追加して変えてみました。

元記事はこちらの偉い人...。“リニューアル後のmixiを2カラム/750px幅化するユーザースタイルシートを書いてみた”by（akiyan.com）

わたしはFirefoxをメインに使っているので結構簡単にできました。
まず“Stylish”というアドオン（拡張機能）をインストールしてやることで、簡単に希望のページ、又はドメインだけ自分で用意したCSSをあてることが出来ます。
単に２コラムにして広告を消すだけなら、先ほどの秋田氏の記事の通り数ステップでミッション完了なのですが、さらに変更するやりかたをちょこっと紹介しておきます。

追加でやりたい事

1. “○○さんの最新情報”の部分の日付で「日」だけ改行されるのが気持ち悪いので変更したい。
2. その下の更新用のリンクで、“動画をアップロード”の「ド」だけ改行になっているのも吐きそう。以下“フォト〜”“レビュー〜”同様
3. 更にこの更新用リンク、この位置だと凄くスクロールが必要なので位置を上の方に変えたい。
4. スカスカなデザインになったぶん白が多く背景がまぶしすぎて目がチラチラしてつらい。

Firefoxの場合まず“Firebug”というアドオンをインストールします。
これは、Webの開発時にとっても役に立つツールで、目的のページを開いた状態でFirebugを使うとマウスで触った所のソースとCSSを表示してくれます。人が書いたコードやCSSってなかなか解らないものですが、これを使うととっても簡単です。変更したい部分のCSSのclassやidなどが解ればこっちのもの。後は、Stylishで“スタイルの管理”画面から“書く...”でCSSを新規に書くか、上記の記事でインストールしたCSSに追加するのであれば、“編集...”をクリックしてCSSを追加します。

/* 「自分の最新情報」変な改行の部分 */
#myUpdate #newMyDiary .contents dl.contentsList02 dd dl dt {
width:7em !important;
}

/* 「日記を書いたり更新用ナビ」の部分 */
#myUpdate ul.actionIcon03 {
position:absolute;
top:58px !important;
left:725px !important;
background:none !important;
border-style: dotted !important;
border-color: #999999 !important;
border-width: 1px !important;
padding:5px !important;
background-color: #f4f4f4 !important;
width:14em !important;
}
#myUpdate ul.actionIcon03 li {
float:none !important;
width:13em !important;
} 

/* 背景の白がまぶしい対策 */
body {
background-color: #f7f7f7 !important;
}

変更後

ってのを追加して上記１〜４の変更を追加しました。
２コラムで広告を消した部分に更新用のリンクを“position:absolute”で位置を指定しています。
bodyタグで全体の背景にうっすらと気持ちグレーを敷いているのでまぶしさも緩和されて少し目にやさしい仕様になったと思います。CSSでのレイアウトになった事によって、ユーザー側でもある程度変更できるようになったのでありがたいですね。HTMLの方でclassもidもあたってない変な部分がある（多分ミスで残ってるのだと思います。）のは指定できないのでなんともできないんですが、今後HTMLが直るのを待ってみましょう。

ユーザーの感情を考えずに、やみくもに広告ばかりを目立たせても、結局、こうやって意味の無いことになってしまうので、ユーザーの心を掴む広告やデザインはなにより一番大切なんだと思います。

**********

追記...
足あとの両脇の縦広告を消すのは

/* 足あとページのたてバナー */
#footprintjack {display:none !important ;}
#footprintjack02 {display:none !important ;}

が良さそう。

後、ヘッダー消したら、グローバルメニューのグレーとFirefoxのタブの色が似ていてブラウザとサイトとの境界なんかわかりにくくなっちゃってたのでちょっとbodyにあてたCSSを改良して上にボーダーを敷いてみた。

/* 背景の白がまぶしい対策 */
body {
background-color: #f7f7f7 !important;
border-top: 8px solid #FFBF64 !important;
}