2010/09/05

Mac版Firefoxでもブックマークツールバーをfavicon化

ブックマークツールバーボタンに関するCSS

view plainprint?
  1. @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);  
  2.   
  3. /* 下記のa-dを適宜選択して下さい。 全部一度に適用する必要は有りません。*/  
  4. /* inline:表示 none:非表示 */  
  5.   
  6. /* a-1.ブックマークツールバーのボタンアイコン(フォルダ/非フォルダ両方) */  
  7. #bookmarksBarContent toolbarbutton.bookmark-item .toolbarbutton-icon {  
  8.   display : inline !important;   
  9. }  
  10.   
  11. /* a-2.ブックマークツールバーのボタンテキスト(フォルダ/非フォルダ両方) */  
  12. #bookmarksBarContent toolbarbutton.bookmark-item .toolbarbutton-text {  
  13.   display : none !important;  
  14. }  
  15.   
  16. /* b-1.ブックマークツールバーのボタンアイコン(フォルダ) */  
  17. #bookmarksBarContent toolbarbutton.bookmark-item[container="true"] .toolbarbutton-icon {  
  18.   display : inline !important;  
  19. }  
  20.   
  21. /* b-2.ブックマークツールバーのボタンテキスト(フォルダ) */  
  22. #bookmarksBarContent toolbarbutton.bookmark-item[container="true"] .toolbarbutton-text {  
  23.   display : none !important;  
  24. }  
  25.   
  26. /* c-1.ブックマークツールバーのボタンアイコン(非フォルダ) */  
  27. #bookmarksBarContent toolbarbutton.bookmark-item:not([container="true"]) .toolbarbutton-icon {  
  28.   display : inline !important;   
  29. }  
  30.   
  31. /* c-2.ブックマークツールバーのボタンテキスト(非フォルダ) */  
  32. #bookmarksBarContent toolbarbutton.bookmark-item:not([container="true"]) .toolbarbutton-text {  
  33.   display : none !important;  
  34. }  
  35.   
  36. /* d.ブックマークツールバーのボタンアイコン(フォルダ)横の▼ */  
  37. #bookmarksBarContent toolbarbutton.bookmark-item[container="true"] dropmarker {  
  38.   display : none !important;   
  39. }  

上記の中から必要な物を適宜Stylishで適用します。

Mac版Firefoxのブックマークツールバーは、テキストのみでfaviconが表示されません。恐らくこれはSafariの仕様に合わせている物と思います。

Mac版Firefox(デフォルト)

Mac版Safari

しかし、個人的にWindows版では全く逆の、faviconのみでテキストなしに設定していたためできれば統一させたいところです。

Mac版Firefox(変更後)

そこで調べたところ、どうやら(Safariは解りませんが)Firefoxに関しては、データとして存在している物をスタイルで隠しているだけらしいとの事。

もともとWindows版ではブックマークの「名前」欄を空欄にすることでテキストを非表示にしていたのですが、これもスタイルで隠せるとの事。管理画面で解りにくくなるので、名前を入れられるのならその方が良いですね。

各パーツのセレクタ

view plainprint?
  1. /* ツールバーボタン(全体)のセレクタ */  
  2. toolbarbutton  
  3.   
  4. /* ツールバーボタン(アイコン)のセレクタ */  
  5. .toolbarbutton-icon  
  6.   
  7. /* ツールバーボタン(テキスト)のセレクタ */  
  8. .toolbarbutton-text  
  9.   
  10. /* ツールバーボタン(フォルダ)のセレクタ */  
  11. toolbarbutton[container="true"]  
  12.   
  13. /* ツールバーボタン(非フォルダ)のセレクタ */  
  14. toolbarbutton:not([container="true"])  
  15.   
  16. /* ツールバーボタン(フォルダ)横の▼(プルダウン)のセレクタ */  
  17. dropmarker  
  18.   
  19. /* ブックマークツールバーのセレクタ */  
  20. #bookmarksBarContent  
  21.   
  22. /* ブックマークツールバー配下のツールバーボタンのセレクタ */  
  23. .bookmark-item  

単純に全てのツールバーボタンのテキスト部分を非表示にしてしまうと、ブックマークツールバー以外、たとえばグーグルツールバのボタンテキストなども消えてしまいます。

ブックマークツールバー配下のツールバーボタンには全て".bookmark-item"というクラスが適用されているようです。なので、ブックマークツールバーを限定する意図で「このクラスの配下にあるツールバーボタン」を指定する事もできます。

ただし、他のどこかの要素でこのクラスを使っていないとも限らないので(他のアドオンのツールーバ等)、限定する事を目的とするなら、一意性の保証されているIDセレクタを使用すべきかと思われます。

逆に、ブックマークツールバーに限定しない広範囲で適用したい場合は、クラス名のセレクタを使用する方が効果的な場合が有るかもしれません。

と言った理由から、冒頭のCSSは少し回りくどいセレクタになっています。また、参考にした鳥獣保護区さんでは、Mac版でfaviconがデフォルト非表示なのを利用して少ない指定で望む結果を実現していますが、私はWindows版と共用したいので個別に指定しています。

また、Mac版Firefoxでは、フォルダの横にプルダウンの▼が表示されているので、faviconは要らないかと思ったのですが、Windows版ではデフォルトで非表示でした。そのため、MacWin共用のスタイルを、となると、faviconは全表示で▼は消す、という状態に落ち着きました。

冒頭のCSSで言うと個人的には、ボタンアイコン(a-1)を表示、ボタンテキスト(a-2)を非表示、フォルダの▼(d)を非表示で使っています。

ラベル: , , , , 時刻: 0:21:00