ArtSaltのサイドストーリー

音楽、フリーウェア、WEBサービス、食べものなどに関する日記。トラックバック、コメント歓迎。

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

リンクが何であるのか一目でわかるCSS

SIONさんの「ふと今日は・・・・・・」に、特定のリンクのところにアイコンをくっつけて、そのリンクが何であるかすぐにわかる方法が書かれていた。
これはすばらしいと思った。
ふと今日は・・・・・・  userContent.css で特定リンクの横にアイコンを表示させる

個人的な話ですが、私は現在Operaで使ってるユーザースタイルシートに、

a[target="_blank"]:after {
content:    "N";
color:      #fff !important;
background: #000 !important;
padding:    1px;
}

と書いていて、これはこれで便利だけど、美的センスがイマイチかな、といつも痛感していた(下記スクリーンショット)

Operaスクリーンショット

でもって、「ふと今日は・・・・・・  userContent.css で特定リンクの横にアイコンを表示させる」で紹介されている、userContent.cssの書き方(Firefoxの場合)。
たとえば、a要素のtarget属性の値が _blank とか new になっているリンクにアイコンをつけるには、こういうふうに書く。

:-moz-any-link[target="_blank"]:before, :-moz-any-link[target="new"]:before {
padding-right: 4px;
content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAVElEQVR4nGP0+f+WAR1sYRT6jyGIBpgIKaC6RhZcEv/xOJaRkRIbTRoxA2ILERrpHzgMDQ3/MQAkaPBjrKGKHKKNjQwMZ+rfMVLNqQOUchobSdcIACN5M7J0SyZ/AAAAAElFTkSuQmCC");
}

Firefoxスクリーンショット

Operaのユーザースタイルシートだったら、こう書けばいい。

a[target="_blank"]:before, a[target="new"]:before {
padding-right: 4px;
content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAVElEQVR4nGP0+f+WAR1sYRT6jyGIBpgIKaC6RhZcEv/xOJaRkRIbTRoxA2ILERrpHzgMDQ3/MQAkaPBjrKGKHKKNjQwMZ+rfMVLNqQOUchobSdcIACN5M7J0SyZ/AAAAAElFTkSuQmCC");
}

Firefoxスクリーンショット

これ以外にも、

  • FTPのリンク
  • セキュア(HTTPS)なリンク
  • PDF ファイルのリンク
  • JavaScript のリンク
  • mailto: リンク
  • XPI ファイルのリンク
  • .exe のリンク

などなど、多くの例があって、非常にうれしい。

SIONさん、ありがとうございます。

Google
WWW ArtSaltのサイドストーリー
Web site (optional)
Comment - Need to type CAPTCHA, an image of distorted Japanese Hiragana or Katakana afterward.
Password - Not allowed to modify your comment later if password not entered.
On secret mode?
 

http://art2006salt.blog60.fc2.com/tb.php/447-d12f90c8

このブログについて

最近のエントリ

カテゴリー
あわせて読みたいブログ

あわせて読みたい

最近のコメント
Internet Explorer
よりも便利です

Opera 9 - Always secure with Opera Firefoxをダウンロード!!

相互リンク
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。