CSSを使用してFirefox 57をカスタマイズする

FxのカスタムCSSは、人気のFirefoxアドオンClassic Theme Restorerの作者によるFirefox 57以降のCSSスタイルのコレクションです。

Firefox 57は、WebExtensions専用システムへの切り替えにより、Classic Theme Restorerや、拡張機能やテーマを変更する他のインターフェースをサポートしなくなります。 新しいWebExtensionsシステムは、拡張機能の開発者にAPIを提供しないことにより、ブラウザーのユーザーインターフェイスの変更を防ぎます。

FirefoxユーザーがUIを変更するために残されている唯一のオプションは、MozillaがFirefoxでネイティブに提供するものとは別に、CSSを使用することです。

CSSの使用方法を知っているFirefoxユーザーは、CSSファイルを手動で編集してWebブラウザーのバージョンを変更できます。 一方、Firefoxのほとんどのユーザーはおそらくそうではなく、それがFxのカスタムCSSの出番です。

CSSを使用してFirefox 57をカスタマイズする

このプロジェクトはGitHubでホストされ、Classic Theme RestorerやNoiaButtonsなどの人気のあるFirefoxアドオンで知られるArisによって管理されています。 Classic Theme Restorerは、MozillaがFirefox 29で起動したAustralisインターフェイスへの応答として作成されました。Mozillaは、Firefoxバージョン57で動作しなくなりました。ユーザーインターフェイスをWebExtensions APIとして変更します。

プロジェクトの開始ページには、Firefox Webブラウザーのプロファイルフォルダーの場所、および提供されたスタイルを使用してFirefoxを変更する方法に関する情報が記載されています。

プロファイルフォルダーを見つける最も簡単な方法は、ブラウザーのアドレスバーにabout:supportを読み込み、[アプリケーションの基本]> [プロファイルフォルダー]の下にある[フォルダーを開く]ボタンをクリックすることです。

プロファイルディレクトリのルートに存在しない場合は、chromeというフォルダーを作成する必要があります。 完了したら、アーカイブのコンテンツをそのフォルダーにコピーします。 userChrome.cssとuserContent.cssがchromeフォルダーのルートにあることを確認してください。

これらのカスタムスタイルをFirefoxに追加するには、これですべてです。 ただし、実行する必要がある別のステップがあり、それは微調整をカスタマイズしています。

デフォルトの調整セットは一部のユーザーにアピールするかもしれませんが、CSSファイルには、さまざまな調整を有効または無効にしてインターフェースをさらに変更するオプションが付属しています。

プレーンテキストエディターでuserChrome.cssファイルを開きます。 ファイルは@importコマンドを使用して、CSSファイルから実際のCSSスタイルをインポートします。 これは、メインのuserChrome.cssを整理し、Firefoxのユーザーが簡単に変更できるようにするために行われます。

/ *で始まる行はコメント化され、リンク先のCSSファイルはそのためインポートされません。

あなたがする必要があるのは、Firefoxで有効にしたい利用可能な微調整を決定するために、一度に1つのセクションをリストすることです。

行の前に/ *を追加し、後ろに* /を追加して、調整をアンロードします。 同様に、前の/ *と後の* /を削除して、微調整を有効にします。

現在利用可能な調整のリストは次のとおりです。

  • ナビゲーションツールバーボタンを変更します。
  • 二乗ボタンを有効にする
  • アイコンの外観を変更する
  • アプリボタンのポップアップを変更します。
  • ブックマークメニューとポップアップの外観を変更します。
  • 古いブックマークツールバーボタンの外観
  • その他のボタン設定(進むボタンの非表示、戻るボタンと進むボタンで区切られた履歴ポップアップ、ズームボタンの非表示リセット)。
  • カスタムの戻るおよび進むボタンの外観
  • ナビゲーションツールバーのアプリケーション/ハンバーガーボタン
  • Firefoxタイトルバーのアプリケーション/ハンバーガーボタン(Windowsのみ)
  • タブの外観(スタイル、ツールバーの下のインスタンスのツールバーの位置(読み取り:上部にないタブ))、タブタイトル、アイコンなど。
  • 検索バー、コンテキストメニュー、アイコン、その他のツールバーを変更します。
  • ロケーションバーのスタイルを変更します。

これらの一部は自明です。 他のものはそうではありませんが、これらに関しては2つの選択肢があります。 それらを有効にして直接チェックアウトするか、ロードされるCSSファイルを開いて、何をするのかを調べます。 ただし、後者にはCSSのある程度の知識が必要です。

userContent.cssファイルは同じレイアウトを使用します。 CSSファイルをインポートし、それらを有効または無効にするのはユーザー次第です。

プロジェクトでは、Firefoxの外観をさらに変更するために、推奨されるネイティブインターフェイスの調整とabout:configの調整のリストも提供されています。

終わりの言葉

FxのカスタムCSSは、Firefox 57のインターフェイスに多くのインターフェイス変更を提供しますが、拡張機能や組み込み機能を使用して行うことはできません。 既存のFirefoxユーザーは、特に今までClassic Theme Restorerまたは同等のアドオンを使用していた場合、特に便利です。

更新はArisによって定期的にリリースされます。 これは、微調整によって導入される可能性がある新しい機能だけでなく、新しいFirefoxリリースと互換性のあるスタイルを維持するのにも適しています。