はてなキーワードのリンクを明示的にするユーザースタイル

個人的にはもう 2年以上愛用しているのですが、ここでは紹介していなかったので書いてみます。

@-moz-document domain("hatena.ne.jp") {
    a.keyword:before,
    div.related-keyword a:before {
        content : "[";
        color : deeppink;
    }
    a.keyword:after,
    div.related-keyword a:after {
        content : "]";
        color : deeppink;
    }
}

これで、はてなキーワードがピンクの [ ] で括られます。キーワードごとに [ ] がつくので、連続して出現するキーワードの区切り位置や、意図しないキーワードへのリンクもひと目でわかります。色はピンクである必要はありませんが、単純に黒などにすると暗い背景色のページでは目立たないというのと、ピンクならコンテンツに [ ] が使われている場合でも色が被りにくいと思ったからです。実際に、これまで背景色に溶け込んでしまったり、地の文と混ざったりということはありませんでした。
自分のダイアリーではなくて恐縮ですが、id:tomoya さんのダイアリーを例にキャプチャすると、以下のような感じになります（文脈と関係ないキーワードにリンクされている例が自分のダイアリーですぐ見つからなかったので）。最後の段落で、無関係な「イオ」というキーワードにリンクされています。

グループキーワードを表示する設定にしていて、そのキーワードも区別したい場合は

@-moz-document domain("hatena.ne.jp") {
    a.keyword:before,
    a.okeyword:before,
    div.related-keyword a:before {
        content : "[";
        color : deeppink;
    }
    a.keyword:after,
    a.okeyword:after,
    div.related-keyword a:after {
        content : "]";
        color : deeppink;
    }
}

のようにグループキーワードに付加される class も指定します。
キーワードリンクはデフォルトでは下線が出ませんが、[]ではなく下線で表示したい場合は例えば下記のようにします。

@-moz-document domain("hatena.ne.jp") {
    a.keyword:link,
    a.keyword:visited,
    a.okeyword:link,
    a.okeyword:visited {
        border : none !important;
        text-decoration : underline !important;
    }
    a.keyword:hover,
    a.okeyword:hover {
        background-color : #ccc !important;
    }
}

:hover で背景色を変更しているのは、キーワードが連続して出現する場合の区切り位置がわかるようにするためです。