パーソナライズドをStylishでカスタマイズ

パーソナライズドに英語版のテーマをあてると目がショボショボしませんか？クラシック以外のテーマはどうも文字の色が淡すぎて読みづらい気がします。本文のリンクはせめて青か黒がいいなあ。今後もっと良さげなテーマも出てくるでしょうが、取りあえずFirefox拡張のStylishを使ってスタイルシートをカスタマイズしました。

Stylishの説明はいろいろあると思いますが。

• ユーザスタイルシートによるカスタマイズ(1) - えむもじら
• ユーザスタイルシートによるカスタマイズ(2) - Stylish - えむもじら

Web DeveloperやDOM Inspectorでスタイルを変えたい要素とそのスタイルを調べ、Stylishでユーザースタイルシートを設定してやるという感じです。

カスタマイズの一例はこちら。ちょっとだけNetvibes風。

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url("http://www.google.com/ig?hl=en") {
a:link, a:visited, a:active {
color:#333333 !important;
text-decoration:underline !important;
}
a:hover, a.alt:hover, a.mtlink:hover {
color: #ff6600 !important;
text-decoration:underline !important;
}
.modtitle, .modtitle_s {
background-color:transparent !important;
background-image:url(http://mestalla.sakura.ne.jp/google/stylish/bg_modtitle.png) !important;
border-bottom-width: 0 !important;
border-color: #a4c98b !important;
}
.modboxin, .modboxin_s {
border-top-width: 0 !important;
border-color: #a4c98b !important;
}
.tab, .selectedtab, .unselectedtab{
border-color: #a4c98b !important;
}
.selectedtab {
color: #333333 !important;
}
.unselectedtab {
background-color: #eff5ff !important;
color: #4e8029 !important;
}
.tab a:link, .tab a:visited, .tab a:active {
color: #4e8029 !important;
text-decoration:none !important;
}
.tab a:hover, .tab a.alt:hover, .tab a.mtlink:hover {
color: #ff6600 !important;
text-decoration:none !important;
}
.fpad {
color: #333333 !important;
}
}