2012年7月20日金曜日

Firefox の「進む」ボタンを常に隠す - ツールバーのアイコンの配置に影響を受けないように、Stylish で UI をカスタマイズ

1. 「進む」ボタンとロケーションバーの間にアイコンを配置すると、「進む」ボタンが隠れない

最近まで、Firefox の「進む」ボタンが消えることを知らなかった。

Firefox 10 の主な新機能を紹介します | Mozilla Developer Street (modest) によると、

… 「進む」ボタンは無効な時には表示せず、有効になった時にスライド表示されるようにします。無効時も常に表示するのではなく、「戻る」を押して有効になる時にだけ表示することで、「戻る」との対応も分かり易く、最重要ボタンから意識を反らすこともなく、ロケーションバーもより広く使えるようになります。

これに気が付かなかった理由は、「戻る」「進む」ボタンとロケーションバーの間に、アイコンを配置していたため。この結果、「進む」ボタンが常時表示されていた。

SnapCrab_NoName_2012-7-19_21-57-44_No-00

ツールバーで小さいアイコンを使用した場合も、「進む」ボタンは表示される。

SnapCrab_NoName_2012-7-19_22-8-13_No-00

 

2. 「進む」ボタンを強制的に隠したい

「戻る」「進む」ボタンとロケーションバーの間に、アイコンを配置した状態で、「進む」ボタンを隠したい場合は、Stylish を用いる。

Stylish で新しくスタイルを作成し、適当な名前をつけて、以下の内容を貼り付け、スタイルを有効にする。

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
/* Conditionally hide the Forward button */ 
#forward-button[disabled="true"] {  display: none; } 

これにより、「進む」ボタンとロケーションバーの間にアイコンがあっても、「進む」ボタンが消える。

SnapCrab_NoName_2012-7-19_22-58-29_No-00

小さいアイコンを使った場合でも、「進む」ボタンは表示されない。

SnapCrab_NoName_2012-7-19_23-0-19_No-00

 

3. Stylish によるブラウザのカスタマイズ

上記のように、Stylish では、ウェブページだけでなく、Firefox の UI もカスタマイズできる。

ユーザスタイルシートによるカスタマイズ(2) - Stylish – えむもじら によると、

新規作成を選ぶと、名前をつけて新しいスタイルシートを定義できます。ウェブページ用と Firefox 本体用のユーザスタイルシートはそれぞれ userContents.css と userChrome.css を使い分けて分けていましたが、Stylish ではユーザスクリプトの先頭の名前空間の宣言で区別します。名前空間は編集画面の挿入ボタンから簡単に追加することができます。

Firefox の UI をカスタマイズするには、Stylish で、

  1. 白紙のスタイルを作成し、
  2. 「挿入」ボタンより、「XUL 名前空間を編集とする」を選択する。

SnapCrab_NoName_2012-7-19_22-54-7_No-00

カスタマイズできる UI については、以下を参照。