• ベストアンサー

Firefox タブバーの下の二重線を表示したままタブバーの高さを変えるには

普段使うブラウザをSleipnirからFirefoxに変えたのですが タブとタブバーの高さの変更方法がよくわからず困っています。 最初はuserChrome.cssに下のように書いてみたのですが 添付画像の上半分にあるとおりタブの高さだけが低くなって、 タブバー下の二重線とタブとのあいだに隙間ができてしまいました。 tab { font-size:13px !important; height:15px !important; max-height:15px !important; } そのあとタブバーの幅を変更すればいいと思い下のように追加してみたのですが 今度は添付画像の下半分のとおり、二重線が見えなくなってしまいました。 .tabbrowser-strip{ min-height:18px !important; max-height:18px !important; } 二重線を表示したままタブバーの高さを変更するにはどうしたらいいでしょうか。 よろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • neddoheny
  • ベストアンサー率60% (921/1528)
回答No.3

>Tab Mix Plus やっぱりTab Mix Plusを入れてましたか。 一応、Tab Mix Plus対応の コードを書いてみました。 .tabbrowser-tab, .tabs-alltabs-button, .tabs-newtab-button, .tabs-closebutton, .scrollbutton-up, .scrollbutton-down { font-size:13px !important; max-height:15px !important; } .tabs-container { height: 22px !important; } 上記のコードで、全て差し替えてください。 これでTab Mix Plusでも動作するはずです。(検証済み) タブの多段表示設定でも動作します。

coco-am
質問者

お礼

回答ありがとうございます。 その通り差し替えたところTab Mix Plusを入れたまま 変更することができました! No.1、No.4と合わせて大変お世話になりました。

その他の回答 (3)

  • neddoheny
  • ベストアンサー率60% (921/1528)
回答No.4

勘違いしてるといけないので、補足。 質問者さんが書いたコードはすべて削除して、 .tabbrowser-tab, .tabs-alltabs-button, .tabs-newtab-button, .tabs-closebutton, .scrollbutton-up, .scrollbutton-down { font-size:13px !important; max-height:15px !important; } .tabs-container { height: 22px !important; } だけを記述してください。 ということです。

noname#101087
noname#101087
回答No.2

当方、Tab Mix Plus 使用。 …で、theme の \chrome\chrome.jar\browser\browser.css をじかに書き替えて、つじつまをあわせてます。けっこう、苦労しました。 直なので "important!" をつけてませんが、つければ userChrome.css で使えるかも。 .tabbrowser-tabs { background: transparent url("chrome://browser/skin/tabbrowser/tabbrowser-tabs-bkgnd.png") repeat-x; height: 22px; } の "height" の 22px がタブ高さ。 .tabbrowser-tab { -moz-appearance: none; background: url("chrome://browser/skin/tabbrowser/tab-bkgnd.png") repeat-x; margin: 1px 0px 1px; ..... } の "margin" 3 番目の 1px を書き換えると、問題のギャップ幅を変えられるのでは? たとえば、 .tabbrowser-tab { margin-bottom: *px important!; } …かな?  

coco-am
質問者

お礼

お礼が遅くなりすみません。 なんとか二重線の位置(ギャップ幅というんですね) を変更することができました。 回答ありがとうございました。

  • neddoheny
  • ベストアンサー率60% (921/1528)
回答No.1

とりあえず、 .tabs-container { height: 22px !important; } を記述してみてください。 尚、タブ関係のアドオンを入れると 効果がなくなる可能性もあるので注意。

coco-am
質問者

お礼

回答ありがとうございます。 二重線の位置が変わりました! 高さの調整もしてぴったりにすることができたのですが おっしゃるとおりタブ関係のアドオンがあると反映されないのですね。 Tab Mix Plusが色々便利だと思っていたので残念です…

関連するQ&A