Last Updated on 2025年7月31日
概要
Firefoxのブックマークツールバーをカスタマイズして、通常のブックマークは「アイコンのみ」、フォルダは「アイコン＋名前付き」で表示する方法を紹介します。Firefoxの標準設定では実現できませんが、userChrome.cssを使えば実現可能です。この記事では、その手順をわかりやすく解説します。
最終的に下記のような表示になることが目的です。
目次
事前準備：userChrome.cssの有効化
- Firefoxのアドレスバーに
about:configと入力してEnter - 下記が表示されたら確認して進んでください(危険性を承知の上で使用する)
- 下記が表示されたら確認して進んでください(すべて表示)
toolkit.legacyUserProfileCustomizations.stylesheetsを検索- 値を
trueに変更
これで userChrome.css を読み込めるようになります。
userChrome.cssの設置場所
- アドレスバーに
about:supportを入力 - 「プロファイルフォルダー」の「フォルダーを開く」をクリック
- 開いた場所に
chromeフォルダを作成（なければ） - その中に
userChrome.cssファイルを配置
※ Firefoxですが、chromeという命名でOKです。
下記のような場所とファイル名です。
|
1 2 3 |
例： C:\Users\[ユーザー名]\AppData\Roaming\Mozilla\Firefox\Profiles\xxxxx.default-release\chrome\userChrome.css |
CSSコードの記述内容
以下のコードを userChrome.css に記述してください：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/* 通常のブックマーク（フォルダではない）のテキストを非表示にする */ #personal-bookmarks toolbarbutton:not([container="true"]) .toolbarbutton-text { display: none !important; } /* ブックマークフォルダ（container属性がtrueのもの）はテキスト表示(任意) */ #personal-bookmarks toolbarbutton[container="true"] .toolbarbutton-text { display: inline !important; } /* アイコンのテキスト表示を太字にする(任意) */ #personal-bookmarks toolbarbutton[container="true"] .toolbarbutton-text { font-weight: bold !important; } |
これで、通常のブックマークは「アイコンのみ」、フォルダは「名前つき」で表示されます。
変更の確認と反映方法
userChrome.cssを保存- Firefoxを完全に終了
- 再度Firefoxを起動
※タスクマネージャーで Firefox のプロセスが残っていないかも確認すると確実です。
補足：よくあるつまずきポイント
- 誤ったフォルダに置いていないか？
storage\permanent\chrome\userChrome.cssはNGです。必ずProfiles\xxx.default-release\chrome内に置いてください。 - 拡張子は正しく .css か？
.txtになっていないか確認を。 - 設定が反映されない場合
テストとして以下を追加してタブバーが太くなるか確認できます：
|
1 2 3 4 |
#TabsToolbar { height: 80px !important; } |
まとめ
- Firefoxのブックマークツールバーは
userChrome.cssを使えば柔軟にカスタマイズ可能 - 通常のブックマークはアイコンのみ、フォルダは名前表示という設定も可能
- 正しい場所にCSSを配置し、再起動すれば反映される
ブックマークをスッキリと管理したい方におすすめのカスタマイズです。
