Firefox userChrome.cssのコードまとめ

投稿日 2018/04/19 更新日 2021/09/10

覚書です。

環境準備

userChrome.cssの作成

  1. about:config で userChrome.css を使用することを明示する
    1. FirefoxのURLバーに「about:config」を入力する
    2. toolkit.legacyUserProfileCustomizations.stylesheets」を「true」に設定する
      • Firefox69+では、about:config設定が必須に変更されました
  2. プロファイルフォルダーへ移動する
    1. FirefoxのURLバーに「about:support」を入力する
    2. 「プロファイルフォルダー」を確認して、フォルダーを開く
  3. プロファイルフォルダー直下に「chrome」フォルダを新規作成する
  4. 新規作成した「chrome」フォルダ内に「userChrome.css」ファイルを作成する
  5. 下記の「userChrome.cssの動作確認」を参考に動作確認する

Windows10で標準設定のまま使用した場合のuserChrome.cssの配置例

C:\Users\{ユーザー名}\AppData\Roaming\Mozilla\Firefox\Profiles\{プロファイル名}\chrome\userChrome.css

userChrome.cssの動作確認

以下のコードをuserChrome.cssに記述して保存する。その後、Firefoxを再起動し、下記の参考画像のようにFirefoxのUIの文字が赤色で表示されれば成功です。元に戻す場合、userChrome.cssに追加したコードを削除&保存して、Firefoxを再起動すれば元に戻ります。

userChrome.css* {
  color: red;
}
userChrome.css

userChrome.cssの文字コード

userChrome.cssは、UTF-8で保存しましょう。また、userChrome.cssに以下の記述を追加しましょう。

@charset "UTF-8";

上記の設定をせずにCSS内で全角文字を使用した場合、意図した動作とならないことがあります。(全角文字がコメント内部だけにある場合は、特別問題にはなりません)

CSSの基礎知識

プロパティ機能
display: none !important;要素の非表示(領域消滅)
visibility: hidden !important;要素の非表示(領域を残す)

※ 以降で使用するプロパティ抜粋

ブラウザーツールボックス(開発ツール)

ブラウザツールボックスを使用することで、開発ツールでウェブページを確認する感覚でFirefoxUIを確認できます。

  • ブラウザーツールボックス - 開発ツール | MDN
    • [開発ツール] > [設定] > [詳細設定] を変更する
    • [F12] > [F1] > [詳細設定] を変更する
      • [ブラウザとアドオンのデバッガーを有効化]をチェックする
      • [リモートデバッガーを有効化]をチェックする
    • キーボードショートカットから起動する
      • [Ctrl+Alt+Shift+I] or [Cmd+Opt+Shift+I]

フォント

menu,
menubar,
menubutton,
menulist,
menuitem,
toolbarbutton,
window {
  /* 幾何学的な精度を重視してフォントを読みやすくする */
  text-rendering: geometricPrecision !important;
}

タブ

/* タブバーを非表示 */
#TabsToolbar {
  display: none !important;
}
/* 選択しているタブ */
#TabsToolbar .tabbrowser-tab[selected] {
  font-weight: bold;
}

/* 閉じるボタンを削除 */
#TabsToolbar .tabbrowser-tab .tab-close-button {
  display: none !important;
}

/* 未ロードのタブを半透明化 */
#TabsToolbar .tabbrowser-tab[pending] {
  opacity: 0.6;
}

/* ミュートアイコンに色を付ける */
/* Firefox89+のミュートアイコンとサウンドアイコンの見分けがつかない問題への対応 */
.tab-icon-overlay[muted] {
  fill: red !important;
}

多段タブ

タブバーの位置変更

※Firefox65でuserChrome.cssの記述変更が必要

ツールバー

/* ブックマークバーを高くする */
#PersonalToolbar {
  height: 26px;
}

/* ツールボタン「三」を非表示 */
#PanelUI-button {
  display: none !important;
}

