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/

>>126
showFullTitle4Google.user.js
マウスオーバーでフル表示

>>127
常に表示は無理ですか？
改造しようにも記述が分からないです。

>>128
確か作者はテストして負荷が大きい過ぎるからマウスオーバー方式にしたはず

なるほど
情報ありがとうございます。

>>123
固定させたいページを晒してくれないとわからない
ページによってはその機能が備わってるみたいだし

Stylish Developer Toolってショートカットキーないのかな

ページ内検索バーを右上に持ってくる「Findbar on Top Right」のスタイルを使用していましたが、
他のアドオン(ツリー型タブ？)と干渉して表示がグチャグチャになることがあって使いのをやめたいと思ってます。
基本は純正のままでいいいのですが全体を右詰めにしたいです。
更には検索が先頭・末尾に行った時などに表示されるテキストの量に応じてボックスの矢印の位置が変わらないようにボックスを右端に置きたいです。

そうですか^^
いままでお疲れ様でした

開いているタブが多くなっていくとタブ幅を狭くするスタイルを使っているんだけれども
ある一定以下の幅になったら今表示しているタブのbackground-image:を変えるのって
userChrome.cssだけで実現させるのは不可能？

具体的には
#main-window #navigator-toolbox #TabsToolbar #tabbrowser-tabs .tabbrowser-tab[selected="true"]
の状態でタブ幅が100px以下になったらbackground-image:をredにするみたいな

>>133
スレチだけどアドオン使ったら？
https://addons.mozilla.org/ja/firefox/addon/findbar-tweak/

>>136
ありがとうございます
試してみましたら「Findbar on Top Right」と同じく表示が乱れました
どうもこの辺りのスタイルをいじるとがツリー型タブと衝突するようです

>>137
俺ここの使ってるよツリー型タブと干渉したことはない
http://tofukko.blog113.fc2.com/blog-entry-414.html

>>138
これいいですね！
今のところ表示が乱れるようなこともなさそうですし
ありがとうございます

ここを参考にして
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1054243990
ブックマークを非表示にしてみたのですが
ブックマークサイドバー上は非表示にできませんでした
どうすればいいんでしょうか？
http://fsm.vip2ch.com/-/sukima/sukima413121.jpg

>>135はcssでは出来ない、ということでいいのかな？

#tabbrowser-tabs[overflow=

ツールバーを細くするCSSを使っているのですがFx40あたりから、
Firefoxを立ち上げたときにむわっと太くなって、一秒後くらいに細くなる

こんな感じなんですけど手直ししてくれるような神がいらっしゃったらお願いします
https://pastebin.mozilla.org/8853573

>>142
やってみ？

>>143
UserCSSLoaderなら仕様

>>144？

Stylishのタグ機能ってもう復活はしないのかなあ

タグを付けれないと不便すぎるからずっとバージョン1.4.3を使い続けてる
バージョン2.0以降だとパフォーマンスが改善されてるっぽいし、できればアップデートはしたいのだけれど

確かに不便なった

YouTube TOPページの「あなたへのおすすめ」のところだけ非表示にするCSSを教えてください

>>149
適当
#item-section-783551{
display:none;
}

>>150
どうもです
残念ながら数字がランダムに生成されるためそれだと上手くいきません
#item-section-825957 > li:nth-child(1) > div:nth-child(1)　など

>>151
じゃ、こうかな？
ol li:nth-of-type(3){
display:none;
}

すまん、152もダメだな

ol[id*="item-section-"]でいいだろ

おすすめだけ多段になってることを利用して
.item-section .multirow-shelf
とか？

みなさんどうもありがとうございます

.item-section .multirow-shelf {
display: none !important;
}

で、非表示にできました

使用しているアドオンのcssの記述「panel#selectedsearch-popup { border-width: 0px }」を無効にしたいんですが
stylishでどう記述すればいいか教えてください
今までは直接xpiをいじってcssから該当部分の記述を削除してたんですがstylishで無効に出来ればと思い質問しました

#selectedsearch-popup {
border-width: initial !important;
}

>>158
素早いレスありがとうございます
以前のような表示にすることができました

なるほどなあ

ブックマークのプロパティって、横幅はドラッグして広げられるけど、高さは変えられませんよね。
やり方があれば教えて下さい。

>>161
パネルの中の何の高さを設定したいのか不明だけど、例えばツリーならツリーでそこを高さ指定する等で解決するのでは？
余白はmarginやpaddingで調整すれば良いでしょう。

メモ
/*-----------chaika-Favicon-change-----------------*/
*[src*="chrome://chaika/content/icon.png"]:not([busy]),
#urlbar [src*='chrome://chaika/content/'],
.tab-icon-image[src*="chrome://chaika/content/"]:not([busy])
{ display: -moz-box !important;
list-style-image: none !important;
width: 0 !important;
height: 16px !important;
padding-left: 16px !important;
background: url('data:image/png;base64,xxxxxxxxxxx') center no-repeat !important; }

