朝顔日記

これまで私は、target=_"blank" なリンクを見極める用途では以下のようなものを Firefox の userContent.css に書いていました。

a[target="_blank"]:after {
    content :"[ベ]";
    font-size :smaller;
    color :#ff3333;
    margin :auto 0.25em;
}

まぁ、これで用は足りるわけですが、たまにテーブルレイアウトがちがちなサイトなんかだと、レイアウトが崩れてしまうことがあったわけです。ところで、今日 Firefox Help: 便利な使い方 をつらつらと眺めていたら目に止まったのが、新しいウィンドウで開くリンクのカーソルを変更する というものです。ああ、こういう方法もあるのかということで、先日 trunk なナイトリーに実装された CSS の cursor に URL を指定 を使えばそれなりかなと思い試してみました。

で、試してみたのはこんな感じのもの。

a[target="_blank"]{
  cursor: url("http://diary.noasobi.net/img/soto.png") , pointer;
}

さらにこれを使えば、はてなダイアリーのキーワードをそれと判別するとかもできますね。

@-moz-document domain(d.hatena.ne.jp){
  a.keyword{
    cursor: url("http://diary.noasobi.net/img/hatenakeyword.png") , pointer;
  }
}

こっちは、ナイトリーで実装されている 特定のサイトにのみ、ユーザースタイルを適用させる という機能も使っています。

現行の最新マイルストーン Firefox 1.0.3 ではまだ使えませんが、Firefox 1.1 では、この 「CSS の cursor に URL を指定する」や、「サイト別ユーザスタイルシート」というのが使えるようになるので、お楽しみに～。

あと、おまけでこんなこともしてます。Javascript によるリンクや、mailto スキームの場合はマウスオーバーでわかるようにするというものです。

a:hover[href^="javascript"]:after {
    content :"[JS]";
    font-size :smaller;
    color :#ff3333;
    margin :auto 0.25em;
}

a:hover[href^="mailto:"]:after{
  content: " [mail] ";
  background : #d00;
  color : #fff;
  padding : 1px;
  font-size : smaller;
}

こっちは、Firefox 1.0.3 でも大丈夫です。:-)