【Firefox 158対応】サイドバーのヘッダーを非表示にする方法（userChrome.css）

Tips

概要

Firefoxのアップデートにより、サイドバーの構造が変更されたようで、これまで使用していた #sidebar-header {display: none !important;} ではヘッダーを非表示にできなくなりました。

Firefox 158.0で確認した、サイドバーのヘッダーを非表示にするためのCSSを紹介します。

サンプルコード

/* Firefox 158 サイドバーヘッダー非表示 */
@-moz-document url-prefix("chrome://browser/content/webext-panels.xhtml") {
    #sidebar-panel-header {
        display: none !important;
    }
}

詳細

Firefox 158.0にて、サイドバー上部に表示されるヘッダーを非表示にする方法を紹介します。

以前は、userChrome.css に以下を記述することで、サイドバーのヘッダーを非表示にできていました。

#sidebar-header {
    display: none !important;
}

しかし、Firefoxのアップデートに伴い、このCSSではヘッダーが非表示にならなくなりました。

Firefox 158.0にて、サイドバー上部に表示されるヘッダーを非表示にする方法を紹介します。

以前は、userChrome.css に以下を記述することで、サイドバーのヘッダーを非表示にできていました。

#sidebar-header {
    display: none !important;
}

しかし、Firefoxのアップデートに伴い、このCSSではヘッダーが非表示にならなくなりました。

今回紹介するCSSでは、#sidebar-panel-header を指定することで、ヘッダーを非表示にします。

■ 変更前

サイドバー上部に「ツリー型タブ」のタイトルと閉じるボタンが表示されています。

■ 変更後

ヘッダーが非表示になり、サイドバーの表示領域を広く使えるようになります。

■ 設定方法

  1. Firefoxのプロファイルフォルダー内にある chrome フォルダーを開きます。
  2. userChrome.css にサンプルコードを追加します。
  3. Firefoxを再起動します。

※ userChrome.css を初めて利用する場合は、about:config で toolkit.legacyUserProfileCustomizations.stylesheets を true に設定する必要があります。

※ Firefox 158.0での動作を想定しています。今後のアップデートにより、CSSの変更が必要になる場合があります。

書籍

1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座

1冊ですべては身につきませんが、HTML と CSS について丁寧に解説されています。全体像を理解できるので初心者にもお勧めです。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座
created by Rinker
CSS設計完全ガイド　～詳細解説＋実践的モジュール集

CSS について学ぶのであれば必須の1冊です。丁寧に解説されていますので内容についてもわかりやすいです。CSS 設計で重要視しなければいけないポイントや、保守性の高いコードを書くためのルールが具体的な例と一緒に書かれています。CSS だけでなく他のコードを書く際にもこの考え方が役に立つためおすすめします。ただ、書籍版は分厚いのでご注意ください。

CSS設計完全ガイド　～詳細解説＋実践的モジュール集
created by Rinker

おわりに

今回は、Firefox 158.0でサイドバーのヘッダーを非表示にする方法を紹介しました。

Firefoxのアップデートによって、これまで使用していたCSSが効かなくなることがありますが、今回もCSSの指定を変更することで対応できました。

同じようにサイドバーのヘッダーが表示されて困っている方の参考になれば幸いです。

タイトルとURLをコピーしました