2004年11月04日

Sageのスタイルシートをカスタマイズ

朝晩めっきり冷え込むようになってきましたが、いかがおすごしですか?ってこんな書き出しで始まるのは、デフォルトのSageっていつもさわやかで涼しげだからです(笑)。ということで、今日はSageのスタイルシートを秋(冬)バージョンにしてみた。出来上がりはこんな感じ。

変更点は、色を変えたのと、フォントサイズを少し大きくしたのと、無駄な空間を少し減らしただけ。やり方は新しくファイルを作って下記を貼り付け適当な名前で保存し、Sageの[Options] - [Settings...]の中の[Use custom CSS]にチェックを入れて、先ほどのファイルを指定するとできます。

html * {
-moz-box-sizing: border-box;
}
html {
line-height: 1.3;
background-color: #fff;
}
body {
margin: 0px;
color: #333;
font-family: Verdana;
}
a:link { text-decoration: none; color: #563; font-weight: bold; }
a:visited { text-decoration: none; color: #452; }
a:hover { text-decoration: underline; }
a:active { text-decoration: none; }
p.item-desc a:link { color: #563; }
#rss-header {
background-color: #f2f2ee;
border: 1px solid #cba;
padding: 6px 8px;
margin: 10px 2%;
}
#rss-title {
font-size: large;
line-height: 1;
margin: 0px;
padding: 0px;
}
#rss-desc {
font-size: small;
margin: 0px;
padding: 5px 0px 0px 20px;
}
div.item {
border: 1px solid #cba;
width: 47%;
min-width: 14em;
margin: 0px 0px 8px 2%;
padding: 0px;
float: left;
}
h2.item-title {
background-color: #f2f2ee;
font-size: small;
font-weight: normal;
line-height: 1.1;
margin: 0px;
padding: 5px 5px 8px 8px;
}
span.item-ordinal {
padding-right: 0.2em;
}
div.item-desc {
min-height: 5em;
font-size: small;
margin: 0px;
padding: 8px 10px;
}
div.item-pubDate {
font-size: small;
margin: 0px;
padding: 5px 10px;
width: 80%;
float: left;
}
div.item-technorati {
font-size: small;
margin: 0px;
padding: 8px 10px;
width: 20%;
float: right;
text-align: right;
}
img {
max-width: 100%;
height: auto;
}

気づいた方もいるかもしれないけど、Technorati(これが何かはよく知らない)へリンクされてるアイコンの色も全体に合わせて変えました(ほんとくだらないことしてるな・・・)。それがこちら。

変え方は、使ってるパソコンの中からsage.jarってファイルを見つけ出し、解凍してでてきたskin\classicの中のtechnorati.gifを差し替えて圧縮しなおしてファイル名を元のとおりsage.jarに戻すだけです。こんなアイコンなんかいらないって方は先ほどの

div.item-technorati {

の下に

display:none;

と入れておくとすっきり。

誰かもっとかっこいいの作って私にください!

2004年11月04日 18:09