SmallStyle

_ フレッシュリーダーの見た目をカスタマイズ

フレッシュリーダーの機能ではロゴの変更しかできませんが，Stylish を使って，フレッシュリーダーの見た目をカスタマイズしてみました．最初は Bloglines 風にしようかとやり始めてみたのですが，そのまんまの色だと水色がきつすぎて気に入らなかったので，結局自分好みの配色になってしまった．

変更したのはナビゲーションバーの背景と，Feed アイコン，あとは記事表示のレイアウトを若干変更して，微妙にグラデーションかけたりとか．Feed アイコンについては，更新された Feed は太字で表示されますが，アイコンも更新されたものは別のアイコンを表示するようにしてみました．

タイトルだけの Feed だとかなり寂しい感じになってしまいますが，要約，全文が入った Feed だとそれなりに見た目もよくなりました．

カスタムスタイルシートやスタイル切り替え機能みたいなものが，フレッシュリーダーでいずれ実装されるとは思いますが，Firefox を使っている人なら Stylish や userContent.css と，@-moz-document を利用して，自分好みに見栄えをいじることが可能になります．

今回は，Feed アイコンに famfamfam.com: Silk Icons を，背景の作成には Background Image Maker を利用させてもらいました．画像はサーバから読み込む形でもよかったのですが，base64 encoding したものを書き込んで対応させて見ました．

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("your.freshreader.domain") {

/* ナビゲーション */
div.subnavi {
   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAKAQMAAAGlFp8XAAAABlBMVEX///7N4O8awr0NAAAAAXRSTlMAQObYZgAAABFJREFUCJljYCAP/IeAD8QwAHt8J47bPNsgAAAAAElFTkSuQmCC) !important;
   border: none !important;
   }

/* Feed icon */
.categorylist .feedlist li {
   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAKYSURBVHjaYvz//z8DJQAggFjAZCsjN4Omrj+DmMVSBlY+Boa/fyCy/35D2P/+QjGQ/fMLA8PLSzMYku9mgpQABBDEAC2jXAaVeFsGaWcGBkZmBobfP0C6GRhArvvzHWoYlA8ygP90BsNEER6G/DexAAEEMUDYoJ1B3IaB4cNtBoYvLxgYvj8D2vwbqglo818Q/gdxAYcEA4OQLgMDt1IMUGcsQABBDPjPDFH46gwDg3kj0IC3DAyf7jMwvLnKwPDiPMT5IK+ADPn5kIGBVwnIBkIgAAggiAG/f0IU/PoJ8QKXGASLmwJpaQaGO9uAGr9CXPKfEagO6K3vEK8BBBDEgJ9AP397D5QA0keALuBXZGAQ1WFgkDBiYFByB1oA9M6NzUB17yAG/PwM0QMEAAEEMeDXN4jtIAO+A534+h4Dw+3dDAzKQM3qvkDsAwxMoAtPzwd65z/ENd9+grUCBBDEgO9Ajb+Bgj+BgjaVoEBhYLi5nYHh8jqgONDZJvHAmPJjYHgGDJN7RxkYfgBd8ANiAEAAQQ34BnEFyABRTUi0gQLsF9DWC2uAsaTCwKBozcAgDfTS9YMQF/z5ywhSBhBATGDFP75DBH/9YmDYVsXAcP8I0P/AMNDwgnjt/kmIoRLaEK+A1ILCBQgAAgjqgp/QcAAa8PgCRFLRBpqQgF54chligIAUJCZAFv7+BxYCCCCIAZ/fMDB8/QhJD39BhlxkYJjkCjEAhN88YGDodYQkLCaglh+gQPwCdj1AAEEMuPJqEYP8TXMGPnF1SLKFpr7//xBJGAbevWRgeAQMzHMMs0BcgABihOdGd8a5DCrsiQzsXP/BUQUWBkb6fygbFKggzpevTAzHGbIZbv+fBlIBEECMlGZngAADAB59HbQpnYoFAAAAAElFTkSuQmCC) no-repeat 0px 2px !important;
   }

/* Feed icon unread */
.categorylist .feedlist li a.unread{
   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAMBSURBVHjaYvz//z8DJQAggFjAZCsjN4Omrj+DmMVSBlY+Boa/fyCy/35D2P/+QjGQ/fMLA8PLSzMYku9mgpQABBDEAC2jXAaVeFsGaWcGBkZmBobfP0C6GRhArvvzHWoYlA8ygP90BsNEER6G/DexAAEEMUDYoJ1B3IaB4cNtBoYvLxgYvj8D2vwbqglo818Q/gdxAYcEA4OQLgMDt1IMUGcsQABBDPjPDFH46gwDg3kj0IC3DAyf7jMwvLnKwPDiPMT5IK+ADPn5kIGBVwnIBkIgAAggiAG/f0IU/PoJ8QKXGASLmwJpaQaGO9uAGr9CXPKfEagO6K3vEK8BBBDEgJ9AP397D5QA0keALuBXZGAQ1WFgkDBiYFByB1oA9M6NzUB17yAG/PwM0QMEAAHEBCZ/fYPYDjLgPdCJd/YyMBzrZ2C4uISB4cdHBgZ1H4aK77cY0n7dhWgEuebbT7BWgACCGPAdKPgbKPgTKGhRysBgU87AIGbAwHB5HQPDlQ1gJT+ANsuIaDJE/AYG9A+gC35ADAAIIIgXvn+DuAJkgKgmWKhgdwYocBh+XZvM8OvyRAZJQRUGTQlzhs8/vjJ43lnEsO3PX0agZxgAAghiwI/vEGf9+sXAsK2KgUHTi+HPv18MrtrxDH///wMG/l9gqvjP8OzjYwZdGWuGL8BAtPpxkOlrCxMjQABBXfATGg5AAx5fAAfajz+/wJofvr3N8BsY/3+AqfI3MG18Agaggawtw5ff3xhO3j/yAyCAIAZ8fsPA8PUjJD38BRlykeEHxw+GP8CoFeeTA2r+Czbs+cdHDEI8EgznHh9leHHjCMM3RgYBgACCGHDl1SIG+ZvmDHzi6pBk+5fh+8c7DAuP9zD8AnrlJ9A1iiJaDBZKbgynHx5heHrzAMPG7QxzuS78/w4QQIzw3OjOOJdBhT2RgZ3rP8M/oBhYGBj0/yFsW9EvjMoKjgxvr+xlWLaFIZ/32v9JIBUAAcRIbHZWqmN8/fcfs8j3f39ZX7X9/wMTBwgwAD5jU2E9CK0iAAAAAElFTkSuQmCC) no-repeat 0px 0px !important;
   margin-left: -18px !important;
   padding-left: 18px !important;
   padding-bottom: 2px !important;
   }

/* タイトル */
div.feedtitle {
   background-color: #E3ECEF !important;
   border: none !important;
   border-bottom: solid 2px #9BA1A3 !important;
   }

div.command {
   background-color: #9BA1A3 !important;
   color: #fff !important;
   }

div.command a {
   color: #fff !important;
   text-decoration: none !important;
   }

div.command a:hover {
   text-decoration: underline !important;
   }

div.main {
   color: #000 !important;
   }

/* 記事タイトル */
div.itemtitle {
   border: none !important;
   background: none !important;
   font-size: 150% !important;
   }

div.itemtitle a {
   text-decoration: underline !important;
   }

/* 記事背景 */
div.itembody {
   border: none !important;
   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAeCAMAAADQFyqnAAAAZlBMVEX///7////u7u7////+/v79/f39/f38/Pz8/Pz7+/v7+/v6+vr5+fn5+fn4+Pj4+Pj39/f39/f29vb19fX19fX09PT09PTz8/Pz8/Py8vLx8fHx8fHw8PDw8PDv7+/v7+/u7u7u7u7/SXSLAAAAUklEQVRIicXBhQ2AQAAAsUtw53GH/adkjGuJJMQSEgmphExCLqGQUEqoJNQSGgmthE5CLyFIGCSMEiYJs4RFwiphk7BLOCScEi4Jt4RHwivhk/woA/YZgra+9wAAAABJRU5ErkJggg%3D%3D) repeat-x bottom left !important;
   margin: 0 !important;
   }

/* 全文・要約がある場合 */
div.itembody + div.postdate {
   background-color: #eee !important;
   border-bottom: solid 3px #ccc !important;
   margin: 0 !important;
   }

/* 更新日時がある場合 */
div.itemtitle + div.postdate {
   text-align: left !important;
   padding-left: 2em !important;
   padding-bottom: 3px !important;
   border-bottom: dashed 1px #ccc !important;
   }

/* タイトルのみの場合 */
div.itemtitle + div.itemtitle {
   border-top: dashed 1px #ccc !important;
   }
}

フレーム分割されたサイトに対して Stylish でカスタマイズすると，なんだかうまく反映されないことがあります．すべて定義の後ろに !important をつけると，この現象を回避できるような気がするけど，どうなんだろう…

2006-02-20追記:@-moz-document ブロックの閉じ位置がおかしかったので修正．