userChrome.cssを使ってFirefoxのユーザーインターフェースをカスタマイズする方法

Firefox Quantumのインターフェースは、そのuserChrome.cssファイルのおかげで、まだ非常にカスタマイズ可能です。このファイルを編集して、不要なメニュー項目を非表示にしたり、タブバーをナビゲーションツールバーの下に移動したり、ブックマークツールバーに複数の行を表示したりすることができます。.

この仕組み

FirefoxのuserChrome.cssファイルは、Firefoxが使用するカスケードスタイルシート（CSS）ファイルです。スタイルシートは通常Webページに適用されますが、この特定のスタイルシートはFirefoxのユーザーインターフェースに適用されます。それはあなたがWebページ自体を囲むすべてのものの外観とレイアウトを変更することができます。実際には機能を追加することはできません。あなたはそれを変更、非表示、または移動するためにすでにそこにあるものを変更することができる.

これはGoogle Chromeとは関係ありません。 「Chrome」とは、Webブラウザのユーザーインターフェイスを指します。これは、Google Chromeの名前の由来です。.

userChrome.cssファイルは長い間Firefoxに存在していましたが、Firefox Quantumでは新たに重要性が増しています。以前はブラウザのアドオンで実現できた多くの調整が、userChrome.cssファイルを編集することによってのみ実現できるようになりました.

微調整の場所

CSSコードとFirefoxのインターフェースがどのように設計されているかを理解すれば、独自の調整を作成することもできますが、オンラインで調整を見つけることもできます。もしあなたがある変更をしたいのなら、他の誰かがそれをどうやってやるかを考え出して、そしてコードを書いたでしょう.

これを始めるためのリソースは次のとおりです。

• userChrome.orgからのサンプル調整：userChrome.cssのパワーを実証する興味深い調整の短いリスト.
• Classic CSSの調整：userChrome.cssのリポジトリで、FirefoxのQuantumでは機能しなくなったClassic Theme Restorer拡張機能の作者による調整です。.
• userChromeの微調整：興味深いFirefoxの微調整のコレクション.
• Reddit上のFirefoxCSS：このsubredditは微調整を議論するためのコミュニティです。 subredditを検索して他の人の調整を見つけたり、共有している内容を確認したり、本当に必要な調整が見つからない場合は入力を要求することもできます。.
• あなたのコンテキストメニューを編集するためのガイド：Firefoxのコンテキストメニューから項目を削除してリストの中でそれらの順序を変更するための指示、FirefoxCSS subredditから取られる.

古いバージョンのFirefoxでは異なるインタフェースが使用されていたことに注意してください。以前のuserChrome.cssの調整により、Firefox 57以降ではオンラインで機能しない可能性があることが判明しました。これはFirefox Quantumとも呼ばれます。.

CSSで何をしているのか知っていれば、Firefoxのブラウザのクロムを調べるためにブラウザのツールボックスを有効にすることができます。これはあなたがあなた自身のCSSコードで様々なブラウザインターフェース要素をカスタマイズするのに必要な情報を提供します。.

userChrome.cssファイルの作成方法

userChrome.cssファイルはデフォルトでは存在しないので、試してみたいことがあれば、まずFirefoxプロファイルフォルダ内の適切な場所にファイルを作成する必要があります。.

Firefoxのプロファイルフォルダを起動するには、メニュー>ヘルプ> Firefoxのトラブルシューティング情報の順にクリックします。.

プロファイルフォルダの右側にある「フォルダを開く」ボタンをクリックして開きます。 （macOSやLinuxでは、代わりに「Show in Finder」または「Open Directory」ボタンが表示されます。以下の手順はWindowsでのプロセスを示していますが、MacとLinuxでも基本的に同じです。異なるファイルマネージャとテキストエディタ）

表示されたプロファイルフォルダに「chrome」という名前のフォルダが表示されたら、それをダブルクリックします。ただし、このフォルダは最新バージョンのFirefoxで作成されたものではないため、おそらくそうしないでしょう。.

フォルダを作成するには、右側のペインを右クリックして、「新規」>「フォルダ」を選択します。 「chrome」という名前を付けてEnterキーを押し、次にダブルクリックします。.

まだファイル拡張子が表示されていない場合は、Windowsにファイル拡張子を表示するように指示する必要があります。 Windowsは、物事を単純化するためにデフォルトでファイル拡張子を隠します。この手順は、デフォルトでこの情報を表示するmacOSまたはLinuxでは不要です。.

Windows 8または10では、リボンの[表示]タブをクリックして[ファイル名拡張子]ボックスをチェックすると、それらが表示されます。 Windows 7では、[整理]> [フォルダと検索オプション]をクリックし、[表示]タブをクリックして、[既知のファイルの種類の拡張子を隠す]のチェックを外します。.

これでuserChrome.cssファイルが作成されます。このファイルは、実際には拡張子が.txtではなく、拡張子が.cssの空白のテキストファイルです。.

これを行うには、ここで右ペインを右クリックして、[新規作成]> [テキスト文書]の順に選択します。 .txtファイル拡張子を必ず削除して、「userChrome.css」という名前を付けます。.

Windowsは、ファイルの拡張子を変更していることを警告します。これは、特定の種類のファイルでは問題になる可能性があります。 「はい」をクリックして変更を確定します.

macOSまたはLinuxの場合は、同じ名前の空のテキストファイルを作成します。.

userChrome.cssファイルを編集する方法

userChrome.cssファイルの編集には任意のテキストエディタを使用できます。 Windowsに含まれているメモ帳テキストエディタは問題なく動作します。あなたがより多くの機能を備えたより強力なテキストエディタを望むならば、我々はメモ帳が好きです++.

メモ帳でファイルを編集するには、ファイルを右クリックして[編集]を選択します。.

コピーして貼り付けることによって、ファイルに必要な調整をすべて追加します。複数の調整を追加する場合は、必ずそれらすべてを独自の行に追加してください。.

完了したら、[ファイル]> [メモ帳に保存]をクリックしてファイルを保存します。.

userChrome.cssファイルを編集するときはいつでも、開いているFirefoxウィンドウをすべて閉じて、変更内容を有効にするためにFirefoxを再起動する必要があります。.

userChrome.cssファイルを編集するために頻繁に「chrome」フォルダに戻ってくる場合は、そのフォルダへのデスクトップショートカットを作成するか、ファイルエクスプローラの「クイックアクセス」フォルダに追加することをお勧めします。.

userContent.cssファイル

Firefoxには、編集可能なuserContent.cssファイルもあります。また、userContent.cssファイルを対象としているという微調整に出くわすことがあります。.

このファイルを使用するには、Chromeフォルダと同じフォルダに「userContent.css」という名前のファイルを作成するだけです。このファイルに微調整を加えると、新しいタブページやオプションページなど、Firefoxの内部の「コンテンツページ」に影響します。.

助けて、私は何かを壊した!

微調整で問題が発生した場合は、それをuserChrome.cssファイルから削除してFirefoxを再起動するだけです。それでもうまくいかない場合は、userChrome.cssファイルを完全に削除してブラウザを再起動し、すべての変更を消去して新しいFirefoxインターフェイスを取得してください。.