userChrome.css・userContent.cssスレ Part6©2ch.net

●前スレ
userChrome.css・userContent.cssスレ Part4 (実質 Part5)
http://anago.2ch.net/test/read.cgi/software/1400202982/

●拡張機能
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 ｷ GitHub
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/

>>453
さっき自分でも気づいたけどそうみたいね・・・
せっかくの機能がつかえねえ

>>452
Stylish入れるべきでは？

そもそもuserChrome.cssは本体の機能だろ

で？

>>451
ttp://zubolla.blog.fc2.com/blog-entry-289.html
こういうこと?

>>458
うーん、ちょっと違うみたい。

>>451 >>459
Hide Caption Titlebar Plusは自分も使ってるから興味あるけど
タイトルバー非表示だけならFirefox標準で出来るしHide Caption Titlebar Plusは多機能だよね

・タイトルバーのタイトル表示方法変更
・メニューバーのメニュー文字を非表示、タイトルバーにフロート表示
・アプリケーションボタンの復刻
・closeボタンのデザインと機能変更
・#navigator-toolboxの色変更
・osによっては変更できないシステムボーダー色（#main-windowの外周）の変更

ぱっと思いつくだけでもこれだけあるけど細々としたのは他にもあるし、具体的に何をやりたいか書くかSS頂戴

>>460
＞タイトルバー非表示だけならFirefox標準で出来る
カスタマイズ画面＞タイトルバーだよね。
ONの状態ではタイトルが表示され、パーソナル設定の色で表示されるけど、
OFFの状態ではタイトルは非表示になるけど、タスクバーのの領域はそのまま残りタブバーと同じ色になるんだけど、
何か設定間違ってるの？

>>460
分かりにくいと思うのでスクリーンキャプチャーをアップしましたので、アドバイス方よろしくです。

Hide Caption Titlebar Plus有効時
http://imgur.com/OtLjQnv

タイトルバーOFFの時（Hide Caption Titlebar Plusは無効）
http://imgur.com/nl3ETXg

タイトルバーONの時（Hide Caption Titlebar Plusは無効）
http://imgur.com/btoBg9X

Hide Caption Titlebar Plusはタイトルバーを非表示にするためだけに利用しており、
出来れば使いたくありません。

俺はタイトルバーをカスタムで消したら閉じるとか最小化とかのアイコンはタブのところまで下がって
表示領域が大きくなるんだがこれ見た感じなってないのな

XP か
まあいいやお前がタスクバー（タイトルバー？）の領域と呼んでるのはタブバー (#TabsToolbar) の margin-top

タイトルバーは指してるものが複数あるから
browser.tabs.drawInTitlebar;true の場合の話な

>>462
タイトルバーOFFにして、CSSでマージン詰めれば良いんじゃない
#TabsToolbar {
margin-top: 0px !important;
}

>>463
Hide Caption Titlebar Plus有効時と同じような画面になってるということですか？
新規プロファイルで試しても同じだった。
うーん、分からん。

>>465
おー、ありがとう、うまくいきました。
Hide Caption Titlebar Plusも削除できます。

俺はCSSなんか使わずにタイトルバー消せてるんだが？と思ってセーフモードで調べてみたが
カスタマイズ→タイトルバー　とやってタイトル消した後に　バー右クリ→メニューバー非表示
でタブバー以外の領域全部消えたぞ

>>468
それはウィンドウのサイズモードがマキシマイズドだからじゃ？

>>469
ああなるほど
元のサイズの時はその領域は画面外に出せるからあんま気にしたことなかった

>>275
userContent.css で消えると思うけど。
勿論、正しく書けばの話だが。。

な、age厨だろ

>>472
お前今の2ch初めてか？力抜けよ。

それは関係ないな

このスレには以前から
他力本願ですぐ質問するような他人を利用することしか考えてないクズage厨が定期的に湧き、
それに対し暴言しかはかない拒絶反応が強いアンチage厨が常駐している

>>473
むしろ「な、age厨だろ」の人に絡んでる君こそ初心者なんじゃないのかな？
悪いことは言わん、スルーしとけ

https://userstyles.org/styles/122214/firefox-search-bar-show-engine-names-firefox-43
これ良いね、Old Search Fixedが不用になった。

