userChrome.css・userContent.cssスレ Part7

**名無しさん＠お腹いっぱい。** · 2017/11/11(土) 18:54:58.08

●前スレ
userChrome.css・userContent.cssスレ Part6
http://egg.2ch.net/test/read.cgi/software/1438959541/

●拡張機能
Stylish
https://addons.mozilla.org/ja/firefox/addon/stylish/
User Style Manager
https://addons.mozilla.org/ja/firefox/addon/user-style-manager/

●スクリプト
userChromeJS/UserCSSLoader at master ｷ Griever/userChromeJS
https://github.com/Griever/userChromeJS/tree/master/UserCSSLoader

●CSS（ユーザースタイルを記入するべきファイル）
userChrome.css（UI） / userContent.css（Web Site）

●関連サイト
userstyles.org
http://userstyles.org/

MDN - CSS
https://developer.mozilla.org/ja/docs/Web/CSS

とほほのスタイルシート入門
http://www.tohoho-web.com/css/

**名無しさん＠お腹いっぱい。** · 2017/12/12(火) 15:11:30.31

タブの左にわざわざドラッグ領域確保されてるんだからそこ掴めばいいじゃない

**名無しさん＠お腹いっぱい。** · 2017/12/12(火) 15:23:28.12

>>951
検索語句がサイトにばれるよ

**名無しさん＠お腹いっぱい。** · 2017/12/12(火) 15:25:42.66

>>949
そうですね
2008年のものなのでみなさんご存知かも知れませんが
アイコン化の方をアイコン変更して利用してました
メニューバーを寄せ集める
http://d.hatena.ne.jp/Griever/20081215/1229353082

**名無しさん＠お腹いっぱい。** · 2017/12/12(火) 15:51:27.31

userChrome.jsは確かに便利だけどスレの住み分けをしてほしい

**名無しさん＠お腹いっぱい。** · 2017/12/12(火) 15:57:02.87

>>954
これ入れてみたのですが、ロケーションバーの左側ではなく、タブバーの左側に移動させる事はcssではできませんか？

**名無しさん＠お腹いっぱい。** · 2017/12/12(火) 16:55:38.17

不満だらけだった57もだいぶいい感じになってきた

**名無しさん＠お腹いっぱい。** · 2017/12/12(火) 16:58:50.34

ワロタ

**名無しさん＠お腹いっぱい。** · 2017/12/12(火) 17:05:40.80

>>956
これでならタブバーの左にカスタマイズで移動できる
https://github.com/skofkyo/userChromeJS/blob/master/userButton/00-FirefoxBtnMod.uc.js

すみわけしなくてごめん
今回だけ

**名無しさん＠お腹いっぱい。** · 2017/12/12(火) 17:25:16.78

>>951

お気遣いありがとうです <(＿＿)>

以前はアドオンの「FindBar Tweak」を入れてたのですが使えなくなったので
これを機に一念発起してココも見ながら "userChrome.css" の勉強してる最中です
現状は全くの素人ながら少しでも "userChrome.css" の設定になれたらと思い頑張りたいです。

まだまだペーペーですがここのベテランの方にも色々と教えていただきたく
ヨロシクお願いします。

**名無しさん＠お腹いっぱい。** · 2017/12/12(火) 17:26:20.70

>>956
ツールバーで良いなら
document.getElementById("menubar-items").setAttribute("removable", "true");
var box = document.getElementById("nav-bar-customization-target");
box.appendChild(document.getElementById("menubar-items"));

var box = document.getElementById("nav-bar-customization-target");
box.insertBefore(document.getElementById("menubar-items"),box.childNodes[0]);

**名無しさん＠お腹いっぱい。** · 2017/12/12(火) 17:34:40.34

>>959
ありがとうございます
思い通りになりました！

>>961
わざわざありがとうございます。
ですが、ウィンドの一番左上、タブバーの左側に表示したかったので、>>959さんのを使わせていただきます
中国語が気になるので、できたらMedleyMenuでやってみたかったのですが
やはりタブバーの左上は出来ないんでしょうかね

**名無しさん＠お腹いっぱい。** · 2017/12/12(火) 17:50:57.08

>>962
中国語は翻訳サイトで翻訳して日本語に記述しなおせばいいですよ
アイコンも16×16のを準備し64行目 data:image 以降　SuQmCC までの部分を書き換えれば変更できます
アイコンを文字列に変換するサイトがあります
https://hamayapp.appspot.com/static/data_uri_conv.html

アイコンはこんなサイトからもらって来るとか
http://www.iconarchive.com/show/oxygen-icons-by-oxygen-icons.org.html
アイコン抽出ソフトでFirefox.exeなどから取り出せたりできます
http://www.towofu.net/soft/aicon.php

**名無しさん＠お腹いっぱい。** · 2017/12/12(火) 17:53:51.03

>>962
ごめん
142行目も同じく変更でした

**名無しさん＠お腹いっぱい。** · 2017/12/12(火) 18:05:12.35

