Home > Software > Firefox:sageのCSSを自分でいじってみる

Firefox:sageのCSSを自分でいじってみる

先日Firefoxの拡張のひとつsage(FirefoxのサイドバーにRSS・ATOM feed リーダ機能を追加する拡張)のオリジナルstyleをエントリーしてみたりしたのですが…

[c*] : Firefox:sage style01+
[c*] : Firefox:sage style02

やってて思ったのが指定する要素が少ないので結構簡単にできちゃうってこと。
CSSを勉強するとっかかりとしてもいいんじゃないかなーと勝手に思いました。
凝ったものを作ろうと思えばきっとできると思うのですがワタシのレベルでそれは無理ってもんです。
でもなにかひとつでも自分で作れるってかなりの満足度です。
自分で作ったstyleでRSSをチェックするっていうのもなかなか楽しいものです。
そんなわけでsageのオリジナルstyleを作ってみるのオススメです。
以下画像つきでsageのCSSのidとclassをあげてみます。

画像をクリックすると大きくなります

画像の赤字がidなのでCSSでは以下のようにします。

#id名 { }

画像の青字はclassなのでCSSでは以下のようにします。

.class名 { }

エントリーの通し番号やTechnoratiへのリンクなど表示させない場合は以下のようにすればOKです。

display: none;

他にもページ全体の指定(html)やBODY部分の指定(body)
リンク(a)や引用(blockquote)や水平線(hr)なんかも好みで指定して完了♪

FirefoxWeb Developer(Web制作者向けのメニューとツールバーを追加する拡張)Edit CSS(CSSをブラウザ上でリアルタイムに擬似編集する拡張)はCSSを編集するにはかなり手放せない必須のエクステンションです♪

Home > Software > Firefox:sageのCSSを自分でいじってみる

Search
Feeds

Page Top