サーチボックスをマウスオーバーで表示させる Tips

2006/09/23

Firefox のツールバーまわりをスッキリさせる その 2 。

Firefox のサーチボックスをスッキリさせる Tips

Firefox – Tips & Tricks

上記サイトの、「Rollover Searchbar」」は UserChrome.css に書く CSS です。
設定すると以下のようになります。

マウスカーソルが乗っていないとき
マウスカーソルが乗っていないとき

マウスカーソルを上に乗せたとき
マウスカーソルを上に乗せたとき

上の Tips は orioa さんの記事を読んで知ったものです。

Firefox のサーチバーをコンパクトに at orioa

以下、設定方法を 2 種類書いてみます。

Profiles フォルダを簡単に開いて、UserChrome.css に設定

  1. Profiles フォルダ>chrome フォルダ>UserChrome.css と辿って UserChrome.css を開く。(UserChrome.css がなかったら自分で適当なテキストエディタに書いて作って OK です)
  2. Firefox – Tips & Tricks の「Rollover Searchbar」の CSS を UserChrome.css にコピペして保存すれば OK 。
  3. Firefox を再起動。

ちなみに、UserChrome.css は Profiles フォルダ内にありますが(もしくは、なければ作りますが)、Profiles フォルダがどこにあるのか探すのが面倒な方はhail2u.net 「Open Profile Folder」 を使うと Profiles フォルダが簡単に開けて便利です。

Stylish という拡張で楽に UserChrome.css を開かず内容を設定する

Stylish という拡張を使えば、UserChrome.css を開くこともなく簡単に書き込んで適用できるので、そっちのほうが楽です。拡張を増やすのが嫌だ~という方以外は、Stylish を入れてみるのをお勧めしちゃいます。

userchrome.cssやusercontent.cssと同じ機能を、再起動せずに反映・管理できるユーザースタイルシート拡張です。デフォルトで日本語Locale同伴されています。

Stylish – Mozilla Firefox まとめサイト』より引用

と、こんなかんじのものです。以下のサイトに Stylish については詳しく載っています。
再起動しなくてもよかったりするのは、とても便利ですよ~。

Stylish のダウンロードは下記のサイトからどうぞ。

Stylish :: Mozilla Add-ons :: Add Features to Mozilla Software
Stylish :: Mozilla Add-ons :: Add Features to Mozilla Software

肝心の Stylish を使った場合の設定の仕方。

Stylish

Stylish を使った場合は、

  1. Stylish の画面から新規にスタイルを作成する画面を出します。
  2. 上の画像のような感じに Firefox – Tips & Tricks の「Rollover Searchbar」の CSS をコピペしてあげれば OK 。
  3. 「適用」ボタンを一応押して、「保存」ボタンを押す。これだけ!
  4. Firefox 本体の見た目を変える目的でも、再起動なしで適用できる Stylish ですが、このサーチボックスを表示・非表示とする場合には再起動しないと適用されないようです。と、いうことで Firefox を再起動。

私はGoogle ツールバーを入れているので、そのままだと検索ボックスが 2 個になってしまいます。
これが結構見た目にうるさくて、ウーンいまいち、というかんじの見た目に :roll:

かといって、デフォルトの検索ボックスも使いたいので消したくはなく…(わがまま)。この Tips はただ CSS でちょっと調整しているだけですが、なかなか見た目もすっきりするし良いかんじ。難点というと、マウスカーソルが上にないとサーチボックスが表示されないので、ショートカットを使ってサーチボックスへ飛んで使うのが厳しいあたりですね。

ショートカットをよく使うなら、検索ボックスを目立たないように背景色とボーダーを CSS で設定してあげるのがいいかもですね。