ロケーションバーの項目リストのトップに「-で検索」というのが表示されますが消せますか?
アドオンやスクリプト、スタイルどんな方法でもいいです。

browser.urlbar.unifiedcomplete;false

>>165
ありがとう消せました。

グリモンのアイコンについてるドロップマーカーの幅？を狭めるコード教えてください

>>167
適当（二行目は要らんかも知れんが…）
@-moz-document url(chrome://browser/content/browser.xul) {
#greasemonkey-tbb toolbarbutton,
#greasemonkey-tbb .toolbarbutton-menubutton-dropmarker{
padding:0 !important;
}
}

>>168
ありがとう
適用してみましたがほとんど変わらなかったです
理想はドロップマーカーを消してボタンクリックでメニューが出ればいいんですけどね

>>169
じゃあこうか？
@-moz-document url(chrome://browser/content/browser.xul) {
#greasemonkey-tbb .toolbarbutton-icon,
#greasemonkey-tbb .dropmarker-icon,
#greasemonkey-tbb .toolbarbutton-menubutton-dropmarker{
padding:0 !important;
border:none !important;
}
}

#greasemonkey-tbb > .toolbarbutton-menubutton-dropmarker { display: none !important; }

アイコンクリックでメニュー出したいならこうじゃない？
padding あたりまたちょっと環境差あるかもしれんけど

