昨日からGoogleリーダーが刷新され新しいデザインになりました。以前のものに比べて視認性が悪くなってしまったので、スタイルシートで下の画像のように見やすくしてみました。
クリックすると拡大します
時間が無かったもので下記のスタイルシートはリスト表示の時だけのものとなっています。無駄なコードが多いと思われますので、ここはこうしたほうがいいという所があったら教えていただけるとありがたいです。
私は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;
}
新デザインは白地になって見にくくなったという方が多いようなので、このスタイルシートが少しでもそのような方の助けになれば嬉しいです。よかったら試してみていただきたいと思います。
【関連記事】