Firefox57でタブ幅を縮めるuserChrome2017年12月04日 02:01
自分はブラウザでタブを大量に開いている(先日1000を超えていた)。そのためタブ幅はファビコンが見える限界まで縮めたい。
昔はabout:configでタブの最小幅を設定できたのだがいつからかできなくなり、何らかのアドオンで縮めたり、南っぽい名前の頃にはタブの形が丸みを帯びて無駄なスペースができて気に食わなかったのでClassicThemeRestorerを使ってタブを四角くした。
Firefox56での表示はこんな感じだ。
しかしそのClassicThemeRestorerがQuamtum(57)になって使えなくなった。
これはもうFirefoxを捨ててChromeに乗り換えるときかと真剣に悩み、せめてuserChrome.cssで多少なりとも使いやすくできないか…と色々いじっていたところ、なんかむしろ以前より使いやすいものができてしまった。
それがこれだ。とても美しい(※感じ方には個人差があります)。
以前との違いとしては、
・以前はタブの表示が破綻しない最小幅は36pxほどだったのが、もっと狭めても大丈夫に。
・以前はスピーカーマークが出るとタブ幅が広がって隣と重なってしまっていたのが、広がらなくなった。
・以前は幅を狭めるとタイトルは表示できなかったのだが、表示できるようになった。
特にタイトルが重要だ。色々と限界まで切り詰めた結果、タブ幅30pxで全角1.5文字ほど表示できている。このわずかな文字数でもタブの内容を判断するのに大いに役立つ。
ピン留めしたタブの表示が崩れるなど、もうちょっといじりたいところも無いではないが、とりあえず十分使い物になるものができたと思うので、公開する。
誰かの役に立てば幸いだ。
昔はabout:configでタブの最小幅を設定できたのだがいつからかできなくなり、何らかのアドオンで縮めたり、南っぽい名前の頃にはタブの形が丸みを帯びて無駄なスペースができて気に食わなかったのでClassicThemeRestorerを使ってタブを四角くした。
Firefox56での表示はこんな感じだ。
しかしそのClassicThemeRestorerがQuamtum(57)になって使えなくなった。
これはもうFirefoxを捨ててChromeに乗り換えるときかと真剣に悩み、せめてuserChrome.cssで多少なりとも使いやすくできないか…と色々いじっていたところ、なんかむしろ以前より使いやすいものができてしまった。
それがこれだ。とても美しい(※感じ方には個人差があります)。
以前との違いとしては、
・以前はタブの表示が破綻しない最小幅は36pxほどだったのが、もっと狭めても大丈夫に。
・以前はスピーカーマークが出るとタブ幅が広がって隣と重なってしまっていたのが、広がらなくなった。
・以前は幅を狭めるとタイトルは表示できなかったのだが、表示できるようになった。
特にタイトルが重要だ。色々と限界まで切り詰めた結果、タブ幅30pxで全角1.5文字ほど表示できている。このわずかな文字数でもタブの内容を判断するのに大いに役立つ。
ピン留めしたタブの表示が崩れるなど、もうちょっといじりたいところも無いではないが、とりあえず十分使い物になるものができたと思うので、公開する。
誰かの役に立てば幸いだ。
/* ピン留めされたタブの幅はいじりたくないところだが、パディングをいじった影響でそのままだとアイコン幅-4pxになる */
.tabbrowser-tab /*:not([pinned]) */ {
/* max-width: 250px !important; なぜかmax幅を指定すると3タブまでfoxygestures以外で閉じた時空白になる症状が出たのでやめた */
min-width: 30px !important; /* 本題 */
}
/* タブを閉じるボタンを消す。場所もないし元々要らなかったので。昔はabout:configで消せたのだが今はuserChrome必須。 */
.tab-close-button{
display: none;
}
.tab-content{
/* タブ左端とファビコンの隙間をゼロに */
padding-left: 0px !important;
margin-left: 0px !important;
/* タブ右端まで文字が表示されるように */
padding-right: 0px !important;
}
/* ファビコンの右端に少し文字が掛かるくらいにしてスペースを節約 */
.tab-icon-image, .tab-throbber{
margin-right: -4px !important;
}
/* タブの右端で文字が薄くなるのをキャンセル */
.tab-label-container{
mask-image: none !important;
}
.tab-text{
/* 文字の頭のスペースを無くす */
margin-left: 0px !important;
/* 文字間も詰めて少しでもスペースを節約 */
letter-spacing: -1px !important;
/* Windows10ではデフォルトで游ゴシックになるのが嫌いなのでメイリオに */
font-family: 'メイリオ' !important;
/* ファビコンに文字が掛かるとそのままだと見にくいので背景色で縁取りする。
色は標準テーマの「Light」のものに合わせた。現在のタブとhoverしたタブは色が違うがあんまり気にならなかったのでそのまま。 */
text-shadow: 1px 1px 0px rgba(227,228,230,0.5), -1px 1px 0px rgba(227,228,230,0.5), 1px -1px 0px rgba(227,228,230,0.5), -1px -1px 0px rgba(227,228,230,0.5) !important;
}
.tabbrowser-tab /*:not([pinned]) */ {
/* max-width: 250px !important; なぜかmax幅を指定すると3タブまでfoxygestures以外で閉じた時空白になる症状が出たのでやめた */
min-width: 30px !important; /* 本題 */
}
/* タブを閉じるボタンを消す。場所もないし元々要らなかったので。昔はabout:configで消せたのだが今はuserChrome必須。 */
.tab-close-button{
display: none;
}
.tab-content{
/* タブ左端とファビコンの隙間をゼロに */
padding-left: 0px !important;
margin-left: 0px !important;
/* タブ右端まで文字が表示されるように */
padding-right: 0px !important;
}
/* ファビコンの右端に少し文字が掛かるくらいにしてスペースを節約 */
.tab-icon-image, .tab-throbber{
margin-right: -4px !important;
}
/* タブの右端で文字が薄くなるのをキャンセル */
.tab-label-container{
mask-image: none !important;
}
.tab-text{
/* 文字の頭のスペースを無くす */
margin-left: 0px !important;
/* 文字間も詰めて少しでもスペースを節約 */
letter-spacing: -1px !important;
/* Windows10ではデフォルトで游ゴシックになるのが嫌いなのでメイリオに */
font-family: 'メイリオ' !important;
/* ファビコンに文字が掛かるとそのままだと見にくいので背景色で縁取りする。
色は標準テーマの「Light」のものに合わせた。現在のタブとhoverしたタブは色が違うがあんまり気にならなかったのでそのまま。 */
text-shadow: 1px 1px 0px rgba(227,228,230,0.5), -1px 1px 0px rgba(227,228,230,0.5), 1px -1px 0px rgba(227,228,230,0.5), -1px -1px 0px rgba(227,228,230,0.5) !important;
}
Post time : 2017年12月04日 02:01│Comments(0)
│ソフトウェア
