オレンジ色のFirefoxメニューボタンの外観をカスタマイズする方法

あなたはオレンジ色のFirefoxメニューボタンを見るのにうんざりしませんか？ Firefoxのインターフェースは完全にカスタマイズ可能なので、Firefoxのメニューボタンの色、テキスト、その他のプロパティを変更して独自のカスタムルックを作成できます。.

Firefoxのメニューボタンの外観を変更するには、userChrome.cssファイルを編集します。このファイルを使用すると、Firefoxの任意の部分の外観や機能を変更できます.

userChrome.cssファイルを編集する前に、ChromEdit Plusというアドオンをインストールします。これにより、ファイルを簡単に編集して正しい形式で保存することができます。次のリンクをクリックして、ChromEdit Plus Webページにアクセスしてください。.

http://webdesigns.ms11.net/chromeditp.html

ページの[Firefoxに追加]ボタンをクリックします.

以下のメッセージが表示されることがあります。 ChromEdit Plusアドオンのインストールを続けるには、[許可]をクリックします。.

注：拡張機能やその他のソフトウェアをインストールするときに何を許可するのかについては十分に注意してください。製品についてよくわからない場合や会社を信頼しない場合は、インストールしないでください。 ChromEdit Plusをテストしたところ、安全で信頼性が高いことがわかりました。.

[ソフトウェアインストール]ダイアログボックスが表示されます。 [今すぐインストール]をクリックします。カウントダウンが完了するまで利用できない場合があります。.

注：[インストール]ボタンでカウントダウンの長さを変更できますが、無効にすることはお勧めしません。.

インストールを完了するにはFirefoxを再起動する必要があります。ポップアップダイアログで[今すぐ再起動]をクリックします。.

Firefoxが再起動すると、[アドレス]ボックスの右側に[ChromEdit Plus]ボタンが追加されます。クリックするとChromEdit Plusウィンドウが開きます.

ChromEdit Plusウィンドウにはデフォルトで3つのタブがあります。最初のタブにあるuserChrome.cssファイルを編集します。タブが空の場合は、次のテキストをコピーしてuserChrome.cssタブに貼り付け、[保存]をクリックします。これにより、デフォルトのuserChrome.cssファイルが得られます。.

@namespace url（“ http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul”）;
＃appmenu-button
背景：＃整列！重要です。

＃appmenu-button dropmarker：before
内容：“ Firefox”！重要です。
色：#FFFFFF！重要です。

＃appmenu-button .button-text
表示：なし、重要です。

あなたはすでにuserChrome.cssファイルを持っているかもしれません、その場合すでにuserChrome.cssタブにテキストがあるでしょう。最初の行である@namespace行を除いて、上のすべてのテキストをコピーし、それを@namespace行の後のどこかのタブに貼り付けます。あなたがすでに持っているものを保存したい場合は、ファイルの末尾に上記のテキストを貼り付けることができます.

重要：userChrome.css内のすべての引用符は、@ namespace行の引用符も含めてスマート引用符ではないことを確認してください。それらは普通の、まっすぐな引用符であるべきです。それらのうちのどれかが賢い引用符であるならば、ファイルはFirefoxの外観に全く影響を与えません.

新しいまたは変更されたuserChrome.cssファイルを使用してFirefoxを再起動するには、[再起動]をクリックします。.

この例では、背景色を濃い青に変更し、「Firefox」のテキストを「How-To Geek」に変更します。.

背景色を変更するには、16進カラーコードまたはHTMLカラーコードを使用して、「＃appmenu-button」セクションの「background」行の「#orange」テキストを別の色に変更します。たとえば、16進数のカラーコード＃2C4362の濃い青を選びました。.

注：必要な色の16進カラーコードを確認するには、10進数のRGBカラーから16進カラーコードを取得する方法、画面上の任意の場所から色を選択する方法、および複数の形式のカラーコードを取得する方法.

ボタンのテキストを変更するには、「＃appmenu-button dropmarker：before」セクションの「content」行にある「Firefox」のテキストを、「How-To Geek」などの目的のテキストに変更します。テキストとボタンのドロップダウン矢印の間のスペースを増やすために、テキストの後にスペースを追加しました.

同じ「＃appmenu-button dropmarker：before」セクションの「color」行を変更して、テキストの色を変更することもできます。テキストの色は白（#FFFFFF）のままにしましたが、薄い灰色（＃F2F2F2）のようなもの、またはそのようなものに変更できます。.

「保存」をクリックしてから「再起動」をクリックして変更を有効にします。.

ボタンは濃い青になり、「How-To Geek」と表示されます。.

背景色を変更するだけでなく、ボタンに背景画像を追加することもできます。左側にHow-To Geekファビコン、透明な背景を持つ画像を作成したので、濃い青の背景色が透けて見えます。背景画像をボタンに追加するには、「＃appmenu-button」セクションに次の行を追加して、引用符内のパスをコンピュータ上の画像の場所に変更します。パスに“ file：///”を残します.

background-image：url（“ file：/// C：/Users/Lori/Pictures/htg_background.png”）！重要です。

もう一度[保存して再起動]をクリックします.

これでボタンは完成しました.

Firefoxのメニューボタンをアイコンに変換してカスタマイズすることもできます。 Firefoxを最大限に活用するための他の多くのヒントや調整も公開しています。.