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^)/
コメント