SmallStyle


2005-01-21

_ userContent.cssで特定の拡張子はアイコン表示

ネット上のリンクをクリックすると,リンク先がPDFファイルだったりしときに結構うんざりしてしまうのですが,そんなうんざりを少し解消してくれる設定.

そもそもリンク先が何かはステータスバーをちゃんと見ればいいわけですが,それでもやっぱり目線を少しずらすのも時間の無駄です.視覚的にわかりやすくする方法として,ひとつはFirefoxの拡張のひとつであるTargetAlertを導入する手があります.しかし,これと似たようなことが実はuserContent.cssでもできます.よくある方法としては,まとめサイトPDFファイルへのリンクにマークを付けるなんてのがありますが,これは事前に画像ファイルを準備しなければなりません.ちなみにこのローカルにある画像を読み出す方法は現在利用できなくなっているみたいです.

では,いったいどうやって実現するのか.まずは試しにURLバーに以下の文字列を打ち込んでみてください.

moz-icon://.PDF?size=16

そうするとPDFファイルのアイコンが表示されたかと思います.このアイコンはWindowに登録されている拡張子と関連付けられているようです.拡張子とアイコンの関係はExplorerのフォルダオプションのファイルの種類で確認できるので,みなさんの環境でそれぞれ表示されるアイコンは関連付けで変わってくると思います.私のPCにはMicrosoftのOffice製品は入っていないので,.docや.xlsなんかは不明なアイコンが表示されるのですが,事前に拡張子とアイコンを関連付けておけば表示されると思います.ちなみにsize=32にすると大きいアイコンも表示することが可能です.

userContent.cssには,

a[href$=".pdf"]:after {
	content: url("moz-icon://.PDF?size=16");
}

と表示することで,リンク先がPDFのものに関してはリンクの横にPDFのアイコンが表示されます.


about me

いろいろと興味を持ったことを書いてます.ちょっとしたことは hb(@smallstyle) on Twitter で書いてます.

Archive

2003|01|02|03|04|05|06|07|08|09|10|11|12|
2004|01|02|03|04|05|06|07|08|09|10|11|12|
2005|01|02|03|04|05|06|07|08|09|10|11|12|
2006|01|02|03|04|05|06|07|08|09|10|11|12|
2007|01|02|03|04|05|06|07|08|09|10|11|12|
2008|01|02|03|04|05|06|07|08|09|10|12|
2009|01|02|03|04|05|06|07|08|09|10|11|12|
2010|01|02|03|04|05|06|07|08|09|10|11|12|
2011|01|02|03|04|05|06|07|08|09|10|11|12|
2012|01|02|03|04|05|06|07|08|09|10|11|12|
2013|01|02|03|04|05|06|07|08|09|10|11|12|
2014|01|02|03|04|05|06|07|08|09|10|11|12|
2015|01|02|03|04|05|06|07|08|09|10|11|12|
2016|01|02|03|04|05|06|07|08|09|12|