2017.11.19FirefoxのUIに関わるuserChrome.cssを利用したカスタマイズを備忘録的にまとめていきます。随時追記して行ければという感じで。目次userChrome.cssの場所と作成手順userChrome.css備忘録タブを非表示にするタブを閉じるボタンを非表示にする未読み込みのタブを半透明にする選択中のタブを太字にするサイドバーのインデントを調整するタブの閉じるボタンを左側にするツールバーのボタンの色をグレーにするサイドバーのヘッダの余白を狭くするサイドバー内検索ボックスを消す補足スポンサーリンクuserChrome.cssの場所と作成手順まずは肝心要のuserChrome.cssを作成する手順からご紹介します。Firefoxの画面右上にある3本線のアイコンをクリックし、メニューのヘルプから「トラブルシューティング情報...」を選択してください。次に、トラブルシューティング情報の「アプリケーション基本情報」の中にある「プロファイルフォルダー」横のフォルダーを開くを選択してください。すると、プロファイルが格納されているフォルダが開きます。「C:\Users\%ユーザ名%\AppData\Roaming\Mozilla\Firefox\Profiles\%プロファイル名%」を直接開いても大丈夫です。ちなみにプロファイルフォルダは「ランダムな文字列.プロファイル名」という名前になっています。プロファイルをいじってなければ、「ランダムな文字列.default」になっているかと思います。プロファイルフォルダの中に「chrome」という名前で新しいフォルダを作成し、その中に「userChrome.css」というCSSファイルを作成してください。テキストファイルを作成して「userChrome.css」にリネームすると良いかと思います。この時点でファイルの構成は「...\プロファイルフォルダ\chrome\userChrome.css」となります。このuserChrome.cssをメモ帳といったテキストエディタ等で開き、コードを追記していきます。追記が終わったら、上書き保存してFirefoxを再起動するとカスタマイズした内容が反映されます。userChrome.css備忘録userChrome.cssへのコピペで問題ありませんし、何か自分なりのカスタマイズを加えても良いと思います。フォントを変えたいとか文字に下線を付けたい、などはCSSについてぐぐればすぐに出てきますので、色々試行錯誤してみてください。userChrome.cssの編集に誤りがあったとしても、Firefoxが壊れて使えなくなるということはありませんので安心してください。表示がおかしくなった時は、当該箇所を修正またはそのまま削除して元に戻せば大丈夫です。ならなくなったらuserChrome.css自体を無くして(リネーム、削除、別の場所に移動など)しまえば元通りですのでガンガンいきましょう。自分で好きにカスタマイズをしてみたい方は、以下の記事で「タブバー自体を消す」を例に述べていますので参考にしてください。Firefoxのタブバーを非表示にするまでの流れを解説FirefoxのuserChrome.cssのカスタマイズについて、「タブバーを消す」を例に流れを解説していきます。自分で好きなところをカスタマイズできるようになりたい人向けです。カスタマイズに応用して頂ければと思います。手っ取り早く結...debuyoko.com2017.11.20以下、備忘録です。タブを非表示にするツリータブなどを使用することで画面上部のタブが不必要になった場合は以下を参考にしてください。57で、タブをツリー型にし、さらに画面上部のタブを非表示にする手順をまとめました。none!important;}タブの×ボタンを存在ごと消し去ります。.6;}「.6」は透過率60%の意ですので、数字を変えてお好みで調整してください。bold;}開いているタブの文字を太字にします。ちなみに「.tabbrowser-tab:not[selected]」にすると「選択していないタブ」になります。!important;}サイドバーにはブックマークや履歴などがツリー表示されていますが、このインデント(項目の頭にあるスペースで、下階層ほどスペースが大きくなる)を調整できます。デフォルトだと隙間空きすぎっていう方はどうぞ。「.6em」は「1文字分の大きさに対して60%の大きさ」の意です。馴染み深いピクセルでの指定をしたい場合は「○○px」と書き換えてください。2!important;}タブに表示されるアイコン、ページタイトル、閉じるボタンの順序を変えたい方はどうぞ。閉じるボタン、アイコン、ページタイトルの順にしていますが順番を変えたい方は数字をいじってください。grayscale(100%)!important;}ツールバーに配置したアドオン等のアイコンをグレーにします。アイコンの右上に表示される数字(バッジ)部分の色は変えたくない場合は上から2つ目の「アイコンのみグレーにする」コードを使ってください。LastPassをご使用の方はログイン中もグレーになりログイン状態の判別が付きづらくなるので注意。8px!important;}サイドバーのブックマークとか履歴とか書いてあるサイドバーヘッダの余白(縦・横のスペース)を調整します。2pxとなっている部分は上下幅、8pxは左右幅なので適宜調整してください。左px!important;とすることで調整できます。collapse!important;}よく考えたらブックマークや履歴サイドバー内の検索を利用したことがない方はどうぞ。これは、その要素の「存在自体を消す」というイキった働きをします。要素自体は残して非表示にだけするのであれば、「visibility:hidden;」を使ってください。非表示にしたモノのスペース分だけ残ります。「!important」は、そこで設定した内容について、今後上書きをするなという強い意志です。userChrome.cssより強いやつがいても押し通します。「!important」同士だと後発の方が強いです。なんか反映されないな、という時は「!important」を付けると反映されたりします。(真面目な解説はこちらを参考にしてください。色;」で指定できます。フォント名;」で指定できます。ゴシック”」(フォント名にスペースが含まれる場合は「”」か「’」で囲みます)とかにしてください。どのように設定したら良いかわかりません。上手くいきませんでした。できそうな気がします。ID:c1MDI0MDU以下のコードでどうでしょうか。閉じるボタン、アイコン、タブ名の順にしています。ありがとうございました。ID:c1OTM4NjcWin10、Firefox64では下記CSSは正常なんですが、Firefox65βでは動作しません。アドバイスいただけると嬉しいです。ID:A1MDY3ODUβの環境がこちらに無いので試せませんすみません。Firefoxの開発ツールのひとつの「ブラウザーツールボックス」を使うとUIのスタイルをいじれますので、試してみると良いかと思います。コメントをキャンセルメールアドレスが公開されることはありません。Reserved.タイトルとURLをコピーしました。