ゴメン、ちょっと違う。

>>476
・オートコンプリートを消す
・虫眼鏡を既定の検索エンジンのアイコンにする
・search-go-buttonを復活
これらが必要なわけか…

個人的にはオートコンプリートを消すだけでいいかな
search-go-buttonは、Enterキーかマウスジェスチャでいいや

最小化、最大化、閉じるの各ボタンの間隔をゼロにできませんか？
これらのボタンを非表示にする方法でもＯＫです。

>>479
適当

@-moz-document url("chrome://browser/content/browser.xul"){
#main-window {
-moz-appearance: none !important;
background-color:#63b4fb !important;
}
}

>>480
うーん、変化ありません。

>>481
そんならﾜｶﾗﾝ
基本的にOS依存の部分だと思う
ちなみにwin8.1やwin10ではこれで消える

@-moz-document url(

@-moz-document url("chrome://browser/content/browser.xul") {
#titlebar-buttonbox-container {display: none;}
}

うぜえ

>>484
横だが
それだとオレの環境じゃ消えないな
主がそれで消えさえすれば万事おｋではあるが、、

検索バーの虫眼鏡アイコンを右寄せにしたいのですが
可能でしょうか？

>>484
おー、うまくいった。
ありがとう

>>486
微調整は任せるよ

@-moz-document url("chrome://browser/content/browser.xul"){
.searchbar-textbox .autocomplete-textbox-container{
-moz-box-ordinal-group: 1 !important;
}
.searchbar-textbox .textbox-input-box{
-moz-box-ordinal-group: 2 !important;
}
.searchbar-textbox box{
-moz-box-ordinal-group: 3 !important;
}
.searchbar-textbox .search-go-container{
-moz-box-ordinal-group: 4 !important;
}
}

すまんミスった
@-moz-document url("chrome://browser/content/browser.xul"){
.searchbar-textbox .textbox-input-box{
-moz-box-ordinal-group: 1 !important;
}
.searchbar-textbox box{
-moz-box-ordinal-group: 2 !important;
}
.searchbar-textbox .search-go-container{
-moz-box-ordinal-group: 3 !important;
}
}

>>489
ありがとうございました。
おかげさまで、望んでいたデザインを実現することができました。

http://i.imgur.com/P9tBk0e.png

6日辺りからuserstyles.orgの検索がまともに機能しなくなって困る
ソートでupdated dateを選択しても、一番上が6日更新でその下に8日更新のが来たりする状態だし、
トップページにあるThe Newestに出てるやつが、More themesをクリックしてもソートでcreated dateを選択しても出てこず、
最新が6日のまま

>>491
http://www.ghacks.net/2016/10/09/stylish-and-userstyles-org-have-a-new-owner
オーナーが変わったとかでごたごたしてるっぽいね
英語でさっぱりわからんけど。
サーバの移管でもしてるのかしらん。
ここ数日、ここに登録してるCSSの更新とかしてたんだけど、今日、
一つのスタイルが消滅して、一つのスタイルがちょっと前の版にロールバックしてて青ざめました。

サイトはいいけど Stylish に余計なことしないのを祈るばかり

<div class="AAA">
<div class="AAA">
<div class="AAA">
<div class="AAA">
<div class="AAA">
<div class="AAA">

みたいに同じ名前のものがならんでるときに上から三つ目だけを{display: none !important;}
どうすればいいの？ 👀
Rock54: Caution(BBR-MD5:0be15ced7fbdb9fdb4d0ce1929c1b82f)

:nth-of-type(n)

nth 系はある class の中の三番目みたいなのには使えんから注意が必要やね
構造次第では同じ結果になるけど

まさにclassの中にあるclassでダメでした

nth-of-type や nth-child はそもそも class の順番とは関係ないので上の場合でも使えないよ

500 Internal Server Error

>>491の件、今見たら直ってた
オーナーがどうとかの話、一段落したんだったらいいけど

<div class="A">
├<div class="AAA">
├└<div class="B">
├<div class="AAA">
├└<div class="B">
├<div class="AAA">
├└<div class="B">

こんな感じです
やっぱCSSだと不可能でしょうか

どれを消したいんだ
「上から三つ目」が2つ目のAAAを指してるならdiv.A > div:nth-of-type(2)で消えるけど

そもそも例を示すならなんで閉じタグを書かないんだよ

http://i.imgur.com/etVI7g5.png

3つ目の<div class="AAA">をごっそり消すこと可能でしょうか
（AAA内のB.C.D.Eすべｂﾄ）

コメントが枝になってる上に場所統一されてないし閉じタグが何を閉じてるのか不明でﾜﾛﾀ
いいからA直下の子要素の3番目を消せよ

>>505
あなたはそんな罫線文字で遊んでる暇があったらHTMLのお勉強をしなさい
DOMもCSSもそれからです

>>505
折角画像を貼ってるんだから消したい部分に色を付けるとかすればいいのに

すいません
出直してきます

その構造だけでいうならこう
場合によって !important が必要

.A > :nth-child(3) {
display: none;
}

ブックマークツールバー上にあるアイテムの内
フォルダをクリックしたときにポップアップする領域（フォルダの中身）
にのみ幅を指定したいのですが今使っている記述ですと
#PersonalToolbar .bookmark-item {
min-width: 10px !important;max-width: 200px !important;}
ブックマークツールバーのアイテムすべてに適用されてしまいます

