2022年6月20日月曜日

Firefox Quantumの設定 [更新 2022年06月26日]

更新履歴
2020/11/26 フォントの設定を追記
2022/06/20 見にくいので整理、機能していない部分を削除
2022/06/20 ブックマークフォルダの色を変えるを追加
2022/06/21 タブバー端の余白を消すを追加
2022/06/26 フォントを変更


フォントの設定

Notoフォントに付いてはここに書いてある
https://upgrade-windows10.blogspot.com/2018/12/noto.html

2022/06/26

* フォントの設定の「ウェブページが指定したフォントを優先する」を外したらGoogleサイトではメニューが日本語と英語が二重になって表示されたので再度チェックを入れた。


再起動ボタン(では無いが)の追加

以前のFirefoxには再起動ボタンを追加するアドオンがあったのですが、Firefox Quantumでは使えません。
検索してみるとuserChrome.jsを使って再起動ボタンを追加する方法や、アドレスバーに「about:restartrequired」と入力する方法がありましたが、userChrome.jsはうまく行かなかったの後者にしました。
毎回入力するのは面倒なので、適当なページをブックマークに追加し、
名前:再起動
url:about:restartrequired
に変更しました。
これをブックマークツールバーの先頭に移動して出来上がりです。


ブックマークツールバー右端にある「他のブックマーク」を非表示にする

1. アドレスバーに「about:config」と入力してリターン。
2. 検索の項目に「browser.toolbars.bookmarks.2h2020」を入力してリターン。
3. 値を「false」にする


ポップアップをウィンドウではなくタブで開く

1. アドレスバーに「about:config」と入力してリターン。
2. 検索の項目に「browser.link.open_newwindow」と入力。
3. 値を「3」にする。
* 元々3でした。
4. 検索の項目に「browser.link.open_newwindow.restriction」と入力。
5. 値を「0」にする。


FirefoxのPocketボタンを無効にする

1. アドレスバーに「about:config」と入力し、Enterキーを押す。
2. 検索の項目に「pocket」と入力。
3. 「extensions.pocket.enabled」の値を「false」にする。


about:configで出来るTABの設定

ブックマークを新しいタブで開く
「browser.tabs.loadBookmarksInTabs」を「true」に

アドレスバーからのページを新しいタブで開く
「browser.urlbar.openintab」を「true」に

検索バーからのページを新しいタブで開く
「browser.search.openintab」を「true」に

リンクを新規タブで開く際は右端で開く
「browser.tabs.insertRelatedAfterCurrent」を「false」に

最後のタブを閉じてもウインドウを閉じない
「browser.tabs.closeWindowWithLastTab」を「false」に


userChrome.css関係

事前準備
Firefox69+からデフォルトでは"userChrome.css"が使用出来なくなっているので使えるようにする。
1. アドレスバーに「about:config」と入力してリターン。
2. 検索の項目に「toolkit.legacyUserProfileCustomizations.stylesheets」と入力。
3. 値を「true」にする。

userChrome.cssに下のリンクに書かれている内容を(必要に応じて修正し)書き込む 。
https://www.bugbugnow.net/2017/12/firefox-quantum-57.html

* userChrome.cssの場所:C:\Users\{ユーザー名}\AppData\Roaming\Mozilla\Firefox\Profiles\{プロファイル名}\chrome
注1. /*で始まる行が有効になります。
注2. Firefox 81は内容が違うため、思ったとおりにはなりません。

上で作ったファイルと以降を分離し、下をmisc.cssとした。
@importは先頭と最後に必要。

----- userChrome.css -----
@import url("./misc.css");
.....
.....
@import url("./misc.css");


----- misc.css -----

アクティブなタブの色を変える

/* 選択中のタブの色 */
#tabbrowser-tabs .tabbrowser-tab[selected] .tab-content {
/* background: linear-gradient(to bottom,#808080,#808080) !important; } */
background-color: #808080 !important; }

/* マウスオーバー時のタブの色
#tabbrowser-tabs .tabbrowser-tab:hover:not([selected]) .tab-content {
/* background: linear-gradient(to bottom,#2F4F4F,#2F4F4F) !important; } */
background-color: #2F4F4F !important; }



サイドバーの行間を狭くする

treechildren.sidebar-placesTreechildren::-moz-tree-row{
margin-top:-3px !important;
margin-bottom:-4px !important;
}
treechildren.sidebar-placesTreechildren::-moz-tree-row(hover){
margin-top:0px !important;
margin-bottom:0px !important;
}
treechildren.sidebar-placesTreechildren::-moz-tree-row(selected){
margin-top:0px !important;
margin-bottom:0px !important;
}



サイドバーにブックマークを表示した時に検索ボックスを表示しない

#sidebar-search-container {
    visibility: collapse!important;
}



検索バーを上に移動する(CTRL+Fで出てくる検索バーを上に持ってくる)

.browserContainer > findbar {
-moz-box-ordinal-group: 0;
left: 1em;
border: 1px solid threedshadow !important;

/* Hide the "border" at the top by removing the box-shadow and background-image */
border-top: none !important;
box-shadow: none !important;
background-image: none !important;

/* Uncomment to add a transition from the top */
transition: 400ms !important;
z-index: 0 !important;
}

/* width and font */
.findbar-textbox {
width:auto !important;
font-size:14px !important;
/* font-family : "源ノ角ゴシック Code JP" ; */
font-family : "Noto Sans CJK JP" ;
}

.findbar-closebutton {
margin-inline-start: 0.5em !important;
vertical-align: middle !important;
margin-bottom: 0.25em !important;
height: inherit !important;
}



タブバーをブックマークツールバーの下に移動させる

#titlebar { -moz-box-ordinal-group: 3; }



Firefoxのタブ等の高さを変える(狭くする)

/* -------- Firefox 57+(Quantum)のタブの幅と高さを変える設定 --------*/
/* http://www.insidespeech.com/post-223/ */

.tabbrowser-tab:not([pinned]) {
min-height: 25px !important;
max-height: 20px !important;
}
.tabbrowser-tabs .tabbrowser-tab {
vertical-align: top !important;
-moz-box-sizing: border-box !important;
min-height: 25px !important;
max-height: 25px !important;
width:50px !important;
min-width:50px !important;
}

/*アドオンのボタンなど右側にあるボタン類の余白を消す*/
toolbar .toolbarbutton-1 > .toolbarbutton-badge-stack {
  padding: 0px !important;
  margin:0px 2px !important;
}


標準の機能を使ってツールバー等を細く出来る (11月20日追記)

元の状態

右上のハンバーガーマーク(横三本線)を右クリックし、「カスタマイズ」を選択


カスタマイズ画面の下の「UI密度」を「コンパクト」にする


バーが少し細くなった



ブックマークフォルダの色を変える

folder.png(名前は任意)はchromeフォルダに入れる
アイコンの入手先:https://jp.crazypng.com/570.html
アイコンは18x18にリサイズ
treechildren::-moz-tree-image(title, container),
treechildren::-moz-tree-image(title, open) {
    list-style-image: url("folder.png")!important;
    -moz-image-region: rect(0px, 32px, 16px, 16px)!important
}



タブバー端の余白を消す

.titlebar-spacer[type="pre-tabs"],.titlebar-spacer[type="post-tabs"] {
display:none !important;
}



0 コメント: