2015年9月10日木曜日

Firefoxのサイドバーのブックマークと履歴のフォントを変更する方法

*** 2018/10/25 追記 ***
当記事コメント欄でご紹介したブックマークの行間を狭める方法ではFirefox63から狭まらなくなったので、新たにこちらの記事でご紹介いたします
*** 追記ここまで ***

前置きです。

最近、何年かぶりにWindowsでFirefoxを使ってみました。

Linuxにはインストールしてはあるのですが、通常telnetやsshでログインしますので、そんなゴージャスなアプリってなかなか使わないんですよねえ。

使ってみて驚きました。
昔使った時より大変使いやすくなっているんじゃないでしょうか。(使えないと思ったからOperaを使っていたわけです)
すぐ気に入りました。

MosaicからNetscapeに乗り換えた時の驚きを懐かしく思い出しました。
別に今回は驚いたわけじゃないんですが。

今までメインで使っていたOpera12からすぐに乗り換えました。

現在でもOpera12にほとんど不満はないのですが、いかんせんOpera12では表示できないサイトがぼつぼつ増えてきて、どうしようかなあ、と思っていたところです。

Chromeがシェアを伸ばしているようですが、Chromeはどうしても馴染めません。
やたらともっさりしてるし、メモリ食うし、文字がやけににじむサイトがあるし、UIが特殊すぎるし、タブタブうっせーし、Google製だし。
GoogleアプリとFlash専用ブラウザとして活用させていただいています。
GoogleさんはFlashを根絶したいようですから、ちとGoogleさんにとっては不本意でしょうが。

Chromeといえば、Chromeにログインしないと拡張機能の移行をさせてくれないんですね。
現在、Windows10へWindows8.1で使っていた環境の移行作業中なのですが、ブックマークは素直に個人プロファイルディレクトリのコピーだけで取り込めましたが、拡張機能ははじかれてしまいます。
セキュリティ上の理由だとかGoogleさんはおっしゃいますが、手元に丸々残っているユーザプロファイルを受け付けてくれないのはちょっと不便ですねえ。

ところで。

Windows10でFirefoxを起動して驚きました。
サイドバーに並べたブックマークの文字のにじみがひどい有様になっています。

原因はお察しの通り、Windows10から採用されたフォント、游ゴシックUIとClearTypeと、デスクトップPCの場合の標準の解像度、96DPIという絶妙のコラボレーションが織りなすハーモニーの結果です。

游ゴシックって高DPI環境じゃないと表せないような曲線が多用されているので、たった96DPIしかないモニタにフォントスムージング技術をかぶせるとぼやけるのは当然です。
前のOSのメイリオの時も同様の理由でボケましたが、游ゴシックよりは直線的なフォントだったため、ボケかたが游ゴシックに比べれば軽微でした。さらにその前のMS UIゴシックではさらに直線的なフォントなのでほとんとボケません。

要するに、Windows10は高DPI環境を前提にしているわけです。そこら辺のスマートフォンだって400DPIや500DPIは当たり前ですから、その環境できれいに見えるフォントを持ってきちゃったら、たった1インチに96ドットしか打てないモニタできれいになるわけがない。
結局、このブログでこれまでも指摘してきましたが、今回も「タブレットのことで頭がいっぱい」なわけです。

いずれはそうなるにしても、どんなDPIでも同一フォント、同一レンダリングエンジンっちゅーのは、ちょっと強引すぎると思うんですがねえ。
まだまだデスクトップ環境はすたれないでしょうし、デスクトップではほぼ96dpiで表示するのが一般的であり続けるでしょうからねえ。

Windows8から(7からだっけ?)、システムフォントを変更するインタフェイスも廃止するほど強硬な態度をとるMSですが、奈辺に意図があるのでしょうかねえ。
挙句にユーザに「メイリオは汚い」「游ゴシックは汚い」とか印象を持たれてしまう始末です。
フォントに汚名を着せて頬かむりしている態度は遺憾です。
不適な用途に使われているフォントがかわいそうですよ。

で、本題です。

Windows10上で稼働するFirefoxは、タイトルバーやブックマークなどの表示に游ゴシックが使われます。
で、ぼやけ、にじみが出ます。

単純な対応方法は、高DPI環境で運用するか、低DPI向きのフォントに変更するか、です。

今回はフォントを変更して対応する方法を紹介します。
なお、対象Firefoxはこの記事を書いている時点の最新であるFirefox40とします。


まず、Firefoxフォルダのプロファイルフォルダを開きます。
場所は%appdata%\Mozilla\Firefox\Profiles\*.default\ですが、これでは何を言っているかわからない方はFirefoxから開く方法があります。

方法は、

  1. Firefoxを起動します。
  2. メニューの「ヘルプ(H)」から「トラブルシューティング情報(T)...」を選択します。
  3. 「アプリケーション基本情報」テーブルに「プロファイルフォルダ 」という項目がありますので、その横の「フォルダを開く」ボタンを押下します。
さて、Firefoxのプロファイルフォルダを開いたら、その中にchromeというフォルダがない場合は手動で作成し、chromeフォルダを開いてください。

chromeフォルダを開いたら、userChrome.cssというファイルがなければ新規に作成してください。
エクスプローラで拡張子を表示しない設定のままで作成して「反映されねぇ~騙しやがったなぁ~」とかのたうち回らないようご留意ください。

テキストエディタでuserChrome.cssを開いてください。
テキストエディタってなに?って方はノートパッドで開いてください。
文字かければいいんだろ、とか言ってWordとか一太郎とかWriteとかで開かないでください。

開いたら、以下のインデントされている部分をコピーペーストして保存してFirefoxを再起動してください。

