Firefox57でブックマークメニューに色付けする方法

Firefox57でブックマークメニューに色付けする方法のまとめです。

「Firefox57のブックマークを元の色に戻す」というテクニックとは別に、SVG fillを指定する方法できれいな色のブックマークフォルダにすることができます。

例によって「userChrome.css」を編集することで変更することができます。

userChrome.cssの編集方法については下記の記事を参照してください。

Firefoxの不要なコンテキストメニューを消す

Firefoxで「右クリックで表示される「コンテキストメニュー」から、不要な項目を消す方法のまとめです。 「userChrome.css」を編集することで簡単に消すことができます。 userChrome.cssの場所 userChrome....

00.bulog.jp

2017.09.30

/* ブックマークフォルダの色付け */

  /* フォルダ */
#bookmarks-view treechildren::-moz-tree-image(container),
#PlacesToolbarItems toolbarbutton[container="true"] .toolbarbutton-icon,
#PlacesToolbarItems menu[container="true"] .menu-iconic-left,
#BMB_bookmarksPopup menu[container="true"] .menu-iconic-icon,
#bookmarksMenu menu[container="true"] .menu-iconic-icon {
  fill: #e8bb00 !important; /* 金色 */
}
  /* ライブブックマーク（RSS Feed） */
#bookmarks-view treechildren::-moz-tree-image(container, livemark),
#PlacesToolbarItems toolbarbutton[container="true"][livemark="true"] .toolbarbutton-icon,
#PlacesToolbarItems menu[container="true"][livemark="true"] .menu-iconic-left,
#BMB_bookmarksPopup menu[container="true"][livemark="true"] .menu-iconic-icon,
#bookmarksMenu menu[container="true"][livemark="true"] .menu-iconic-icon {
  fill: orange !important; /* オレンジ色 */
}
  /* スマートブックマークフォルダ */
#bookmarks-view treechildren::-moz-tree-image(container, query),
#PlacesToolbarItems toolbarbutton[container="true"][query="true"] .toolbarbutton-icon,
#PlacesToolbarItems menu[container="true"][query="true"] .menu-iconic-left,
#BMB_bookmarksPopup menu[container="true"][query="true"] .menu-iconic-icon,
#bookmarksMenu menu[container="true"][query="true"] .menu-iconic-icon {
  fill: #69c !important; /* 青色 */
}
  /* サイドバーブックマークの色指定 */
#bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksMenu) {
  fill: olive !important; /* オリーブ色 */
}
#bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksToolbar) {
  fill: olive !important; /* オリーブ色 */
}
#bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_UnfiledBookmarks) {
  fill: olive !important; /* オリーブ色 */
}

もし好みの色に変えたい場合は、「/* オリーブ色 */」などと書いている部分のfill:の後ろの「olive」を色名または色番号に変更すればOKです。

なおこれとは別でアイコンを「chrome://」や「resource://」などのURL指定で変更している場合に、色指定をしても効かないケースがあるようです。そんなときは、about:configなどで「svg.context-properties.content.enabled」をtrueに変更すると指定が反映されるようになります。

-moz-context-properties – CSS | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/-moz-context-properties

Note: This feature is available since Firefox 55, but is only currently supported with SVG images loaded via chrome:// or resource:// URLs. To experiment with the feature in SVG on the Web it is necessary to set the svg.context-properties.content.enabled pref to true.

Firefox57のブックマークを元の色に戻す

Firefox57で、ブックマークのフォルダの色がグレーに変更になりました。 これを元の色に戻す方法をまとめます。 例によって「userChrome.css」を編集することで戻すことができます。 userChrome.cssの編集方法につい...

00.bulog.jp

2017.10.01