Shishimushi

CSS3の属性セレクタを使ってあれこれ（9.0 TP1）

以前、PDFファイルへのリンクに[PDF]というマークを表示させたい（1/2）という方がおられて、僕もできないものかとやってみたが、Gecko系みたいな

a[href$=".pdf"]:after {
	content: '[pdf]';
	}

という指定はできず、

a[href="http://www.xxx.xxx/****.pdf"]:after {
	content: '[pdf]';
	}

という、使えない指定しかできなかった。その後、Link alertという便利な User JavaScript が現れて、この事も記憶の奥へと仕舞われたのであるが、先程、9.0TP1では指定可能になっているのを確認。つまり、a[href^=***]（***で始まる）、a[href*=***]（***を含む）、a[href$=***]（***で終わる）とかいう指定ができるので、これは色々できるんじゃないか、という記事。

PDFファイルへのリンクの後に[PDF]

先述の

a[href$=".pdf"]:after {
	content: '[PDF]';
	}

をuser.cssなりbrowser.cssに書いてやれば良い。強調させたいのなら、

a[href$=".pdf"]:after {
	content: '[PDF]';
	font-weight: bold;
	color: #ff0000;
	}

とか。アイコンを表示させたいのなら、

a[href$=".pdf"] {
	padding: 0 1.5em 0 0;
	background : transparent url("data:image/gif;base64,R0lGODlhDAAMAMQAAAAAAP///+cxNOg8Puc+QelHSOdLTelTVeZWWehZW+ZcXuRkZuVsbuN9fuSEheKMjeGbnOGsreC0teK3uN/Ky97j4/8AAOcvL+ZFReNzcuG8vN7U1N3d3REREf///wAAACH5BAEAAB4ALAAAAAAMAAwAAAU/oCcCJNl1gDhyLNdZaCm7FgzUOMCVKF7rrZgMyOqogIIBBjExrjiSyGNRcHp0itZGYwUwDC1OpXsIF1WntDoEADs=") right no-repeat !important;
	}

とか。ローカルから画像を参照する方法、誰か教えて下さい。※

Google検索だとあまり意味ないアイコン

Flash（.swf）とかRSS（.rss）も同じようにできるので、現在Link alertとの兼ね合いを検討中。

a[href$=".swf"] {
	padding: 0 1.5em 0 0;
	background : transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAABGdBTUEAALGOfPtRkwAAACBjSFJNAAB6JQAAgIMAAPn/AACA6AAAdTAAAOpgAAA6lwAAF2+XqZnUAAACbUlEQVR4nGJ0iy1mAIF///6LMjD8j+fkYHfi5ebWYWBgZPj67euV7z9/7QPKLWRiYnwNUgcQQCz//4MU/9Pl5ODoN9bVcNZQkmGQl5FkYGVhYbj76Insjdv3Pc9eve3x9fuPQmYm5ssAAcSsZ+EoysLCMivE08HF28mSQVtVgUFJVpzh2LkrDJ3TVjLcZ+Bk8LUyVHr58pUqKyvzDoAAAtrEEGtjrOfiamPMICkqwCAixMfw7MVrhqLJyxnO/2Zl4OHnY/ACylkb6bkwMTLGAgQQk7CQgKuRrjoDNyc7AxcnB9g//Us2Mzz7/p8hzFaPYXKMMwMfOwuDroYSgyA/nytAADEJC/Bpq8pLMzCzMDOArHv5+i3DtoPnGBg+f2bYsW0/w92XbxmYmZkY5KUkGIQF+bQBAoiJEejpP79+M/z8/gts+pzVuxju3H7IIC8tzKCrLMMADDWw+H9g6IAwQACxANVf/f7rjyzT528Mt+4+Yli+cR/Df6CJNQn+DCkhbgzPnr1i+PLtB8PP378Z/vz5exUgAAAxAM7/BOLn6rvQ1tlI9vf2AHuVpwDs3uYATldIAEY6MADa2+IAAwEBAAsKCAC/ytMA6ezuvgKIWU7b9M67D58N//z7q/T64zcGB1sjhurkYAZ2JlYGoJcYhAR4GS7dvseweOOuPb9+/a4DCAAxAM7/BPr7/evb4ORy/wAAj4dsW0NCOC0A+/4AAP39/wD9/PwAytPYAJintL3y8vVyBAQE6gKIBWgIAysry+V7j55Fbj5wIvHa3UcObOysOiCP/vr568qdh88OfPr8dT4LC/NroOsYAAIMANsz3/14KpmcAAAAAElFTkSuQmCC") right no-repeat !important;
	}

続・Google検索だとあまり意味ないアイコン

広告除去

Amazonアフィリエイト画像（ブログによってはサイドバーにどこまでも表示されるアレ）を消すには、

img[src*="amazon.com"] {
	display:none !important;
	}

リンクそのものを消したければ、

a[href*="www.amazon.co.jp"] {
	display:none !important;
	}

これだと、商品画像を自サイトにアップしてAmazonアフィリエイト、みたいなのも一掃できるが、当然そうでないものも非表示になってしまうのであまり実用的ではない。画像だけに留めた方が良いと思う。こんな感じでiframe広告も除去できるし、livedoor（depart.livedoor.com）や楽天（image.rakuten.co.jp）とかも非表示にできるので、現在filter.iniやUser JavaScriptとの兼ね合いを検討中。

browser.cssでもいいけど…

特に広告除去は、browser.cssに記述するよりもuser.cssを追加してやってそっちに書いた方が良い。例えば、上記の方法でAmazon画像を非表示にした場合、Amazon.co.jpを個人的に利用する際に画像が表示されなかったりと色々困るからだ。そこで、

img[src*="amazon.com"] {
	display:none !important;
	}

という内容のCSSをamazon.cssとか適当に保存して、opera6.iniに

[Local CSS Files]
Name 12=amazon.css
File 12=C:\Program Files\Opera\profile\styles\amazon.css（user.cssまでのフルパス）

と追記すると、スタイルメニューからamazon.cssが選択できるようになるので、普段はCSSをチェックしたまま、Amazon.co.jpへ行った際はチェックを外すという切り換えができる。ただ、9.0TP1はサイト毎に色々設定できるから、続けてopera6.iniへ

[Overrides]
www.amazon.co.jp

[www.amazon.co.jp]
Author Display Mode|Author CSS=1
Author Display Mode|User CSS=0

と書いてやった方がいい。これだとAmazon.co.jpではuser.cssが無効になり、当然amazon.cssも読み込まれなくなる。

Opera 9.0 では opera6.ini への追記は必要なく、UserCSS ディレクトリに CSS ファイルを放り込めば認識される（要再起動）。

とまあ、他にも色々できそうだけど、取り敢えず思いついたのがこの２つ。IEにも実装されればサイトの方でも使えるんだけどねぇ。いつになるやら。

参考リンク

投稿者：芦塚 | 投稿日時： 2005年 12月22日（木） 03:38

 トップページ 次へ