はりをきば

そこにピカマンがいる限り 私はテイッハットウッをやめない

Firefoxのメニューボタンの見た目を変えてみた

¯注意
この記事はを最後に更新されていない。
更新日が1年以上前の記事はリンク切れしていたり、情報としては役に立たなくなっている可能性あり。
ˆMixed Contentについて
この記事は投稿日が古い為、記事中の画像は非SSL(http://)で貼られている。(※投稿画像以外は全てSSL)
この件に関して詳しくはこちらを参照。

【追記】
以下のカスタムが有効なのはFirefox28以前と
28以前のUIを採用する派生ブラウザのみです。


最新のFirefox 29では使えません。


Firefoxのメニューボタンはデフォルトで
以下のようにオレンジ背景に「Firefox」と書かれただけの
当たり障りのないデザインになっている。
f:id:Gutyan:20140109192008p:plain

f:id:Gutyan:20140109192028p:plain


うん、まぁ、良いと思うよ。
良いと思うけど、地味だ。

ってなわけで

Firefoxロゴ に変えてみた。
f:id:Gutyan:20140109192526p:plain

f:id:Gutyan:20140109192540p:plain


どうよこれ。

変更方法

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系プロパティを使ってそれなりのことができる。


画像を分割してフォント化することもできるし… 夢がひろがりんぐ。

*1:昨日の記事で触れたこのブログで使ってるアイコンフォントから
  Firefoxロゴだけ切り出してPUAからアルファベット「F」にマッピングし直したもの