りんごが好きなのでぃす

Macを中心に、たま〜にiPhoneやiPadなどの話題も届けていたら今年で26年目を迎えてました

Google ReaderのCSSをプチ修正

 

Google Readerの見栄えが Mac らしくないので少し手直し

11月1日に Google Reader の UI が刷新されたことで前の UI で個人的に気に入っていなかった……

  • デザインが酷い
  • フォントの見栄えがよろしくない
  • リスト表示の境界線付近に折りたたみで隠れているテキストの一部が漏れてて汚い

という点が直る事を期待していましたが、直ったのはデザインだけ(個人的には嫌いではない)。

というわけで、残り二者を解決すべく該当部分の CSS をプチ修正。

ちなみに境界線付近でテキストの一部が漏れている…というのは中段右側の「バッテリー」というテキストの下あたりに見えるゴミみたいなもの。リストをクリックして展開した時に表示されるテキストの上部数ピクセルが漏れている。

まずこちらが修正前。

gr_cstmcss001.gif

そして修正したのがこちら。

gr_cstmcss002.gif

全体(各 CSS クラス)でフォントに Myriad Pro と HiraMaruPro-W4 (ヒラギノ丸ゴシック W4) を指定し、font-size を 13px、line-hight を 14px、letter-spacing に 1px を指定しただけ。bold (太字) も解除した方がより奇麗に見えそうなんだけど今回は割愛。

上図のように部分を抜き出してみるとあまり違いが感じられないかもしれませんが、ページ全体から受ける印象はこの程度の変更でも結構なものです。変に変え過ぎない、というのもコツかも?

Google Chrome の場合は Stylebot という機能拡張が便利です (初級程度の CSS の知識は必要) 。Safari だとカスタム CSS を作成して環境設定から指定したり、Firefox なら機能拡張を用いたりすれば同じようにカスタマイズできます。

CSS を自身で記述される場合は MacBook の小部屋さんで紹介されているエントリーが参考になりますので併せてご覧下さい。

余談ですが、Gmail にも似たような変更を施しました。