朝顔日記

Colorful Tabs もどきをユーザスタイルで

2006-10-25

IRC の #goingmyway にて Colorful Tabs が Firefox 2.0 に対応しているとかいないとか、話していて、Colorful Tabs 自体はかなり以前に試しに入れてみただけで、まったく使っていないのですが、これってユーザスタイルでも似たようなことできそうだなと思いついたので、試しに書いてみた。

以下、Colorful Tabs もどきのユーザスタイル導入した Firefox 2.0 のスクリーンショットのサムネイルです。等倍画像(約7KB)にリンクしています。

Colorful Tabs もどきのユーザスタイル適応した Firefox 2.0 のスクリーンショットのサムネイル

で、ユーザスタイルは以下のとおり。

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
tab > * {
  background:#FFCCCC !important;
  color:#000000 !important;
}

tab + tab  > * {
  background:#FFCC99 !important;
}

tab + tab + tab > * {
  background:#FFFF99 !important;
}

tab + tab + tab + tab  > * {
  background:#99FF99 !important;
}

tab + tab + tab + tab + tab  > * {
  background:#99FFFF !important;
}

tab + tab + tab + tab + tab + tab  > * {
  background:#CCCCFF !important;
}

tab + tab + tab + tab + tab + tab + tab  > * {
  background:#FFCCFF !important;
}

tab + tab + tab + tab + tab + tab + tab + tab  > * {
  background:#FFFFCC !important;
}

tab + tab + tab + tab + tab + tab + tab + tab + tab  > * {
  background:#FF9900 !important;
}

tab + tab + tab + tab + tab + tab + tab + tab + tab + tab  > * {
  background:#FFFF66 !important;
}

tab + tab + tab + tab + tab + tab + tab + tab + tab + tab + tab  > * {
  background:#33FFFF !important;
}

tab + tab + tab + tab + tab + tab + tab + tab + tab + tab + tab + tab  > * {
  background:#9999FF !important;
}

tab + tab + tab + tab + tab + tab + tab + tab + tab + tab + tab + tab + tab  > * {
  background:#FF99FF !important;
}

tab + tab + tab + tab + tab + tab + tab + tab + tab + tab + tab + tab + tab + tab  > * {
  background:#FFCC66 !important;
}

tab + tab + tab + tab + tab + tab + tab + tab + tab + tab + tab + tab + tab + tab +tab  > * {
  background:#FFFFFF !important;
}

面倒なので、タブの数が15個を越えると変化しません。必要な方は好きなだけ追加して使いましょう。100個とかだとかなり面倒だと思いますが。:p)

また、タブの色は決め打ちです。タブを並べ替えても左から n 番目のタブの色は常に同じ色になります。色は好みの色にカスタマイズしましょう。

vantguarde さんのご指摘のとおり、background を background-color に変更。それに伴い、スクリーンショットも差し替えました。そのほうが断然いいですね。情報多謝。>こたせんせ

SCRAPBLOG » Blog Archive » [userChrome.js] Colorful Tabs にて、拡張機能 userChrome.js を使って、本家本元の Colorful Tabs と同等の動作をするスクリプトが発表されています。素晴らしい。

「Colorful Tabs もどきをユーザスタイルで」へコメントをつける

書き込み時の挙動について
URI らしき文字列には自動的にリンクが張られます。また "<" や、">" は実体参照化されます。
スパム対策のため、リファラを切っていると投稿できません。

この記事へのツッコミ

1: 通りすがり (2006-10-29T21:25:44+09:00)
tab[linkedpanel$="0"]>* {background-color:#FFCC99 !important;}
を0~9まで記述する方法はどうでしょうか?
10色に限定されてしまうのが欠点ですが、これならタブを100個でも楽に色づけできると思います。
2: のり (2006-10-30T12:03:25+09:00)
10色もあれば十分だと思うので、なかなかいいアイディアですね。

トラックバック

1: SCRAPBLOG/タブをカラフルにする userChrome.js (2006-10-29T12:59:35+09:00)
朝顔日記 - Colorful Tabs もどきをユーザスタイルで を見て、これと同じことを userChrome.js で実現できないだろうかと思って作ってみたら、意外とあっさりできた。「Colorful Tabs」という同名...
この記事の永続的 URI ならびに トラックバック ping URI
http://diary.noasobi.net/2006/10/diary_061025b.html