#PersonalToolbar .bookmark-item ＞XXXXX {、、、、、}のように
指定するのかなと考えましたがXXXXXの部分がわかりません
ブックマークツールバー上のフォルダからポップアップする領域を
指定するにはどう記述したらよいでしょうか？

.bookmark-item に :not(toolbarbutton) でいんじゃね

>511
.bookmark-item > menupopup かな

>>512、>>513さん　ありがとうございます
#PersonalToolbar .bookmark-item >menupopup {・・・ で指定できました！

迷惑ながらもう少しお聞きしたいのですが、
#PersonalToolbar .bookmark-item {max-width: 80px !important;｝
#PersonalToolbar .bookmark-item >menupopup {max-width: 200px !important;｝
上の二つの記述が共存できる>menupopupに影響が出ないような記述はないでしょうか？
例えば:only(toolbarbutton)のような・・・
可能ならばブックマークツールバー上のtoolbarbutton要素の幅を別に指定したいのです

またidには「＃」　classには「 .　」 を付けるとなんとなく理解しているのですが
>　はどんな用いり方をするのでしょうか　ご教示頂きたいです　

>>514
#PersonalToolbar toolbarbutton.bookmark-item {max-width: 80px !important;}
#PersonalToolbar toolbarbutton.bookmark-item .bookmark-item {max-width: 200px !important;}

> は「子セレクタ」

ID:11Y/c7ZH0 さんはまず「用いり方」というおかしな言い回し？だったり、2chでの引用の方法を覚えたり、した方がいい

オマエモナー

サイトの続きを読むなどの折り畳み展開のボタンを一括で展開できる方法ありませんでしょうか？

ライブドアニュースとヤフーニュースのはあるよ
省略記事から記事全文にリダイレクト でぐぐるとでてくる
cssじゃなくてスクリプトだけど

そんなようなものです
ググってもなかなか出てこないですね
よく見るサイトが20以上押すところがあって大変だったもので
http://fjiblog.cocolog-nifty.com/blog/2012/05/web-0bf7.html
ここのサイトではjavascript、style、htmlでのやり方が載ってるようなのですがcssからなど可能なんでしょうか？

そんなのサイトによるよ
googleの折り畳みメニューやyoutubeの説明文なんかはcssだけで事足りるけど
無理なところは無理だし

マルチか

入力エリアへマウスオーバーしたとき、クリックせずにフォーカスできませんか？
cssで不可ならスクリプトでもOKです。

スレチ

userContent.cssが効かなくなったって人って居る？
別プロファイルの方は効いてるのが不思議に思って色々試してみたら、NoScript入れると効くのはわかったんだけどこれ何故なんだろう･･･

マルチプロセスだと効かないよ

http://b.hatena.ne.jp/Rockridge/20161104#bookmark-306774748
Firefox 51では、インストールされている拡張機能がマルチプロセス非互換
（MPC=False）であるか、または除外リストに掲載されているのでない限り、
マルチプロセス機能（e10s）が有効化される予定。

