Firefoxの各種入力欄(テキストエリア)のフォントのみを変更する

使っているブラウザ（Firefox）の標準フォントをメイリオ（設定できる場合は「Miryo UI」）に変えてからずいぶん経ったんだけど、未だに困っていたのが長音（ー）と全角ハイフン（－）の見分けが非常につきにくいこと。メイリオやMeiryo UIは今まで標準的に使われていたMS Pゴシックより格段に見やすく、フォントのがたつきもほとんどないので「標準フォントはさっさとメイリオに変えるべき」とも思っていた。ところが文字の入力時だけは別で「長音を入力したつもりだったらハイフンに変換されていた」という現象が起こって、どうしてもプチストレスの原因に。（Firefox + ATOK環境。他の環境だとどうなってるか不明。）

関連

とはいえそれだけのためにMS Pゴシック表示に戻す気にはなれず、気になったまま数ヶ月間使っていた。ところがたまたまカスタマイズ関連の記事から「firefoxの各種の設定（入力欄含む）を変更する方法」にたどり着き、そこから「入力欄のフォントのみ」を変える方法を発見できた。今回はあくまで「各種入力欄のフォントをMS Pゴシックに変更する」方法なんだけれども、少し改造すれば別のフォントへの変更や文字サイズの変更も簡単にできるので、他の役にも立つかもしれない。

概要

Firefoxの各種入力欄のフォントをMS Pゴシックに変更する。具体的に変更されるのは以下の通り。

  • Firefox自体の各種入力欄 （アドレスバーや検索バー、Tomblooなどのアドオンの入力欄など）
  • 表示されるページ内の各種入力欄 （検索エンジンの入力欄やコメント欄など）

1. プロファイルフォルダを開く

今現在使用してるFirefoxのプロファイルフォルダを開く必要があるので、以下に引用した手順で開く。

  1. Firefox ウィンドウ上部メニューバー上の ヘルプ メニューをクリックし、トラブルシューティング情報... を選択します。トラブルシューティング情報タブが開きます。
  2. アプリケーション基本情報 の中で、フォルダを開く をクリックします。プロファイルフォルダ （xxxxxxxx.default フォルダ） が開きます。

設定情報のバックアップ | How to | Firefox Support

もし何らかの事情で開けない（例えば古いバージョンのFirefoxを使っている）場合は、下のリンク先からもう一つの方法を試せば開けるはず。

2. userChrome.cssとuserContent.cssを作成する

1.で開いた「xxxxxx.default」というプロファイルフォルダの下に「chrome」フォルダがあるはずなので、そこに「userChrome.css」と「userContent.css」というCSS（スタイルシート）を作成する。userChrome.cssはFirefoxのUI（ユーザインターフェース）をカスタマイズするためのファイルで、具体的にはアドレスバーや検索バーのフォント変更に使用し、userContent.cssは表示されるコンテンツ（つまりWebページ）のフォント変更に使用するために必要。もし「ブラウザのUIのフォントだけを変更したい」という場合ならuserChrome.cssだけ作成すればいいというように応用が利くので、自分の環境に合わせて作ればいい。

ちなみに「chrome」フォルダには最初から「userChrome-example.css」と「userContent-example.css」が存在しているが、これはサンプルファイルなので特に気にしなくてOK。

具体的なCSSの記述は以下の通り。これを各種テキストエディタなどにコピーし、それぞれ「userChrome.css」「userContent.css」と名前を付けてUTF-8で保存。そして上記のchromeフォルダに放り込めば作業は終了。（Windows 7標準のメモ帳でも大丈夫だったのを確認。） 

@charset "utf-8";

input,textarea {
font-family: "ＭＳ Ｐゴシック" !important;
}
なおuserChrome-example.cssには以下のような記述があったが、指示通りにするとなぜか正常に動作しなかったので、意図的にCSSには記述していない。

/*
* 次の @namespace 規則ではデフォルト名前空間を XUL にしています。
* 削除すると正常に動作しなくなるので、削除しないでください。
*/
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

正常に作業が完了していれば、Firefoxの各種入力欄だけMS Pゴシックに設定されているはず。同じような問題でどれだけの人が困っているかはわからないけど、個人的には前から気になっていたので「手間をかける価値は十分あったよ！」と言っておきたい。