ニコニコ大百科のオートリンクの見た目をはてなっぽくするユーザースタイル
適当に書いてみた。
@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 追記
ちょっと変更。オートリンクが連続している時でも区別できるようにリンクにマージンを設定した。