お品書き
書き直し中…
とりあえず、中へどうぞ
↓↓↓
スポンサーリンク

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^)/

コメント