FirefoxのuserChrome.cssを使ってタイトルバーの文字色を変えた

明るい色だと眼に優しくないので、FirefoxやWindowsのウィンドウの色は暗めに設定している。
暗めにしたほうが眼への負担は少ない。

だが、これで困ることがひとつあった。
それはFirefoxをウィンドウ化した状態だと、ページタイトルのテキストカラーが黒になって、視認性が悪いということだ。

いつのバージョンからか、Firefoxはデフォルトではページタイトルを表示しなくなったが、以下のアドオンを使うことで表示できる。
Hidden Menu Web Title :: Add-ons for Firefox

userChrome.cssを使えばいいんだろうということはうすうす気づいていたが、どう記述すればいいのかがわからなかった。

色々検索してみた結果、海外フォーラムにたどりついた。
ここにこんな記述がある。

You may also be able to change the color only to the title bar with code in userChrome.css (possibly #titlebar {color: #xxxxxx !important;}).
How do you change the color of the title text? | Firefox サポートフォーラム | Mozilla サポート



"#titlebar"とあるから、関係あるっぽい。

で、推測して以下の記述をuserChrome.cssに書いて再起動してみた。
/* ◆◆◆メインウィンドウタイトルバーテキストカラー◆◆◆ */
#titlebar-text {color: white !important;}

うん、大成功!
タイトルバーの文字色を変えることができた。
これで見やすくなって、満足。

今回の例では、カラーを"white"(白)にしたが、他の色にしたかったら以下の様なページを参考にして"white"の部分を変更すればいい。
かんたんに自分好みの色にできる。
Web Color Chart - Hexadecimal - by VisiBone
カラーチャート/カラーグラデーション - TAG index Webサイト
Web Safe Color一覧表/カラーチャート

userChrome.cssの使い方と設定方法は、以下ページがわかりやすかった。感謝。
【最新版】ユーザーCSSの使い方【Firefox,Chrome,IE,Opera】 | 10press
関連記事

0 Comments

Leave a comment