新しいiGoogleのUIが酷くなったのでユーザーCSSを書いたよ

iGoogleをRSSリーダーとして常用してるのですが、今回のリニューアルは酷い。

新iGoogle
新しいのはこんなの

開いた瞬間に、見やすく並べてあったRSSがバラバラに再配置されたのにはさすがにイラッときました。
一つ一つドラッグしないといけないし、件数多いと直すのも一手間です。
まぁそれはいいとして、デザインが酷い。白飛びして見づらくて仕方ない。
これはもうユーザーCSSいじるしか…と思いちゃちゃっとやっつけました。

手直しした新iGoogle
手直ししてこんな感じ

サイドバーが無くなったのも痛かったんですが、もう中身のHTMLごと円環の理に導かれてしまったので泣く泣く放置しました。
ていうか、上部の設計酷すぎませんか?
ヘッダー部分に設定ボタンあるのに、さらに設定ボタンを追加するとか、タイトルがかぶってるとか(iGoogleのロゴをGoogleに直してiGoogleって書き直す必要あったの?)とかもう散々です。高さまで変わってるし。

旧iGoogleはこちら↓

旧iGoogle

自分のiGoogleは一度新しいのに変更してしまったので、真っ白モードは戻らないみたいでSSが撮れなかったんですが、サイドバーもあるし、上部も旧バージョンのほうがまだマシってものです。

ちなみに、ユーザーCSSを効かせるとこうなります。

手直しした旧iGoogle

新旧共に同じCSSを充ててます。
サイドバー部分の記述も含んでるので、むしろ旧バージョン用なんですが。

  • 記事横の[+]ボタン(今は横向き▲ボタン)を押すと記事が展開されるけど、全く不要なので削除
  • マージンと色の調整
  • 記事を1件毎交互に背景色を変更
  • hover時の背景色変更と記事のvisited色を追加

簡単ですが、こんな感じのことをしてます。
ちょっと調整しただけですが、自分的にはわりと見やすくなったと思います。

というわけで、一応CSSファイルを置いておきます。ご自由にDLしてみてください。
iGoogleのスタイルをいじりたい人はこれを使ったらちょっといじりやすいと思います。(簡単なコメントも付けてあります)

ユーザーCSSの使い方がわからない人は…、と思ってググってみましたが、最近ユーザーCSSについて書いてる記事少ないですね…。

このあたりがわかりやすいかもしれません。不足であれば、お使いのブラウザ名+ユーザースタイルシートなどでググってみてください。

ついでに、「PR:」や「AD:」などがエントリー一覧に出てくるのが邪魔くさいのでJavascriptで消してしまうユーザーJavascriptも書いたので一応置いておきます。
Greasmonkeyとしても流用できるはず。

何かあったらTwitterとかメール等でご連絡ください。

CSSもJavascriptもいじりましたが、根本的には納得いかないですね…。とりあえず、強制的に新バージョンに切り替わるまでは旧バージョンを使っていきます。
gmailも酷かった…。あの疑似インラインフレームだけはやめて欲しいものです。チェックボックス上でspaceキー押すとスクロールしちゃうとかありえない!

と、色々書きましたが、iGoogleの利用者っているんですかね…(周りで使ってる人見たこと無い)

追記:(2012/5/24)

昨日CSS書いたのに、今日見たらCSS崩れててびっくり。
まさかのタイミングでGoogleさんがclass名変えたりclass自体無くしてくれてました。
現在は上記のCSSファイルを最新版に更新してあるので問題なく使えるはずです。
もしかしたらiGoogleの更新具合が人によって違うかもしれないので、場合によっては崩れるかもしれないので、その場合は自力修正するなり、報告をもらえれば対応します。

追記:(2012/6/6)

「PR:」などを削除するJavascriptをちょっと修正したので更新しました。

NGワードを追加しやすくしたのと、Ajaxによるリフレッシュがかかった場合に機能しなかったのを改善しました。

追記:(2012/6/11)

iGoogleのclass名が一つ変更された(RSSタイトル横の設定部分)ので、iGoogle用CSSをアップデートしました。

追記:(2012/6/14)

iGoogleのclass名がまた変えられたのでCSSをアップデートしました。
こう頻繁に無意味にちょこちょこ変えられると本気で嫌がらせかと…。

追記:(2012/6/21)

またiGoogleのclass名がまた変えられたのでCSSをアップデートしました。
徹底的に修正し返してやることにしました。

追記:(2012/6/28)

恒例の修正…

  • コメント(0)
  • トラックバック(0)
  • Mixi Check
  • はてなブックマーク数 はてなブックマークコメント

Track back

このエントリーのトラックバックURL

Your Comment





Tag Cloud

About

drop

Author:飴(drop)

web技術に関するtipsや主にweb関連のニュースなどをメモ的に記していきます。

このサイトについて

RSS購読