/* ブックマークのタブですべて開くを非表示 */
#PlacesToolbar .bookmarks-actions-menuseparator,
#PlacesToolbar .openintabs-menuitem {
  display: none !important;
}

/* URLバーの初期値を英数字入力モードとする */
#urlbar *|input {
  ime-mode: inactive !important;
}

/* 検索バーの初期値を日本語入力モードとする */
#searchbar *|input {
  ime-mode: active !important;
}

コンテキストメニュー

メニュー項目のテキストを変更

/* メニュー項目のテキスト変更 */
/* 例:「リンクの URL をコピー」を「URL をコピー」に変更する */
#context-copylink > label {
  display: none !important;
}
#context-copylink::before {
  content: "URL をコピー";
  margin-inline-start: 2px;
  padding-inline-start: 30px;
}
/* 例:「画像を新しいタブで表示」を「画像だけを表示」に変更する */
#context-viewimage > label {
  display: none !important;
}
#context-viewimage::before {
  content: "画像だけを表示";
  margin-inline-start: 2px;
  padding-inline-start: 30px;
}

メニュー項目の表示順序変更

/* コンテキストメニューを最上段へ移動する */
#context_closeOtherTabs {
  -moz-box-ordinal-group: 0 !important;
}

/* コンテキストメニューを最下段へ移動する */
#context_closeOtherTabs{
  -moz-box-ordinal-group: 10 !important;
}

-moz-box-ordinal-groupは、通常1が指定されている。0を指定することで、他のメニューより上部に移動する。2以上を指定することで他のメニューより下部に移動する。

ただし、移動するメニューの直後に拡張機能で追加したメニューがある場合、意図しない動作となる可能性があるようです。ですが、拡張機能のメニューの-moz-box-ordinal-group値を変更することで回避できることもあるようです。

また、すべてのメニューに対して-moz-box-ordinal-groupを設定することでメニュー全体を任意の順序に並び替えることもできます。

アイコンの領域を確保する(Firefox89+対応)

/* コンテキストメニューのアイコンなし項目にアイコン領域を確保する */
menupopup menu:not([icon], .menu-iconic), 
menupopup menuitem:not([checked="true"], [icon], .menuitem-iconic) {
  padding-inline-start: 36px !important;
}

アクセスキー(accesskey)の問題

アクセスキーは、userChrome.cssで対応することはできません。拡張機能・userChrome.jsで問題に対応することを検討してください。

※対象メニューの非表示でアクセスキーを無効化することは可能です。
 userChrome.cssでのアクセスキーの新設・変更はできません。

その他

/* タイトルバー上のクローズボタンを非表示にする */
.titlebar-close {
  visibility: hidden !important;
}

/* ブックマークツールバーのフォルダアイコンに色を付ける */
.bookmark-item[container][label="新しいフォルダー"] {
  fill: red !important;
}

/* ブックマークツールバーの項目の高さを狭める(Firefox92対応) */
#PlacesToolbar :is(menu, menuitem) {
  padding: 0 !important;
}

/* リンクマウスオーバ時の左下のリンクを非表示にする */
#statuspanel[type="overLink"] {
  display: none !important;
}

/* リンクマウスオーバ時の左下のリンクを特定のドメインのみ非表示にする */
#statuspanel-label[value*="://ドメイン名/"] {
  display: none !important;
}

userChrome.cssの一部を外部ファイル化

/* userChrome.cssとの相対パスを指定する */
@import 'userChrome.xxx.css';

※userChrome.cssの先頭付近に記載しないと動作しないことがあります

備考

参考

コメント

匿名 さんのコメント...

素晴らしいまとめ
参考になりまくり

匿名 さんのコメント...

ブックマークメニュー「タブですべて開く」という意味不明で用途も疑問なコマンドが邪魔でした
旧版では非表示用アドオンを組み込み消すことができましたけど現在は不可能です
このHPを参考にcssファイルを作成し消すことができました
とても助かってます