いろきゅうの(元)はてなダイアリー

はてなダイアリーから移行中…

google reader の stylish 用スタイルを自分なりに書いてみた

http://ir9.jp/hd11/1101_00.png

無いわー。横スクロールバーとか無いわー…

というわけで、google reader がもの凄く見づらいデザインになってしまってぐんにょり。 左側の無駄な空きスペースも気になるわ、未読のエントリーがあるチャンネルがどれか解りづらいわ(太文字にはなってるけど…)

とまぁ、色々と不満があるので、徐々に改造することにしました。 FirefoxStylish 拡張機能 を利用して、CSSを自前で設定したものにオーバーライドさせてしまいましょう!!


…ということで多少頑張った結果がこちらになります。

http://ir9.jp/hd11/1101_01.png

あんまり変わってねぇーじゃねーか! って言わないで(ぉ

  • ブラウザの横幅が狭い時の横スクロールバーを出ないようにした。
  • 未読の項目に色を付けた
  • 更新ボタンを小さくした
  • ツリービューとエントリービューの横幅を調整
  • ツリービューの左側の余白を削除
  • Activeなエントリーで、Boxの右側の線が出ないのを出るようにした

…多少改善されたとは思うものの、エントリー表示エリアが非常に見づらい状況ですねぇ…。まだまだ弄っていかないと。


一方その頃、gmail

http://ir9.jp/hd11/1101_02.png

えー orz

近々置き換わるらしい新デザイン を先取りしてみたんですが…えー(苦笑 orz

こっちも弄くらんとなぁー



CSSリポジトリ

@namespace url(http://www.w3.org/1999/xhtml);
/* charset = utf-8 */

@-moz-document url("http://www.google.co.jp/reader/view/") {

#sub-tree-item-0-main > UL
{
  margin-left : -2.5em  !important;
}

#viewer-refresh
{
  width     : auto !important;
  min-width : inherit !important;
}

#chrome,
#chrome-viewer-container,
#chrome-viewer,
#viewer-header-container
{
  width     : auto !important;
  min-width : 0px  !important;
}

HTML,
BODY,
#main
{
  height   : auto !important;
  margin   : 0px  !important;
  padding  : 0px  !important;
  overflow : hidden !important;
}

/* 左と右の分割量調整 */
#nav
{
  width : 240px !important;
}

#chrome
{
  margin-left : 240px !important;
}

/* 未読が無い場合の色 */
div.name-text
{
  color : #999 !important;
}

/* 未読がある場合の色 */
div.name-unread
{
  color : #d54937 !important;
}

/* 右側の項目の幅調整 - コレがないと右側に無駄に空白が入る */
#entries
{
  padding-right : 5px !important;
}

/* Active な entry にて、Box右側の線が消えるので対処 */
div.card-common
{
  border-right-width : 2px   !important;
  border-right-style : solid !important;

  padding-right : 1em !important;
}

}