かっこいい はてなRSSのスタイルを見たい - higepon blog、と言われたので、かっこよくはないけど自作の設定を公開してみます。
特徴はこんな感じです。
- 1カラム
- グループ一覧は上のメニューの中に、しかもなぜか右から並んでいる
- もっと読む状態の画像もfloat:leftして、テキスト情報を多く
- いらない情報は極力出さない(サマリ中の画像、フィード一覧、キーボードショートカット一覧、アンテナ表示w)
追記
- firefox限定です
- グループが多いと表示が乱れます
img { border: none; } form { margin: 0; padding: 0; display: inline; } body { margin: 0; padding: 0; font-size: 80%; } #main-body { margin: 0 0 0 1em; } #main { margin: 0; } h1,h2,h3{ font-size:100%; margin:0; padding:0; } /* header */ #bannersub { margin: 0.5em 0.5em 4px 0.5em; padding: 4px 0 24px 0.5em; color: #000; background: #fff; border: 2px solid gray; -moz-border-radius: 10px; } #bannersub td { color: #000; } #bannersub td a { text-decoration: none; border-bottom: 1px solid #000; color: #000; } /* h1, breadcrumbs */ h1 { margin: 0 0 0 0.5em; padding : 0; float: left; } #breadcrumbs { margin: 0 0 0 1em; float: left; } #breadcrumbs a { color: 000; text-decoration: none; border-bottom: 1px solid #000; } form#changeviewmode { margin: 0 0 0 0.5em; padding : 0; float: left; } ul.modelist { margin: 0; padding : 0; display: inline; } ul.modelist li { margin: 0 0.5em 0 0; padding : 0; display: inline; list-style: none; } #antennamode { display: none;} /* main */ #main { clear: both; } div.sponsor { margin: 0 0 0 1em; padding : 0; } div.sponsor ul { margin: 0; padding : 0; display: inline; } div.sponsor ul li { margin: 0 0.5em 0 0; padding : 0; display: inline; list-style: none; } div.sponsor ul li a { color: #000; text-decoration: none; } h2 { margin: 0 0.5em 0 1em; padding : 0; float: left; } .pager { margin: 0 0.5em 0 0.5em; padding : 0; float: left; } .pager a { color: 000; text-decoration: none; border-bottom: 1px solid #000; } #togglebookmark { margin: 0 0.5em 0 0.5em; padding : 0; } ul.modelist li{ margin-right:10px; padding: 2px; cursor:pointer; border: 1px solid #bbe; background: #eef; } ul.modelist li.selected{ font-weight:bold; background: #ccf; } /* item */ .item-unread , .item-read , .item-guest , .item-update { margin: 0 0.5em 0.5em 0.5em; padding: 0.5em; border: 2px solid gray; -moz-border-radius: 10px; clear: both; } h3 a.entry-title { font-size: 110%; text-decoration: none; color: #000; border-bottom: 1px solid #000; } div.summary img { display: none; } img.siteimage { display: none; } div.summary a { text-decoration: none; color: #000; border-bottom: 1px solid #000; } em a.users{ color:#FF6666; background:#FFF0F0; } strong a.users{ color:#FF0000; background:#FFCCCC; } em{ font-style:normal; } a.b_entry { padding-left: 16px; background: url(http://b.hatena.ne.jp/images/entry.gif) no-repeat; } a.b_entry img { display: none; } .tooltip-activator , .tooltip-close , .tooltip-loading { display: none; } .summary { margin: 2px 0 2px 0 ; padding: 0.5em; background: #eee; } .content-body { margin: 2px 0 2px 0 ; padding: 0.5em; border: 1px solid #aaa; clear: both; } .content-body img , .content-body div img { float: left; margin: 0 4px 4px 0; clear: both; } .content-body div { clear: both; } form.b_append { clear: both; } form.b_append input { height: 12px; } form.b_append input.field { height: 16px; border: 1px solid #aaa; } div.content-button { float: left; } div.content-button button { background: #eee; border: 1px solid #aaa; } div.content-footer { clear: both; } div.item-footer { clear: both; display: inline; } div.item-footer a { color: #000; text-decoration: none; } div.item-footer img { clear: both; width: 12px; height: 12px; } .item-read { border: 2px dashed #eee; } .item-read h3 a.entry-title { color: #aaa; border-bottom: 1px solid #aaa; } .item-read .summary { color: #aaa; } .item-read div.item-footer { color: #aaa; } .item-read .content-body { color: #aaa; } .item-read div.item-footer a { color: #99f } .item-read div.content-button button { color: #aaa; } /* groups */ .groups { position: absolute; width: 90%; margin: 0; padding: 0; left: 14px; top: 72px; background: #fff; } .group-title { display: none; } .group-title img { width: 12px; height: 12px; } ul.group-list { margin: 0; padding : 0; display: inline; } ul.group-list li { margin: 0 0 0 0.5em; padding : 0; display: inline; list-style: none; float: right; } ul.group-list li span.count { display: none; } ul.group-list li span.selected { background:#ccc; } ul.group-list li span.unread { font-weight: bold; } form.addform { display: none; } /* feeds, etc */ .feeds , .keyusage { display: none; } /* footer */ #footer { text-align: center; margin: 1em; }