【追記】
以下のカスタムが有効なのはFirefox28以前と
28以前のUIを採用する派生ブラウザのみです。
最新のFirefox 29では使えません。
Firefoxのメニューボタンはデフォルトで
以下のようにオレンジ背景に「Firefox▼」と書かれただけの
当たり障りのないデザインになっている。
うん、まぁ、良いと思うよ。
良いと思うけど、地味だ。
ってなわけで
Firefoxロゴ に変えてみた。
どうよこれ。
変更方法
StylishかuserChrome.cssに以下のCSSを投下。
@font-face { font-family: Firefox; src: url("data:font/woff;base64,d09GRgABAAAAAAUIAAsAAAAABsQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAADsAAABgDrENcGNtYXAAAAFEAAAAMQAAAEQAWACHZ2FzcAAAAXgAAAAIAAAACAAAABBnbHlmAAABgAAAAlAAAANEHqDPymhlYWQAAAPQAAAALwAAADYBA40waGhlYQAABAAAAAAeAAAAJAfBA8VobXR4AAAEIAAAAAwAAAAMBgAAAGxvY2EAAAQsAAAACAAAAAgACgGibWF4cAAABDQAAAAYAAAAIAAFAZpuYW1lAAAETAAAAK0AAAFmDjV/jHBvc3QAAAT8AAAADAAAACAAAwAAeNpjYGZhYJzAwMrAwDST6QwDA0M/hGZ8zWDMyMmAChgZ0IEDgwKDG/OB/0DIfADIQ1WjwMAAACtmCzQAeNpjYGBgYmBgYAZiESDJCKZZGAyANAcQguQUGNz+//3/H8H6//D/HqhaMAAAG4cM1wAAAAABAAH//wAPeNpVUMluE0EQdVX1Nt2z2OMZjxO8kAm2gxUPPfZ4SWQ5UbhwiISEQHDkiMQJvoF/4AYXvoYzf8Mh9EzEVqqutfv1q2pB67dgq7W9aFJn7n7SHX2Czy6RtsBZQeUIRdmEKKSdY2kvwZY7KpcjzGyIMq+9648gBClc0HNFcUAZQgGz3gG3O1ja8kBZ7wBThyhDrN36QFunI8r2tN7sYbouaOZw/9X7KwdaVXZZreoaVnXRRbayVZPW5z6h0iFVdg/Na8zLHVT2L1hV4OmOLiCfzkHmjqgDshublxtHuIBcyHyaN8z+vHXzZXaAaehIk7RulpAyWx2gpl0rLDfbS1rVJHFa0p0vTKD8js+VJIhOqsn8+vyIoJFZ+UR1RpMu7J/fRu6SFhyUALcon4Hf74KnQK8/vHszjM4eT3wI0rgtpRHIRXw8joNhftbvpoY1YKg8TcI3hgO6zB0mPc61pxmTvP6RWO2YCjTTJpB+EnpIJs5C1xqel+1ocHxkkHNBqhNpiNO2QxAE3BiPk9CCKYeNhOB1+vHJy7fvdzpNUt185mf9zP/65Qrw4+3i6qY7fhhhMk7NyWIRBD4RqKBrAIUIF6+ehXGHkvVuHZMXtsXg6XXlQ/4o7rxYBauEgQg8r605AtO+FKFHnCJFkUk6bYGMMxSKs2YeBM6EM1wypqRibjOSkZACiTmeTrjUAv4XbBominh72E+UW5ff7zFG9Y5kN3sQQTy/sejqKvIVmsHp/FhHqQknxTaXQayTYrUbXr7e5/ebJ8dv+v3Ht9Yv5DFNH3jaY2BkYGAA4hWn1J3j+W2+MnCzMIDAuU9LohD0/9/M/5lbgFwOBiaQKABRBQyWAHjaY2BkYGA+8P8AAwMLAxAwMv9nYGRABcwAX0MDjwAAAAAAAAIAAAAEAAAAAAAAAAAKAaJ42mNgZGBgYGacwQCiGRiYGNAAAA+7AKF42nWOMQrCQBBFXzQKiliKZUor0UtEhNiksI+ahIhkISrEW3gSz+hPZtsMzM7bPzN/F1jyI6CLgHV/djGSfvc8lr71HIpbzxNWuhlPWRB7nrPhq60gnHlPY/M0Nk9j8zQ2T+OpKPVsnjEVDTkFThsRiWqpPEtreKrrqKXv5b0bmo6rJi9cGyWudIOOqbSSNw8y9YemDtLq/u2Ml+pNvQsfnUeu6p+U+tEfKV4rJgAAAHjaY2BmwAsAAH0ABA==") format("woff"); } hbox#appmenu-button-container > button#appmenu-button { padding: 0 !important; } hbox#appmenu-button-container > button#appmenu-button > hbox > dropmarker { display: none !important; } hbox#appmenu-button-container > button#appmenu-button > hbox > hbox::before { content: "F" !important; font-family: Firefox !important; font-size: 20px !important; text-shadow: 1px 1px 1px black !important; vertical-align: middle !important; } hbox#appmenu-button-container > button#appmenu-button > hbox > hbox { text-align: center !important; } hbox#appmenu-button-container > button#appmenu-button > hbox > hbox > label { display: none !important; }
上記のカスタマイズはあくまでも一例。
細かいところはお好みで書き直してどうぞ。
は画像ではなくウェブフォント。*1
フォントだからcolorやfont-size、text-shadowなど自由に変えられる。
適用したら一度Firefoxを再起動。
再起動後、上に貼った画像のようになっているはず。
余談
data:スキーム便利すぎてやばい。
これまでも私は1KB前後の小さい画像は外部ファイルにせず
こいつを使ってインラインで埋め込んできたが
今回のようにウェブフォントファイルにも使えるとなると、
使い方次第では結構色んな事ができそう。
例えばサイトタイトル等のロゴをウェブフォント化し、
data:でCSSにインライン埋め込みすれば
豊富なCSS3のanimation系プロパティを使ってそれなりのことができる。
画像を分割してフォント化することもできるし… 夢がひろがりんぐ。