FirefoxやChromeでAAが縦長になったり潰れたりをなんとかしたい

AAは基本的に、フォントがMS Pゴシックの16px、行間が2pxの環境で最適に見えるように作られている。
ただ、Firefoxはデフォルトで行間が3pxに設定されていて、しかもオプションなどで変更する事が出来ない。
つまり、FirefoxでAAを見ると、行間の開きが大きいために縦長に見えてしまう。

まとめブログの場合は、管理人がスタイルシート等を使って適切な状態にしてくれていれば、最適なAAとして見ることも可能。
ただそうでない場合は、Firefoxで見ると縦長になってしまう。
それを防ぐための方法をググって探してきたのでここに書いておく。参考にして欲しい。
まず言うまでも無いと思うが大前提として、オプションでフォントの設定を変更する。

（Firefoxの場合）
ツール→オプション→コンテンツで、規定のフォントをＭＳ Ｐゴシックに、フォントサイズを16にする。

（Chromeの場合）
設定→詳細設定を表示→ウェブコンテンツ→フォントサイズを中、フォントをカスタマイズで標準フォントをＭＳ Ｐゴシックにする。
本来の表示 あなたの環境での表示

　　　　　　　　／￣￣｀ヽ
　　　　　　　/　　_,,ノ ﾐﾐ ヽ
　　　　　　　|　 （○ ）ﾐ（○）
　　　　　　　|　　⌒（__人_）　　　　　　　　　 ＿_＿＿
　　　　　　　|　　　　 ｀ー"i　　　　　　　　／_,,ノ 　ヽ,_＼
　　　　　　　.i　　　　　　　}　　　　　 　 oﾟ(（○）)　 (（○）)ﾟo
　　　　　　　 ゝ＿　　＿ノ　　　　 　 　 |　⌒（__人__ ）⌒ |
　　　　　　／　　　匸ヽ ⌒ヽ　　　　　　ヽ、　 |r┬-| 　 ノ
　　　　 ／　　／　 ＼￣ヽ. i　　　　, -‐ (_)￣ `ー'´ ￣ ヽ
　　　　 ＼　　＼　　　＼＿.!　　　 ｌ_ｊ_ｊ_ｊ と)　　　　　　ｲ　|
　　　　　　＼_メ勹　　　 i　　　　　　　￣ |　　　　　＿_|,　i
　　　　　　　　i￣　　　　i　　　　　　　 　 .|　　　 と|＿＿.ﾉ
　　　　　　　　{ﾞ￣￣ﾟ￣ﾞ}　　　　　　　　　|＝＝=＝＝|
　　　　　　　　|　　　、　 |　　　　　　　　 /　　　　　 　 ヽ
　　　　　　　　ヽ、　　＼.|　　　　　　　 /　　 ／⌒＼　　ヽ
　　　　　　　　 　 >　 　 〉　　　　　　　i　 .／　　　　 ＼　 ）
　　　　　　　　　/　　.／|　　　　　　　 | 　 |　　　　　　|　./
　　　　　　　　 〈＿／＿i　　　　　　　 |＿ﾉ　　　　　　|_ノ
　　　　　　　　 （　＼ ソ　　　　　　　／ノ　　　　　　　Ｌつ

　　　　　　　　／￣￣｀ヽ
　　　　　　　/　　_,,ノ ﾐﾐ ヽ
　　　　　　　|　 （○ ）ﾐ（○）
　　　　　　　|　　⌒（__人_）　　　　　　　　　 ＿_＿＿
　　　　　　　|　　　　 ｀ー"i　　　　　　　　／_,,ノ 　ヽ,_＼
　　　　　　　.i　　　　　　　}　　　　　 　 oﾟ(（○）)　 (（○）)ﾟo
　　　　　　　 ゝ＿　　＿ノ　　　　 　 　 |　⌒（__人__ ）⌒ |
　　　　　　／　　　匸ヽ ⌒ヽ　　　　　　ヽ、　 |r┬-| 　 ノ
　　　　 ／　　／　 ＼￣ヽ. i　　　　, -‐ (_)￣ `ー'´ ￣ ヽ
　　　　 ＼　　＼　　　＼＿.!　　　 ｌ_ｊ_ｊ_ｊ と)　　　　　　ｲ　|
　　　　　　＼_メ勹　　　 i　　　　　　　￣ |　　　　　＿_|,　i
　　　　　　　　i￣　　　　i　　　　　　　 　 .|　　　 と|＿＿.ﾉ
　　　　　　　　{ﾞ￣￣ﾟ￣ﾞ}　　　　　　　　　|＝＝=＝＝|
　　　　　　　　|　　　、　 |　　　　　　　　 /　　　　　 　 ヽ
　　　　　　　　ヽ、　　＼.|　　　　　　　 /　　 ／⌒＼　　ヽ
　　　　　　　　 　 >　 　 〉　　　　　　　i　 .／　　　　 ＼　 ）
　　　　　　　　　/　　.／|　　　　　　　 | 　 |　　　　　　|　./
　　　　　　　　 〈＿／＿i　　　　　　　 |＿ﾉ　　　　　　|_ノ
　　　　　　　　 （　＼ ソ　　　　　　　／ノ　　　　　　　Ｌつ

左右のAAを見比べて、右の方が縦長だったり潰れてたりしたらダメ。
ちゃんと設定出来ていたら、両方とも同じ行間（AAの高さが同じ）になっているはず。
両方が同じように見えていれば、あなたの環境は（AAを見ることに関しては）最適なので問題ないです。
＜設定方法＞

プロファイルの設定フォルダ、
つまりFirefoxフォルダ内の「chromeフォルダ」を探す。

例）XPで初期設定の場合
C:\Documents and Settings\UserName\Application Data\Mozilla\Firefox\Profiles\ProfilesName\chrome
※赤字の部分は、人によって違います。

フォルダの中に入っている「userContent-example.css」の名前を「userContent.css」に書きかえる。
※userContent.cssがすでにある場合は、それを使用する。
※userContent-example.cssがない場合は、テキストファイルを作って、userContent.cssという名前にする。
　
userContent.cssをメモ帳などのテキストエディタで開き、↓をコピペしてスタイルシートを書き加えてから上書き保存する。

-----------<↓から>-----------

* {
line-height: 1.125;
}
pre {
font-size: 16px;
}

-----------<↑まで>-----------

全てが終わったら、Firefoxを再起動すれば反映されているはず、多分。


ちなみにこれはChromeでも使えるようです。
XPで初期設定の場合、C:\Documents and Settings\UserName\Local Settings\Application Data\Google
\Chrome\User Data\Default\User StyleSheets\Custom.css を開いて、上のコードを貼り付けて上書き保存でおｋ。

（追記）
クロームのバージョンアップで何故かこのスタイルシート機能が削除されたみたいです。
スタイルシート機能を使うにはクロームで公式にアクセスして、stylebotをインストールした後、
右上に追加されている「css」→「open stylebot...」→一番下の「Edit CSS」で上記のスタイルシートをコピペしてセーブ。
これで多分いける、ハズ。

[戻る]