memo.xight.org

日々のメモ

userContent.css と userChrome.css で Firefox のカスタマイズ

Summary

profile-directory/chrome/userContent.css
profile-directory/chrome/userChrome.css
の2つのファイルを変更することで,Firefoxのカスタマイズが可能.

userChrome.css

o サーチバーを広げる
#searchbar { width:250px !important; }


o コンテキストメニュー「ページのソースを表示」を強調.
#context-viewsource {
	color:#000 !important;
	background:#ccccff !important;
	font-weight:bold !important;
	font-size:larger !important;
}


userContent.css

o 2ちゃんねるへのリンクを目立たせる.
2ちゃんねるのリンクに "[2ch]" という赤の太文字を付け足す.
a[href*=".2ch.net"]:not([href*="/search?"])::after {
	content: "[2ch]";
	color: red;
	font-weight: bold:
}


o PDFへのリンクを目立たせる.
a[href$=".pdf"]:after {
	content :"[pdf]";
	font-size:x-small;
	font-weight:normal;
	color :#dc143c;
	margin :auto 0.3em;
}


o PDFへのリンクにアイコンを付加.
moz-icon://.pdf?size=16
でアイコンの画像が表示されれば利用可能.
a[href$=".pdf"]:after {
	content: url("moz-icon://.pdf?size=16");
}


o メールアドレスへのリンクにアイコンを付加.
a[href*="mailto:"]:after {
	content: url("moz-icon://.eml?size=16");
	/*
	content: "\2709"
	*/
}


o 怪しい拡張子へのリンクにアイコンを付加
.com の場合は,メールアドレスが .com で終わる場合を考慮.
a[href$=".exe"]:before {
	content: url("moz-icon://.exe");
}
a[href$=".com"]:not([href^="mailto:"])::before {
	content: url("moz-icon://.com");
}
a[href$=".scr"]:before {
	content: url("moz-icon://.scr");
}
a[href$=".pif"]:before {
	content: url("moz-icon://.pif");
}
a[href$=".vbs"]:before {
	content: url("moz-icon://.vbs");
}
a[href$=".cpl"]:before {
	content: url("moz-icon://.cpl");
}
a[href$=".hta"]:before {
	content: url("moz-icon://.hta");
}


o _blankなリンクのカーソルを変更
Firefox 1.5 Beta 1からサポートされたalias (CSS3) にするとより直感的に把握できるようになる
a[target="_blank"] {
	cursor: alias !important;
}


o オリジナルアイコンを付加.
Firefox 1.0から,ローカルのリソースが参照不可能になったが,
バイナリファイルをURIにし,dataスキームを利用して,
userContent.cssに埋め込むことでオリジナルアイコンを付加可能.

dataスキームは以下の通り.
data:<Media Type>;base64,<base64でエンコードした画像データ>

a[target="_blank"]::after {
	content :url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAAPRJREFUeNpi/P//PwMlACCAmBgoBAABxIDFBYJADBLsQBJzgYq5oOsFCCBsBqRBFStBDVNCMgDDcoAAwmbAbiB+B6XvQjXOxGUAQAChG6CE5tRVUEPu4jIAIIDQDdgNxchhkYbPAIAAQjYApvAM1MnlUD5yuBijGwAQQDADjKGKjaHeeIdkO3Is/IcaLAgzACCAGHAkpN1Ql6BHYxrUcBDuAOkFCCBc0fgO6hJ0A2BhA3KFMUgvQAChGwDTbIxmKM50ABBAyAaUQ51tjMVLOA0ACCAWKDsUSrsC8XtSsgJAADEQmRsFsbkMpBcggBgpzc4AAQYA269/rR21IIIAAAAASUVORK5CYII=");
}


Reference

Mozilla をカスタマイズする
http://www.mozilla-japan.org/unix/customizing.html
Customizing Mozilla
http://www.mozilla.org/unix/customizing.html
Firefox まとめサイト - usercontent.css
http://firefox.geckodev.org/?usercontent.css

IKIMONO net club - Firefox Customize
http://www.ikimono.org/soft/firefox-customize.shtml
hail2u.net - Weblog - FirefoxのuserContent.cssネタ
http://hail2u.net/blog/software/firefox-usercontent-css-tricks.html
Webweavers - weavin' - userContent.css + the 'data' Scheme
http://webweaver.g.hatena.ne.jp/kotastyle/20050505/p2

CSS3 Basic User Interface Module - 'cursor' property
http://www.w3.org/TR/css3-ui/#cursor

via

xe-kdoo (2005-07-11) - PDF Download
http://yowaken.dip.jp/tdiary/20050711.html#p02
の、ようなもの (2005-07-11) - Firefoxで特定のドメインへのリンクにマークを付ける
http://astragius.dip.jp/diary/?date=20050711#p02