http://arewee10syet.com/#5

たぶんNoScript入れるとマルチプロセスじゃなくなるから効くんじゃない？

俺developer editionしか入れてないから、50でそうなってるか分からないし
全然違ったらすまん

そうなのか･･･
トラブルシューティング見てみたら確かに無効と有効だった
気持ち悪かったのはこれでスッキリ
ホントありがとう

でもこれuserContent.cssが使えなくなるってことか･･･

e10sに幻想抱きすぎ
レスポンス悪くなるだけ
無効 これで十分

bug1046166は現在進行形で動いているみたいだから近いうちに解決するといいなあと思っている
もうbugが報告されてから2年過ぎちゃったのか、当初は優先順位低かったからなあ……

以下のスタイルを適応したらタグの百マークが消えて、ニコニコ大百科へのリンクが無くなってしまいました。
タグの百を表示してニコニコ大百科へのリンクを復活させたいのですが、
どこをどのように編集したら良いでしょうか？

https://userstyles.org/styles/134647/html5

スタイルを削除する。

ニコニコ大百科へのリンクが無くなった以外は気に入っているので、
出来ればスタイルを削除する以外でお願いします

>>533
.NicoDicLink,
をコメントアウトか消す

>>534
ありがとうございます

webフォントは触らずに、それ以外のフォントファミリーを
segoe UI(英数)とメイリオ(日本語)に強制固定するにはどう記述すればいいの？

*|* {
font-family: 'Segoe UI', 'Meiryo';
}

これだとwebフォントが豆腐になっちゃう

@font-faceとunicode-rangeの組み合わせで
何とかなるんじゃないかと思っていろいろやったけどわからん

俺は片っ端から目についたフォントを置換してる

>>538
片っ端から突っ込む手間を省きたくて一括で置換したい

1.英数部はsegoe UI
2.日本語部はメイリオ
3.webフォントで指定されてる "記号部分" はそのままwebサイト指定どおりのまま残す

て感じにしたいので3を除外するにはどう記述すればいいかが知りたいのです

完璧に避けるのは無理じゃないか

中華サイトとかuserstyles.orgでよく見かけるのは
*:not(I):not([class*='icon']) {
font-family: 'ふぉんと' ;
}

これでも、たとえばよくある.faは豆腐になるから指定してやるか
.fa {
font-family: 'FontAwesome' !important;
}

最初から.fa除外しとくか
*:not(I):not([class*='icon']):not(.fa)

俺は@font-faceは一切使ってない

>>540
なかなかむずかしそうですね
参考にさせてもらって格闘してみます

>>540
上段+中段の組み合わせ試してみたところ主要巡回先は問題なさそうです

後は例外的なところ見つけたら>>538氏のアドバイスも加味して
追記でしのいでいく方向で対応できそう
両氏ありがとう

http://b.hatena.ne.jp/Rockridge/20161123#bookmark-309573056
Fx53：マルチプロセス機能（e10s）が有効の際、userContent.cssが働かない問題を修正。

:-moz-any(h1,h2,h3,h4,h5,h6,p,a)::after { content: "でコロン"; }

元ネタがわからん

ニコニコ動画に以下のスタイルを適応したら、タグが説明文にかぶってしまいました
スタイルのURL先の画像のようにタグを動画の上に表示したいのですが、
どこをどのように編集したら良いでしょうか？

http://www.dotup.org/uploda/www.dotup.org1099867.png
https://userstyles.org/styles/134647/html5

概出

>>546
>2016/12/16：タグリストが下にあると不便なので上に移動、コンテンツツリーは要らないので削除
まず更新してみたら？

>>548
更新した状態でこうなります。
再起動やCCleanerでの清掃も試してみましたがダメでした

50.0からかな？タブバーの右端にプルダウンして閉じたタブを戻すと開いてるタブの一覧がが表示されるようになってるけど、
これを非表示に出来ませんか？

ハイ次の患者さんどうぞ

cssでツールバーとか弄ってるんだけど、カスタマイズページ(ボタンなどの配置を弄れるページ)のみ適用除外したいんだけど良い方法ないかな？
「新しいタブ」では適用されるようにしたいのだけれど

>>552
#main-window:not([customizing]) ツールバーとか { … }