Firefox userChrome.cssのコードまとめ

5

覚書です。

環境準備

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の先頭付近に記載しないと動作しないことがあります

備考

参考