>>963
64行目のアイコンってなんですかね？
SuQmCCまでと書いてありましたが、エディタで検索しても引っかからないので、後回しにして142行目だけアイコンを変更したのですが
一応目に付くアイコンは自分の想像通りのものなのですが、64行目のアイコンだけなんなのか分からなくて
地球のアイコンではないですよね？

**名無しさん＠お腹いっぱい。** · 2017/12/12(火) 18:24:36.58

>>965
またごめん
勘違いしてた
自分64行目も142行目と同じだと思いこんでぱっぱと変更してしまってたんだよね
64行目のはなんなのかわからなかったです
とりあえず良しとしましょうか(´･ω･｀)

**名無しさん＠お腹いっぱい。** · 2017/12/12(火) 18:38:18.67

>>965
64行目と142行目の違い分かりました
同じデフォの四角オレンジFirefoxアイコンなんですが
64行目のは16×16
142行目のは32×32のアイコンでした
32×32のアイコンがどこで使われているのかはまだ不明です

こちらのData URI Scheme逆変換できるサイトで確認できます
http://jsdo.it/blades/datauriplayground

**名無しさん＠お腹いっぱい。** · 2017/12/12(火) 18:48:56.49

お前らいい加減他スレでやり取りしてくれ
度が過ぎるぞ
ここはuserChrome.css・userContent.cssスレ

**名無しさん＠お腹いっぱい。** · 2017/12/12(火) 18:55:28.25

すみませんでした
もうここでjsのことはやりません

**名無しさん＠お腹いっぱい。** · 2017/12/12(火) 19:26:48.72

>>968
すみませんでした

>>969
長々とスレチでお付き合いさせてしまってどうもすみませんでした
そしていろいろありがとうございました

**名無しさん＠お腹いっぱい。** · 2017/12/12(火) 19:34:19.51

