2007年09月20日

以前、Sage用のスタイルシートを作って、それを自分でずっと愛用していたのですが、最近そのスタイルシートでおかしな箇所を丸めてしまっているのに気づいたので、ついでに気になっていた他のところも合わせて改良してみました。

一応変更した箇所を備忘録的に書いておくと、

  • おかしな箇所を丸めていたのを修正
  • 斜線の背景画像を用意した
  • 日時をブラケットで囲んだ
  • 地味すぎた色合いを少しはっきり・派手に
  • その他細かいところを多量に修正

って感じでしょうか?個人的には結構気に入っていて、人様にもおすすめできると思ってますので、良かったらぜひ使ってみてください。ダウンロードはこちらからどうぞ。

http://www.perfectsky.net/download.html

[追記]
さらに改良してみましたSage-Tooにも対応済みです。

2006年04月22日

Sage用のスタイルシートを制作して公開している人はたくさんいますが、みんなが作ったスタイルシートを、まとめて紹介しているサイトはないかなあと探していたら、何のことはない、本家サイトにそういったページがありました(他にはこんなページも)。

Sage: Styles
http://sage.mozdev.org/styles/

で、いろいろ見ていたのですが、中には結構手の込んだのもあって、スタイルシートをあまりよく知らない私は、ただただ感心するばかり・・・ 特に、上のページには角を丸めたデザインが多いのですが、これってスタイルシート一枚でどうやっているんだろうと思ったら

-moz-border-radius

なんて便利なものがあるんですね。ぜんぜん知らなかったので、ちょっと感動。そして急にこれを使ってひとつ作りたくなってしまいました。

色あいは以前作ったのをベースにしてみました(あれは最低限のカスタマイズしかしていませんでしたが・・・)。いろんなところが、がんがん丸まってます(笑)。表示がおかしな時もありますが、そこはご愛嬌。 破線の表示がたまに汚いのは、Firefoxのバグでしょうか?よく分かりません。このスタイルシートが気に入った方は、ご自由に使ってください。

http://www.perfectsky.net/download/sage/chestnut.css

せっかくここまで作ったので、ついでに色違いも作ってみました。上の色でまず作って、その後に色相を変えただけなので、個人的には最初のが一番好きなんですけどね。

シアン系
http://www.perfectsky.net/download/sage/ocean.css
赤紫系
http://www.perfectsky.net/download/sage/grape.css


[追記]
使っているといろいろと気になるところがあったので、少し改良してみました。破線の表示が汚くなる時があったのも、(無理やりですが)直しました。スクリーンショットも差し替え済みです。

[追記]
少し改良してみました

[追記]
さらに改良してみましたSage-Tooにも対応済みです。

2005年01月21日

先ほどのMSNに関するエントリーを書いた後、記事中に示した新型MSNサーチが出力する検索結果のRSSフィード

http://beta.search.msn.co.jp/results.aspx?q=PEACE&format=rss

Sageが見つけられないことに気がつきました(試しに今ここでルーペのアイコンをクリックしてみてください)。aタグの中も見るはずだけどと思って、試しに「控えめに(Conservative)」だったフィード発見モードを「徹底的に(Exhaustive)」変えると今度はちゃんと見つけられます。そこで、以前から気になっていたこの2つのモードの違いは何なんだと調べると、Erik ArvidssonというSageの開発者の方のブログのこんなエントリーにたどり着きました。

"Exhaustive" means that it will check on other domains and "Conservative" that it will only check on the current domain.

納得!

2004年11月13日

[このエントリーのトラックバック先の記事]

RSSを使い始めたのはけっこう最近で、その時からRSSリーダはSageを主に使ってます。最初のころは、どうやってSageがRSSのFeedを探してくるのかわからなかったんですが、このブログをスタートさせた時にMobavle Typeのテンプレートをいじってて

<link rel="alternate" type="application/rss+xml" ...

という部分を見つけ、あーこれだろうなという気がしてました。

それ以来、そのことについては忘れていたけど、ちょっと他にもRSSについて勉強したくなり、いろいろ調べてたら、NDO::Weblogのこんなエントリーを見つけ、その予感は確信に(この方法は RSS auto-discovery と呼ばれるそうです)。おれって冴えてる!とちょっとうれしくなったけど、このエントリーにも少し書いてあるように、どうもRSSリーダがFeedを探す方法ってのは他にもいろいろあるみたいです。

例えば、Mozilla Japanのライブブックマークの解説ページでも紹介されている朝日新聞のRSSのページでは、Firefoxの右下に例のアイコンが出てきません。これはおそらく、先ほど書いた <link ... がHTMLファイルの中に含まれてないからのようです。ところがSageはこのページでもRSSのFeedを見つけてくる。気になって調べてみたら、Sageではページの中のaタグの内容も見ていることがわかりました。

自分は先ほどの RSS auto-discovery と呼ばれる方法にどれぐらい権威があるのか知りませんし、RSSリーダに求められる正しい立ち振る舞いもわかりません。要するに、今回でいうとFirefox本体とSage、どちらが普通か(加えてアサヒ・コムはこれでいいのか)わからないけど、ライブブックマークで十分って方はちょっと注意かな?


* * * * * * *


今更ですが、普段メインで使っているWindowsにFirefox 1.0入れてみました。特に何も変わらないけど、かなり気分がいい。イエーイ!

2004年11月04日

朝晩めっきり冷え込むようになってきましたが、いかがおすごしですか?ってこんな書き出しで始まるのは、デフォルトの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月01日

[このエントリーのトラックバック先の記事]

えむもじらで面白い記事見つけたんで恐れ多くもトラックバックさせていただきます。初トラックバックちゃんとできるかな?

ではいきなり行ってみます。一つ目は

All-in-One Gestures

とりあえずこれを入れないと二つ目以降のExtensionを入れるのにもさしつかえが出るので(かなりおおげさ)、これしかない。

二つ目は

Web Developer

これを最初知ったときは、はっきり言って感動した。ガチャガチャさわっていたらブロック要素のアウトラインが表示されて「なにこれ?」→「すっげー」→「やっベー(その時見てた自分のサイトが)」ってなったのを覚えています。このExtensionは本当に好きなExtensionなので、いつかメインサイトでしっかり記事を書くかも・・・

三つ目は

Sage

最初は何が便利なのかぜんぜんわからなかったRSSも気づいたらけっこうよく使うようになりました。RSSリーダっていろいろあるけど、Firefox大好きっ子としては、もうこれでいいよねって思う。

実を言うと、今までは大抵最初にTabbrowser Extensionsを入れてました。けど、Firefox1.0がリリースされる時に(今もすでに?)、Firefox本体でタブ周りの機能が強化されるって話なので、Tabbrowser Extensionsはもう使わずに行こうかなあと思ってます。だから今回は三つの中に入れてないんだけど、だったら本当はタイトルの前に「次回Firefoxをインストールした時に」っていうのを付けないといけないんだけどね・・・

もちろん他にもExtension使ってるけど、お題で3個ってなっているので、今回は他にはふれません。本棚の中身を見るとその人がどんな人かがわかるなんて言うけど、FirefoxのExtensionもそれに近いものがあるような気がするなあ。