Ringo Base


主にAppleに関連する話題についてあれこれ書いているブログです

ホーム > スポンサー広告 > 見にくくなった新デザインのGoogle リーダーを見やすくしてみましたウェブ関連 > 見にくくなった新デザインのGoogle リーダーを見やすくしてみました

スポンサーサイト

Posted on --/--/-- | Categories: スポンサー広告
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


他の方にも見てもらいたいと思ったらシェアしてくれると嬉しいです!
このエントリーをはてなブックマークに追加


| コメント(-)トラックバック(-)

見にくくなった新デザインのGoogle リーダーを見やすくしてみました

Posted on 11/02/2011 | Categories: ウェブ関連
昨日からGoogleリーダーが刷新され新しいデザインになりました。以前のものに比べて視認性が悪くなってしまったので、スタイルシートで下の画像のように見やすくしてみました。

111102-000120111102153206.jpg
クリックすると拡大します

時間が無かったもので下記のスタイルシートはリスト表示の時だけのものとなっています。無駄なコードが多いと思われますので、ここはこうしたほうがいいという所があったら教えていただけるとありがたいです。

私はChromeの「Chrome Stylist」という拡張機能で設定してうまく表示されていますが、おそらくSafariやFirefoxでも同様のアドオンで、少し修正するだけで適用させることができると思います。

#top-bar {
  height: 39px !important;
}

#search {
  padding: 5px 0px 0px 0px !important;
}

#viewer-header {
  height: 39px !important;
}

#viewer-top-controls-container {
  margin: -14px 0px 0px 0px !important;
}

#viewer-header {
  background: #ebeff9 !important;
  padding: 0px 0px 0px 10px !important;
}

#chrome-viewer-container {
  background: #ebeff9 !important;
}

#title-and-status-holder {
  background: #c2cff1 !important;
  padding-left: 13px !important;
  margin: 0px 0px 0px 0px !important;
}

#entries {
  padding-right: 0 !important;
}

#entries.list .collapsed .entry-date {
  margin: 5px 28px 0px 0px !important;
}

#entries.list .collapsed {
  background-color: #ebeff9 !important;
  border-color: #ebeff9 !important;
  margin: -1px 0px 0px 0px !important;
  padding: 0px 0px 2px 0px !important;
}

#entries.list .read .collapsed {
  background-color: #efefef !important;
  border-color: #efefef !important;
  margin: -1px 0px 0px 0px !important;
  padding: 0px 0px 2px 0px !important;
}

#entries.cards .card {
  background-color: #ebeff9 !important;
  border-color: #ebeff9 !important;
  border:1px !important;
  margin: -1px 0px 0px 0px !important;
  padding: 0px 0px 2px 0px !important;
}

#entries.cards .read .card {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  margin: -1px 0px 0px 0px !important;
  padding: 0px 0px 2px 0px !important;
}

#entries.list .collapsed:hover {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  margin: -1px 0px 0px 0px !important;
  padding: 0px 0px 2px 0px !important;
}

#entries.list .read .collapsed:hover {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  margin: -1px 0px 0px 0px !important;
  padding: 0px 0px 2px 0px !important;
}

#entries.cards .card:hover {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  margin: -1px 0px 0px 0px !important;
  padding: 0px 0px 2px 0px !important;
}

#entries.cards .read .card:hover {
  background-color: #ebeff9 !important;
  border-color: #ebeff9 !important;
  border:1px !important;
  margin: -1px 0px 0px 0px !important;
  padding: 0px 0px 2px 0px !important;
}

新デザインは白地になって見にくくなったという方が多いようなので、このスタイルシートが少しでもそのような方の助けになれば嬉しいです。よかったら試してみていただきたいと思います。

【関連記事】



他の方にも見てもらいたいと思ったらシェアしてくれると嬉しいです!
このエントリーをはてなブックマークに追加


コメント
コメント投稿フォーム













管理者にだけ表示を許可する
トラックバック

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。