朝顔日記

新しいウィンドウで開くリンクのカーソルを変更する

publish
2005-05-02T00:00:00+09:00
tags
はてぶ

これまで私は、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 でも大丈夫です。:-)

「新しいウィンドウで開くリンクのカーソルを変更する」へコメントをつける

書き込み時の挙動について
URI らしき文字列には自動的にリンクが張られます。また "<" や、">" は実体参照化されます。
スパム対策のため、リファラを切っていると投稿できません。

トラックバック

1: weavin'/[ua][css] userContent.css + the &#34;data:&#34; Scheme (2005-05-05T19:32:26+09:00)
新しいウィンドウで開くリンクのカーソルを変更する - 朝顔日記にて、userContent.cssを使いtarget=&#34;_blank&#34;なリンクのカーソルを変更するという試みが紹介されていました。 次のようなスタイル定義で、ポインタを好きな画像にすることが可能になります。a[target=&#34;_blank&#34;]{ cursor: url(&#34;[]http://diary.noasobi.net/img/soto.png[]&#34;) , pointer; }ここで疑問 ...
この記事の永続的 URI ならびに トラックバック ping URI
http://diary.noasobi.net/2005/05/diary_050502a.html