1) サイドバーのブックマークと履歴の表示フォントをメイリオUIヘ変更し、9ポイントで表示する場合は次の通りです。
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
#bookmarksPanel, #history-panel {
 font-size: 9pt !important;
 font-family: "Meiryo UI" !important;
}
2) とにかく游ゴシックを駆逐して全部MS UI ゴシックにしたい!という方は以下をコピーペーストしてください。
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
* {
 font-size: 9pt !important;
 font-family: "MS UI Gothic" !important;
}
フォントやポイント数をいろいろ遊んでみると、MS UIゴシックだと滲まないけどいまいちきれいじゃないし・・・とか、いろいろ出てくると思います。
ご自身で納得できる落としどころを探ってみてください。

31 件のコメント:

  1. 文字のにじみが直りました。ありがとうございます。

    返信削除
  2. コメントをお寄せいただきありがとうございます。
    折角ですので、ついでと言ってはなんですが、下記の行をuserChrome.cssに追記しますと、サイドバーの行間を調整できます。

    treechildren.sidebar-placesTreechildren::-moz-tree-row{
    height:1px !important;
    }

    この例では1pxとしていますが、実際の表示では1pxではなく最低限の表示領域でもって表示されます。
    この値を好みの数値に変えていただきますと、より見やすくなるかと思います。

    返信削除
  3. おお、直りました!
    他のサイトを参照に、userChrome.cssはこしらえたのですが
    変化なく困っておりました。
    chromeというフォルダを作るのですね。
    助かりました、ありがとう。
    (もしコメントが重複していたらごめんなさい)

    返信削除
  4. ほんのちょっとしたことでもお役に立てましたならば、これほどうれしいことはございません。コメントをお寄せいただきありがとうございました。

    返信削除
  5. これは簡単そうと、ためにしやってみたら大成功!
    おかげさまでブックマークの滲んだ感じがとれました!
    ありがとうございました!

    返信削除
  6. 本日Win10に変更し、Firefoxを立ち上げ驚き、この滲みを取ろうと努力し、途方に暮れたあげくこのサイトにたどり着き、無事解決しました。
    ayumi様の分析力と技術力には本当に驚きです。
    誠にありがとうございました。

    返信削除
  7. ありがとうございました。
    本当に見やすくなりました。
    ブックマークの登録件数が多いので、少々まいっておりました。
    繰り返し、繰り返しありがとうございました。

    返信削除
  8. うわー、簡単に治りました。
    ありがとうございます!!

    返信削除
  9. 素晴らしいです!
    ありがとうございました。

    返信削除
  10. てっきり老眼が始まったと焦りましたが
    無事解決!感動!
    ありがとうございました

    返信削除
  11. Win10にアップグレードした所です。
    1)を貼り付けたらブックマークが綺麗な文字に戻りました!
    ありがとうございます!!!

    返信削除
  12. Win10アップグレードしたところです。
    ブックマークの文字がなおりました!
    ありがとうございます!!!

    返信削除
  13. 助かりました。ありがとうございます

    返信削除
  14. にじみを駆逐できました。説明文すこし面白かったです。
    ありがとうございました。

    返信削除
  15. にじみ対策(1)の方法で改善できました。
    とても分かりやすい説明で助かりました。
    ありがとうございました。

    返信削除
  16. にじみに悩んでいたので凄い助かりました!
    ありがとうございました。

    返信削除
  17. 同じ症状で悩んでおりました。
    最初は自分の目がおかしくなったのかと思ってました!

    にじみが改善してとても嬉しいです。
    ありがとうございました。

    返信削除
  18. 助かりました

    返信削除
  19. これでwin10でも気持よくfirefoxを使い続けられます。ありがとうございます。

    返信削除
  20. ありがとうございます。
    メイリオUIに変更できました。

    返信削除
  21. ①の方法できれいになりました。
    ありがとうございます。ペコリッ(o_ _)o))

    返信削除
  22. まだ働いている60代のおじさんにも、とても分かりやすく、なぜ文字がぼけるのか?テキストエディタの作り方まで詳しく書いていただき、今月Windows10にしたばかりの2台のPCとタブレット1台をきれいな文字に変更できました。あなたの記事のおかげで何十人、何百人の人達が助かっています。これからも詳しくお願いします。ありがとうございました。
    横浜ST

    返信削除
  23. すごい、サイドバーのぼけ直りました。うれしいです。有益な情報有難うござしました。

    返信削除
  24. こんなドンピシャな悩みに応えてくれる記事があったなんて!
    とても分かりやすい説明で助かりました、ありがとうございました!

    返信削除
  25. すごく快適になりました。
    どうもありがとうございました!

    返信削除
  26. 本日駆け込みでwin10導入しましたがお蔭さまで早速助かりました!
    ありがとうございます。

    返信削除
  27. おお、綺麗で見やすくなった。ありがとうございました。

    返信削除
  28. win7ですがこの現象に悩んでいたので本当に助かりました!
    ありがとうございました!

    返信削除
  29. この記事と同じ現象かもしれないことが起きているので参考にさせてもらうんだぜ。

    返信削除
  30. 以前win10インストール時にもお世話になったものです
    最近firefoxのリフレッシュをしたらやっぱりそのままでした

    筆者様に感謝するとともにMSには呆れるばかりです

    返信削除
  31. とうとう最後の56.02までに修正されませんでしたね。一新した57は使いやすいアドオンがすべて絶たれてしまったのでなんとか自動更新を完全停止して利用していきます。
    フォントは見栄えを決める基礎的で重要なブラウザのインフラでもありますから、こういうのを放置しているところを見てもfirefoxの上が別の目的を優先して、ユーザーフレンドリーで無くなってるように思えてなりません。
    Chomeはアドオンを入れない使い方で、firefoxはリッチに使うというやり方でしたのでなんとも歯がゆいものです。

    返信削除