Firefox のフォントの大きさ。

NotePC で KDE3 を使っていて、Firefox を利用すると、メニューバーのフォントや Submit ボタンのフォントがでかすぎて全然美しくない。

なぜ、NotePC 上でかと言うと、デスクトップで KDE3+Firefox の場合だと、画面が広いので普段から大きなフォントを使っているので気にならないんだけど、NotePC の場合、画面が狭いのでついついコンテンツを表示するフォントを小さくしてしまう。

そーなるともー、メニューバーのフォントの大きさがきになってしかたがない。なので小さく表示してくれるように設定することにした。Google で探したらそれなりに見付かったけどねぇ;-)。

設定に必要なファイルは二つ。~/.mozilla/firefox/乱数ディレクトリ/chrome/ の下に以下の二つのファイルを用意する必要があります。

・userChrome.css 主にメニューバー・ツールバーを設定するファイル
・userContent.css 主に Submit ボタンなどコンテンツ上の設定をするファイル

では早速設定を見て行くことにしましょう。まずは userChrome.css です。

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */
* {
    font-size: 12px !important;
}

 
全てのメニューのフォントを 12 ピクセルにすると言う設定です。”*” が「全ての」と言う意味です。個別に toolbar とか urlbar とかも指定できますが、まぁ、良いでしょ「全て」で(^^;;。

また、普段は [表示]→[ツールバー]→[カスタマイズ] で表示される画面で自分好みのツールバーにカスタマイズすると思いますが、その設定もこのファイルに記述できます。ただ、ここには書きませんけど・・(^^;;。

このファイルを作成し firefox を再起動すると設定が有効になったかと思います。けど、Submit ボタンはまだまだ大きいままでかっちょ良くないんですよー。

なので、次に userContent.css を用意します。このファイルはコンテンツの中で firefox が制御する部分の設定を行います。

.searchbar-textbox {
    font-size: 12px !important;
}
input {
    line-height:1.0 !important;
    font-size: 12px !important;
}
select {
    line-height:1.0 !important;
    font-size: 12px !important;
}
textarea {
    line-height:1.0 !important;
    font-size: 12px !important;
}

 
まぁ、FORM 入力部分の表示の制御がメインになるかと思うのですが、select タグや textarea タグなどのフォントサイズが変更できたりします。Submit ボタンは INPUT タグなので input 項でそのサイズを指定してあげることになります。

さて、再度再起動してみましょう。これで十分にきれいで均等の取れた firefox になったでしょうか。

僕はなりました。めでたいことです;-)。