　まっそう気にするなって…
.　　　　　　∧__∧
　　　　　　( ´･ω･)∧∧l||l >>969-970
　　　　　　/⌒ ,つ⌒ヽ )
　　　　　(___　 (　　　_)
"''"" "'ﾞ''` 'ﾞﾞﾟ'　'''　''　'''　ﾟ`

**名無しさん＠お腹いっぱい。** · 2017/12/12(火) 19:59:30.65

なんと気持ちの良い連中だろう

**名無しさん＠お腹いっぱい。** · 2017/12/12(火) 20:24:07.30

ここは平和だなぁ(召喚詠唱)

**名無しさん＠お腹いっぱい。** · 2017/12/12(火) 22:06:24.57

いい奴らだな。

**名無しさん＠お腹いっぱい。** · 2017/12/12(火) 22:17:28.72

ブックマークのフォルダに色付けなんてのはありますか？

**名無しさん＠お腹いっぱい。** · 2017/12/12(火) 22:45:01.09

>>975
ある

**名無しさん＠お腹いっぱい。** · 2017/12/13(水) 08:59:30.26

読み込み中のアニメーションを変更したくて
手始めにsvgを外部に移動しようと次のようにしましたが
色が黒になってしまいます
元のように色が変わるようにはできないんでしょうか

browser.cssの記述から元のファイル(chrome://browser/skin/tabbrowser/loading.svg)を見つけて
プロファイルフォルダ内chrome/img/に保存
userChrome.cssに下記のみを記述
:root[sessionrestored] .tab-throbber[busy]::before {
background-image: url("./img/loading.svg") !important;
}

**名無しさん＠お腹いっぱい。** · 2017/12/13(水) 09:24:25.07

どうしたいのかわからないが
:root[sessionrestored] .tab-throbber[busy]::before {　fill:　red !important;}
　もしくは
:root[sessionrestored] .tab-throbber[busy]::before {
background-image: url("chrome://browser/skin/tabbrowser/loading.svg") !important;
fill:　red !important;
}
じゃないか

**名無しさん＠お腹いっぱい。** · 2017/12/13(水) 10:05:45.30

>>977
>>329参考

**名無しさん＠お腹いっぱい。** · 2017/12/13(水) 10:15:27.00

chrome://browser/skin/tabbrowser/loading.svgを使いたいわけではなく
svgファイルは自分で用意するつもりですが
テストのために同じソースのものを外部に保存して使用しました

デフォルトではタブがアクティブかどうかで色が変わりますよね
ですが外部ファイルを指定すると黒で描画されてしまうのです
:root[sessionrestored] .tab-throbber[busy]::before {
background-image: url("./img/loading.svg") !important;
fill: red !important;
}
これでも黒でした
svg自体に色指定せずに済むならその方法があればと思ったのですが

**名無しさん＠お腹いっぱい。** · 2017/12/13(水) 10:30:30.92

じゃあ最初からはっきりそう書けよ
不毛なレスさせるな

**名無しさん＠お腹いっぱい。** · 2017/12/13(水) 10:38:02.14

フルスクリーン表示ではサイトのコンテンツが画面いっぱいに広がり
マウスで移動で上辺にヌルヌルとツールバーがプルダウンする

これをアプリケーションウィンドウのままでも実現する
トグルキー操作とアイコンクリック仕掛けは、まだ、なのかな?

**名無しさん＠お腹いっぱい。** · 2017/12/13(水) 10:38:54.07

>>980
自分も前に同じとこで詰まった
svg.context-properties.content.enabledをtrueにすれば大丈夫
詳しくはここのNote参照
-moz-context-properties - CSS | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/-moz-context-properties

**名無しさん＠お腹いっぱい。** · 2017/12/13(水) 11:04:55.22

>>983
解決しました。ありがとうございます
デフォルトだと制限がかけられてるんですね

他の方もレスサンクスでした

**名無しさん＠お腹いっぱい。** · 2017/12/13(水) 11:22:24.55

#searchbar .autocomplete-history-dropmarker {
display: -moz-box !important;
-moz-binding: url("chrome://global/content/bindings/autocomplete.xml#history-dropmarker");
}
ダークテーマだと矢印ほとんど見えなくなるね

**名無しさん＠お腹いっぱい。** · 2017/12/13(水) 12:02:10.86

だね

**名無しさん＠お腹いっぱい。** · 2017/12/13(水) 12:30:56.78

ダーク好きな人は見えにくくても気にしない

**名無しさん＠お腹いっぱい。** · 2017/12/13(水) 12:33:13.03

だよね

**名無しさん＠お腹いっぱい。** · 2017/12/13(水) 16:08:38.50

そして何も見えなくなった

**名無しさん＠お腹いっぱい。** · 2017/12/13(水) 20:58:57.88

>>984
設定変えても良いだろうけどCSSでfillが効かないやつに
-moz-context-properties: fill !important;
追加しても駄目？

**名無しさん＠お腹いっぱい。** · 2017/12/13(水) 22:16:20.67

>>990
ダメですね

**名無しさん＠お腹いっぱい。** · 2017/12/13(水) 22:48:16.99

/* タブコンテキストメニューから各種不要要素を消す　*/
#context_reloadTab,
#context_toggleMuteTab,
#context_tabViewMenu,
#context_openTabInWindow,
#context_reloadAllTabs,
#context_closeTabsToTheEnd,
#context_closeOtherTabs,
#context_undoCloseTab,
#context_closeTab{
display: none !important;
}

既出かもしれませんがUPさせていただきます。
ピン止め以外は殆ど利用しない項目が多いので思い切って処理。
おかげでスッキリさすことができました <(＿＿)>

**名無しさん＠お腹いっぱい。** · 2017/12/13(水) 22:50:00.75

>>928のテンプレで次スレ立てます

**名無しさん＠お腹いっぱい。** · 2017/12/13(水) 22:59:35.41

userChrome.js依存のものはいらんのではないか

**993** · 2017/12/13(水) 23:06:32.12

すみません立てれませんでした

**名無しさん＠お腹いっぱい。** · 2017/12/14(木) 00:24:59.97

スレも終わりに近づいていますけれども

ハンバーガーボタンを本物に置き換えているのですが
ボタンの幅が大きくなっていまして狭くできたらと思うのですが
可能でしょうか？
スクリーンショットです
https://i.imgur.com/j6DwWNh.png

cssです
/* ハンバーガーボタンを本物に */
#PanelUI-menu-button > .toolbarbutton-badge-stack{
list-style-image:none;
}
#PanelUI-menu-button > .toolbarbutton-badge-stack:before{
content:"\1F354";
font-size:19px;
line-height:12px;
}

**名無しさん＠お腹いっぱい。** · 2017/12/14(木) 00:29:58.81

建てました
userChrome.css・userContent.cssスレ Part8
http://egg.5ch.net/test/read.cgi/software/1513178964/l20

**名無しさん＠お腹いっぱい。** · 2017/12/14(木) 00:51:52.62

>>996
#PanelUI-menu-button > .toolbarbutton-badge-stack > .toolbarbutton-icon { display: none !important;}

**名無しさん＠お腹いっぱい。** · 2017/12/14(木) 00:53:24.99

＞ハンバーガーボタンを本物に置き換えているのですが

唐突すぎてﾜﾗﾀ

**名無しさん＠お腹いっぱい。** · 2017/12/14(木) 01:02:21.51

>>998
ありがとうございます
幅が狭くなりました(*´ー｀*)
1000ゲットです

**1001** · Over 1000

このスレッドは１０００を超えました。
新しいスレッドを立ててください。
life time: 32日 6時間 7分 23秒

**1002** · Over 1000

5ちゃんねるの運営はプレミアム会員の皆さまに支えられています。
運営にご協力お願いいたします。

───────────────────
《プレミアム会員の主な特典》
★ 5ちゃんねる専用ブラウザからの広告除去
★ 5ちゃんねるの過去ログを取得
★ 書き込み規制の緩和
───────────────────

会員登録には個人情報は一切必要ありません。
月300円から匿名でご購入いただけます。

▼ プレミアム会員登録はこちら ▼
https://premium.5ch.net/

▼ 浪人ログインはこちら ▼
https://login.5ch.net/login.php