memo.xight.org

Home > Changelogメモ > 2006-02 > 2006-02-07 > userContent.css と userChrome.css で Firefox のカスタマイズ

2008 : 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
2006 : 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
2004 : 01 02 03 04 05 06 07 08 09 10 11 12
2003 : 01 02 03 04 05 06 07 08 09 10 11 12
2002 : 01 02 03 04 05 06 07 08 09 10 11 12

2006-02-07

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=");
}