Firefox Quantumカスタマイズ『サイドバーの自動開閉』がアドオンを使わずにできた！＼(^o^)／【これは便利】

Firefoxのデザインは全体がCSSでてきているのだそうで

外観を変更する、いわゆるスキンはCSSで記述する

以前はこれは「GlobalChrome.css」というファイルで設定されていたが、57 Quantum以降は「userchrome.css」「userContent.css」に変更になった。

userchrome.css：全体の外観
userContent.css：表示されるページの外観

だそうで。

userchrome.css にスタイルを記述すると、ブラウザの外観を変えることができる。

例えば userContent.css に
*|* { color: blue !important; }
と記述すると、表示されるページの文字がすべて青になる。

userchrome.css の場所は

右上のメニューボタン（）から「ヘルプ」→「トラブルシューティング情報」と進み



「プロファイルフォルダ」の項目のフォルダを開くを押すとフォルダが開く。



そのフォルダ内に「chrome」という名前のフォルダを作り、その中に「userchrome.css」（または「userContent.css」）を作成する。（テキストファイルを作って名前を変更すればOK）

ここに色々記述するとデザインが変更できる

ここに、以下のように記述すると

/* サイドバー自動開閉 */
#sidebar-box{
min-width: 300px !important;
max-width: 300px !important;
margin-left: -295px !important;
transition: margin-left 0s ease .1s !important;
}
#sidebar-box:hover{
margin-left: 0 !important;
transition: margin-left 0s ease .1s !important;
}

サイドバーが左端に縮んで表示される。

※サイドバーが表示されない設定の場合は何も起きません。サイドバーを表示させるにはCtrl+Bで

※ブラウザを再起動すると反映されます

カーソルを左端の枠線に持っていくと、ニュッとサイドバーが出てくる。カーソルをはずすとまた引っ込む。
これは便利＼(^o^)／

必要無いときはブックマーク表示（サイドバー表示）をオフにしておけば出てきませんしね。

開閉の秒数とサイバーのサイズは適宜調整してください(上記青字部分)。

（※margin-leftはこれ以上小さくするとサイバーのサイズ変更トグルになって開閉しなくなってしまいました。）

でもこれ、問題点が一つ・・・タブのドラッグでブックマーク登録ができませんね。
まぁ☆マークから登録すればよいのでいいかぁ・・・

さらに、他のカスタマイズもしてみた。

◆見読み込みのタブを薄い表示に

/* 未読み込みのタブ */
.tabbrowser-tab[pending] {
    opacity: .3;
}

◆現在のタブの背景色変更、文字を太字に

/* 選択中のタブ太字 */
.tabbrowser-tab[selected] {
font-weight:bold;color:blue !important;
height:30px !important;
}
/* 選択中のタブの背景色 */
.tab-background[selected] {
background-color: #bbffee !important;
}

たくさんタブを開いて作業することが多いので、これでカレントタブがどれなのか分かりやすくなってGOOD＼(^o^)／