ニコニコ大百科のオートリンクの見た目をはてなっぽくするユーザースタイル

ニコニコ動画

適当に書いてみた。

Before
After
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("dic.nicovideo.jp") {
  a.auto, a.auto-hdn {
    color: inherit !important;
    border-bottom: 1px solid silver !important;
    margin: auto 1px !important;
  }
  a.auto:hover, a.auto-hdn:hover,
  a.auto:focus, a.auto-hdn:focus {
    text-decoration: none !important;
    border-bottom-color: #ff8800 !important;
    color: #ff8800 !important;
  }
  :focus {
    outline: 1px dotted rgb(107, 137, 89) !important;
  }
}

本当はボーダーじゃなくて下線でやりたかったんだけど，下線の色を変えるプロパティはIEとSafariしか対応していないようだ。ボーダーは位置が下すぎるから困る。Firefoxでもtext-underline-colorが使えればいいのに。
まあ何はともあれ。個人的には見やすくなったと思う。関連項目のところが少し寂しくなるけどまあいいか。
ちなみに最後の:focusは大百科側のCSSで:focus { outline: 0; }って指定がしてあるのを打ち消すためにやってます。アウトラインがないとリンクにフォーカスが当たってるかどうかわかんないので。

2008/7/19 1:49 追記

ちょっと変更。オートリンクが連続している時でも区別できるようにリンクにマージンを設定した。

2008/7/31 8:48 追記

さらに変更した→ニコニコ大百科のオートリンクの見た目をはてなっぽくするユーザースタイル(改良) - なんとなく目記