@-moz-document url(

http://pastebin.com/jATFm8Wr
うお、消えた。またなると面倒だからここで

アイコンマウスオーバーでドロップマーカー出るcss使ってる
Autohide Dropmarkersてやつ

>>174
横からだけど、いいなこれ
�d

>>173
ありがとう！
ちょっと今確認できないからまた動作報告します

>>173
適用してみましたが完璧でした！
ブックマークバーにボタンを移動すると横に伸びた感じになりましたが
4pxの部分を2pxにしたら改善しました

どんなネーミングにしようか悩み中です・・・

そりゃこうなるわ、マゴキツ過ぎ

スクロールバーのつまみを長くする方法はありますか?
つまみの幅じゃなく長さね。
特に2chの長いページなどでつまみが小さくて。

できない

https://userstyles.org/styles/94453/

こういうのみたいなスクロールバーを改変するcssを見て、min-height（横スクロールバーならmin-width）に好きな数値を設定すればいいんじゃね？

すっげ簡単に出来るよなw
できないとか息を吐くように嘘をつくﾁｮﾝが湧いてて草

(ろくに調べもしない教えて君には一生)できない

できもしないくせに

44でロケーションバーのhttpsのurlがまた色が付かなくなっちゃったみたいなんですけど
分かる方いますか？

#urlbar[level]　←元はこれでいけてて
#main-window[stylish-url^="https://";]　←43まではこれでいけてたのに

>>185
Colored Firefox's HTTPS Location Bar - Themes and Skins for Browser - userstyles.org
https://userstyles.org/styles/122476/colored-firefox-s-https-location-bar

>>186
かたじけない！

つまりどういうことなの

終了っすね

そういうことっすか

YouTube また仕様変わった？
プレイヤーのデフォルトサイズを変更するスタイルが効かなくなった

googleがかかわるとろくなことにならん

画面解像度が横1024のノーパソなんで
サイトによっては表示しきれなくて横スクロールバー出るんだけど
1024のモニタ内にすべて収まるようにするCSSあれば教えてください

>>193
あなたのすべてとわたしのすべてはたぶんぜんぜんちがう
あなたのすべてはなんですか

>>193
Ctrl+-(マイナス)で縮小するのが無難では

body { max-width: 100% !important; }

>>193
スクリプトなら、縮小せずに済む便利なのあるけど...
ttps://greasyfork.org/ja/scripts/3569-shift-scroll-hscroll

完全にズレたアドバイスだな

礼も言わないようなカスしかいないんだから金輪際教えなくていい

お礼されないとぽんぽんいたいいたいになっちゃうメンタルだもんねしょうがないよね

>>197-198
確かにズレてるけど、これの方が良いんじゃね
俺は貰っとこ、横�d

CSS絵描き職人だれか居る?
お絵描きするのに、box-shadow意外にも何か使えるもんあるの？
１エレメント→親３つまで（本体＋:before＋:after）＜ーーーこれも問題
１親→親と同じ形なら子を無限に指定できる,親はzindexでレイヤ指定可
１子供→親と同じ形、指定可能なのは色、位置、サイズ（親を１とする）
レイヤ→CSSに書く順番とZindex
形状は親の数まで可能、角度は親のみ指定可、子供に遺伝する＜ーーこれも問題
形状○→border-radius（色指定可、位置指定可、spreadでサイズ指定可、複数可）
形状□→子供は親の比率を受け継ぐ（めんどいが子の多数指定で別の比率を作る）
形状△→角度指定は親しかできない＜ーーーこれ問題
テクスチャ→親の数だけbackground-imageに指定可
　□テクスチャ→linear-gradientの複数可、軸、色複数可
　○テクスチャ→radial-gradientの複数可、（位置、大きさ、色）
文字→content:(→サイズ、色、位置)、親の数だけ可
inset指定でForzaの痛車みたいにお絵描きできるが、親の数に制限がある

１エレメントあたりの親の数増やす方法、
もしくは子供がそれぞれ角度指定・変形指定できれば
かなり自由度が増すとおもうんだが、なんか方法ないですか？
他になにか使えるproperty無いかな〜
エロい人おしえてください

CSS絵描き職人 なんて 職業は知りません

>>203 こんなの
http://nicolasgallagher.com/pure-css-gui-icons/
なんか無限の可能性がありそうでも、なさそうでもある

単一divに自由にお絵描きできればいろいろ遊べそうなんで聞いてみた
ドット打ちはミクやインベーダーやった人がいるけど、拡大すると汚いんで
べつの方法ないか模索

CSSでドラえもんが描けるって昔流行ったけど
それもFirefox3時代の遺物やん

職人と思われる人のひとり
ドラえもん
http://purecss3.net/doraemon/doraemon_css3.html
とある〜のインデックスさん
http://purecss3.net/index/Gununu_Index_CSS3.html
画像無しでの構築例
http://netagear.net/

ただ現在のところ、多数のDivを必要とする

>>206
とりあえずスレチだと思うので他所でやってください

googleのキャッシュリンクと類似ページリンクを並べるCSSを書いたのってこのスレだったっけ？
仕様変更でlist-styleが露出するようになったな

Instagramの投稿時間を絶対時刻表示にするcssを教えて頂けますか
ぐぐってみたんですが見付かりませんでした

>>209
/* Instagramの投稿時刻を絶対時刻表示にする。 */
@-moz-document domain("www.instagram.com") {
time[datetime] {
visibility: hidden !important; /* 相対時刻も一緒に表示するならこの行を削除 */
}
time[datetime]::before {
visibility: visible !important;
content: attr(datetime) !important;
position: absolute !important;
top: 0 !important;
right: 0 !important;
}
}

>>210
ありがとうございます！

timeってサイトごとにJSTだったりUTCだったりPTとかだったりしてぱっと見わかりにくいのが難だよね。

CSSの守備範囲外だけど、あれをユーザーが指定したタイムゾーンに変換してくれるアドオンとかってないものかな。

Web版Evernoteのノート本文のフォントサイズって変更出来ませんか？
編集すればサイズ変更出来るのは知ってるんですけど普段の閲覧時に小さくて不便なんです。
要素を調査から色々試しましたがわかりませんでした、わかる方いましたらお願いします。

>>213
お好きな要素やら{font-size: お好きなサイズやら}

css分からんというならブラウザ標準の拡大縮小使えばええ

CSS 蛍光でぐぐると例が出てくる、emとstrongに background-image: linear-gradient(transparent 60%, #F99 40%) みたいなのを指定するのやってみたら結構オサレな感じになった
CSSは1.0が勧告された頃から触っているけどいつのまにかFirefoxでもrubyがサポートされていたり隔世の感があるなぁ

この手の唐突に自分語りし出す基地害ってどっから湧いてくんだろ

いくらなんでも言いすぎだと思うが、ただrubyはcssの話じゃないな。

いや、display: ruby-textとかdisplay: ruby-baseとかruby-position: underとか使えばruby要素じゃなくてもルビっぽい表現ができる
例えば↓みたいな感じで見出しにサブタイトルをつけるとか分母/分子が長い分数を表現するとかできそう(未検証)

〜Another story of hiro〜
とある英雄の成り上がり日記外伝

(2x+y)(3x+2y)   (display: ruby-base//text-decoration: underline)
------------
(4x+5y)           (display: ruby-text//ruby-position: under)

ヒロさんこんばんは。

どっちにしてもユーザスタイルシートの話ではないな

userChromeやuserContentの範疇でUIやサイトの見栄えを変更したいというのが此処の趣旨だけど、突然何の脈絡も無く要素の話を持ちだしてもな

保守

保守

芸能人ブログでよくある連続改行を無効にするのに下記を使っていますが

br
{
display: block !important;
line-height: 0px !important;
}

<p>&nbsp;</p>で改行するタイプだと使えません
どう書いたらいいのでしょうか

CSS ではできない
可能にする疑似クラスの提案もあったけど不採用のはず

やりたいなら JavaScript で style か class つけるって感じじゃないの

JavaScriptでやるなら決め打ちで除去しちゃえば

(function () {
document.body.innerHTML = document.body.innerHTML(/<p>&nbsp;<\/p>/g, '');
})();