Top Mozilla-Tip's >「userChrome.css」を編集してFirefoxのツールバーをカスタマイズする方法。
2007年09月29日

「userChrome.css」を編集してFirefoxのツールバーをカスタマイズする方法。

Firefoxをいろいろカスタマイズしていると、ツールバーやメニューバーに項目やアイコンが増えてきて思うように配置できなくなってきますね。

アドオンなどにより追加されたツールバーやボタンは右クリック→カスタマイズで簡単に隠すことができますが、まだまだ不十分です。

しかし、そんなツールバーの項目の中には簡単に非表示にできないものもあります。

そういった部分もカスタマイズしたい場合は、Firefoxのユーザーインターフェースを編集できる「userChrome.css」というファイルを編集してみましょう。

このuserChrome.cssファイルをエディタなどで開いて編集したり、追記したりすることによって、自分好みのインターフェースを作り上げることができます。

まずは、userChrome.cssのファイルにアクセスしてみましょう。
(標準インストールの場合)

■Windows XP/2000の場合、userChrome.cssは以下の場所にあります。

C:\Documents and Settings\[ユーザー名]\Application Data\Mozilla\Firefox\Profil********.default\chrome\userChrome.css

■Windows 95/98/Meの場合

C:\WINDOWS\Application Data\Mozilla\Firefox\Profiles\********.default\chrome\userChrome.css

■Linuxの場合

~/.mozilla/firefox/********.default/chrome/

■Mac OS Xの場合

~/Library/Application Support/Firefox/Profiles/********.default/chrome/

ファイルにたどり着いたら、テキストエディタなどで開きます。

まずは、通常のカスタマイズでは非表示にできないツールメニューの中からいらないものを消してみましょう。

今回は、ほとんど使わないメニューとして、”編集””ヘルプ”を消してみました。

■メニューバーの編集・ヘルプを消す

userChrome.cssに以下の命令文を追記します。

/* Remove the Edit and Help menus
Id's for all toplevel menus:
file-menu, edit-menu, view-menu, go-menu, bookmarks-menu, tools-menu, helpMenu */
#helpMenu, #edit-menu { display: none !important; }


*上記の#helpMenu, #edit-menuに他の**-menuも, で区切って追加すればそのメニューも非表示になります。


firefox_chrome_02.jpg


■ツールバーボタンの進む・戻る・中止ボタンは必要時に表示するようにする。

userChrome.cssに以下の命令文を追記します。

/* Remove Back button when there's nothing to go Back to */
#back-button[disabled="true"] { display: none; }

/* Remove Forward button when there's nothing to go Forward to */
#forward-button[disabled="true"] { display: none; }


/* Remove Stop button when there's nothing to Stop */
#stop-button[disabled="true"] { display: none; }


これで進むページや戻るページが無い場合など、必要時以外はボタンが隠れます。

また、ついでに使わない”ホーム”ボタンも以下を追記して消すことができます。

/* Remove Home button */
#home-button { display: none; }



firefox_chrome_05.jpg


■アドレスバー横の”Go”ボタンを非表示にする。

アドレスバー(ロケーションバー)横の”Go”ボタンを押すよりも、URL入力後にEnterを押す方のほうが圧倒的に多いのではないでしょうか?使わない”Go”ボタンは非表示にしてしまいましょう。

userChrome.cssに以下の命令文を追記します。

#go-button-stack, .search-go-button-stack {
display: none !important;
}


■検索窓横のを虫眼鏡を非表示にする。

検索窓に検索キーワードを入力した場合も、わざわざ横の虫眼鏡をクリックして検索する人は少ないですね。こちらもEnterでOKなので虫眼鏡を消してしまいましょう。

userChrome.cssに以下の命令文を追記します。

/*Remove magnifying glass button from search box*/
.search-go-button-stack { display: none !important; }



firefox_chrome_03.jpg


■読み込み中にくるくる回る”throbber”を非表示にする。

ステータスバーやタブにプログレスメーターが表示されるにも関わらず、ページ読み込み中にツールバーの右端でクルクル回転しているもの firefox_chrome_04.jpg がありますね。あれも非表示にしてしまいましょう。

userChrome.cssに以下の命令文を追記します。

/* Eliminate the throbber and its annoying movement: */
#throbber-box { display: none !important; }


これだけやればツールバーはかなりスッキリしますね。

あとは、いつものようにツールバーで右クリック→カスタマイズで空いたところに他のバーを移動、小さなアイコンを使用、ナビゲーションバーの非表示などのカスタムを行い、スペースを有効活用してください。

なお、これらのカスタマイズを行う前に、オリジナルのuserChrome.cssは名前を変えるなどしてバックアップしておくことをお奨めします。

バックアップがあれば、名前を戻すだけですぐに元の環境に復旧できます。

■2007/10/31追記

ブックマークツールバーを自動的に隠してオンマウスで表示する。

ツールバーで非表示にしてしまうと困るブックマークツールバーを、普段は自動的に隠しておいて、オンマウスで現れるようにすることができます。

userChrome.cssに以下の命令文を追記します。

/* ブックマークツールバーを自動的に隠す */
#PersonalToolbar {display: none;}
#navigator-toolbox:hover > #PersonalToolbar {display: -moz-box;}



<関連記事>

■Firefoxの様々な設定ファイルにアクセスできる「Edit Config Files」

■Firefoxの各種メニューを表示・非表示できるアドオン「Menu Editor」

■ブックマークツールバーをFaviconだけでスマートに表示する「Smart Bookmarks Bar」

■Firefoxでアドレスバー横のめったに使わない”移動”ボタンを消す方法。

■タブバーを自動的に隠したり、任意キーで出し入れできる「Hide Tab Bar」

■メニューをすっきりカスタマイズ「Personal Menu」

■拡張機能の導入により増えたメニューをツールバーに追加する「More Tools Menu」

映画や音楽、ドラマなどイチオシ番組はここでチェック「GyaO」

ソニーのブログパーツ「FLO:Q」
この記事をはてなブックマークに登録 このエントリを del.icio.us に登録 この記事をクリップ!Yahoo!ブックマークに登録
posted by moziller at 21:50 | Comment(0) | TrackBack(0) | Mozilla-Tip's


この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

※ブログオーナーが承認したコメントのみ表示されます。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/57915040
※ブログオーナーが承認したトラックバックのみ表示されます。
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック