2018-09-06T11:42:25Z

Firefox userChrome.cssのコードまとめ

忘却禄です。

環境準備

userChrome.cssの作成

  1. Firefoxのプロファイルのパスへ移動する
  2. FirefoxのURLバーに「about:profiles」を入力して、「プロファイルについて」ページを表示する
  3. ルートディレクトリーのフォルダを開く
  4. ルートディレクトリーのフォルダにchromeフォルダを作成する
  5. chromeフォルダ内にuserChrome.cssファイルを作成する
  6. 下記の「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を再起動すれば元に戻ります。

* {  
  color: red;  
}

enter image description here

userChrome.cssの文字コード

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

@charset "UTF-8";

上記の設定を行わない場合、CSS内で全角文字を使用した場合、意図した動作とならない可能性があります。(全角文字がコメント内部以外にある場合は、特別問題は発生しません)

CSSの基礎知識

プロパティ 機能
display: none !important; 要素の消去(領域消滅)
opacity: .6; 半透明化(0~1)
0:非表示/1:表示

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

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

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

userChrome.css

フォント

menu,
menubar,
menubutton,
menulist,
menuitem,
toolbarbutton,
window {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif !important;
  /* 幾何学的な精度を重視してフォントを読みやすくする */
  text-rendering: geometricPrecision !important;
}

タブ

/* 選択しているタブ */
#TabsToolbar .tabbrowser-tab[selected] {  
  font-weight: bold;
}

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

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

/* タブバーを非表示 */
#TabsToolbar {
  display:none !important;
}

多段タブ

下記外部ページ参照

ツールバー

/* ブックマークバーを高くする */
#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;
}

コンテキストメニュー

下記記事参照

メニュー項目の表示順序
/* コンテキストメニューを最上段へ移動する */
#context_closeOtherTabs {  
  -moz-box-ordinal-group: 0;  
}

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

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

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

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

その他

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

備考

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

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

※Firefox62で動作していないことを確認

 コメントを投稿