- 締切済み
chromeで独自cssを追加するエクステンション
下記のような事をしたいと考えています。 詳しく載っている書籍や、ページがありましたらご教授お願いします。 ■chromeで独自cssを追加するエクステンション 1a.特定のサイトのタグをcssで表示しないように変更します。 (サイトの選択ができない場合は、 div.aaa ul.bbb li nth-child(2), div.aaa ul.bbb li nth-child(3), { display:none; } のようにそのサイトでしか反映されないようにします。） 1b.または、正規表現で該当箇所を探し、 その部分をコメントアウトするようにしたいと考えています。 2.この変更がクリック一つで追加できるようにして 配布したいと考えています。 ～～～～～///////////////////////////////～～～～～ 例えば、エクステンションやユーザスタイルシートなどです。 ただ、ユーザスタイルシートの場合は追加というより、 元あるユーザスタイルシートを編集して配布する形になるのではないかと思います。 そのような理由からエクステンションでの配布を希望しています。 私の探し方が悪いと思うのですが、 自分だけに適用する方法ばかりがHITします。 エクステンションでスタイルシートを編集する為の情報が出てきません。 もし、私自身でスタイルシートを管理するのであれば ・Google Chrome Extensions: Chrome Stylist https://chrome.google.com/webstore/detail/pabfempgigicdjjlccdgnbmeggkbjdhd というのが便利です。 しかし、この方法ではcssの設定を書き込まなければならず、 反映したいユーザに入力してもらう手間がでてきます。 このエクステンションが有効になっている閒、 cssが反映されるといったものの作り方を知っている方がいましたら よろしくお願いします。
- kamomin
- お礼率50% (1/2)
- ブラウザ
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞div.aaa ul.bbb li nth-child(2), のような、きちんとセレクタを書ける・・同じDOMのサイトと言うことはありえないので、あなたの運営しているウェブサイトでの設定と言うことでよいですか？ だとすれば、最も簡単なのは代替スタイルシートを容易しておくので良いのでは? その場合、ブラウザ手再読み込みをすると元に戻る場合があるので、その場合はスタイルシート自体をCGIで出力させるなどの方法があります。 随分古いですが・・コンテンツ ( http://hpcgi1.nifty.com/Iruka/contents.html )の右側の切り替えとかはそうなっていますね。
関連するQ&A
- css の float:left; を li 適用
css の float:left; を li に適用すると <ul> <li>AAA</li> <li>BBB</li> <li>CCC</li> </ul> ●AAA●BBB●CCC のような横並びにできます <ul> <li>AAA</li> <li>BBB <ul> <li>aaa</li> <li>bbb</li> </ul> </li> <li>CCC</li> </ul> このように入れ子の場合 ●AAA●BBB ●CCC □aaa□bbb のように表示されます これを ●AAA●BBB●CCC □aaa□bbb のように、一段目に間を空けないで表示する CSS の設定を教えてください よろしく、お願いします
- ベストアンサー
- ホームページ作成ソフト
- cssの初歩的な質問
初歩的な質問で申し訳ないのですが、以下の画像のように画像を並べたいのですがうまく並べることができせん。 ulで画像たちを囲いmax-widthで最大幅を決めて画面が狭まるほど画像を小さくし、並べるためにfloat:leftをかけてはいるのですが下記の「こうなる」のようになってしまいます。 うまくやるにはどうしたらいいのでしょうか？ よろしくお願いします。 //簡単に書いたコード(実際はid名などを書いてます) html <ul> <li><img src="#"></li> <li><img src="#"></li> <li><img src="#"></li> <li><img src="#"></li> <li><img src="#"></li> </ul> css ul{ overflow:hidden; max-width:310px; margin:20px auto; } ul li{ float:left; width:48%; } ul li img{ width:100%; } ul li:nth-child(even){ padding-left:10px; } ul li:last-child{ width:100%; }
- ベストアンサー
- CSS
- 携帯サイトのcssについて
携帯サイトを作っております。 私の機種はdocomoの903なのですが以下のソースでページをみると リストスタイルが表示されてしまいます。 <ul style="list-style-type: none;"> <li>1</li> <li>2</li> <li>3</li> </ul> ※list-style: none;で試しても結果は同様でした。 <div style="..."></div> のように設定している他の箇所は大丈夫なのでcssの反映には 問題ないと思うのですがどうすればいいでしょうか？
- ベストアンサー
- HTML
- 【CSS】ul li iPadで見ると境界線が
以下ページをiPadのsafari及びChromeで見るとhogeとhogeの間に白い線が入ってしまいす。 同じ現象はmac OSX上のsafari,Chromeでも拡大してみると発生します。（拡大しない状態では入らない） <html> <html> <head> <meta http-equiv='Content-Style-Type' content='text/css'> <style> ul{ margin:0; padding:0; } li{ color:#fff; background:#000; } </style> </head> <body> <ul> <li>hoge</li> <li>hoge</li> <li>hoge</li> </ul> </body> </html> 線が入らないように対策できますでしょうか？
- ベストアンサー
- CSS
- floatでカラム落ちを防ぎたい
少し長いですがお付き合いよろしくお願いいたします。 <style type="text/css"><!-- body { text-align:center; } #all { width:730px; margin-left:auto; margin-right:auto;; text-align:left; background-color:#33ffcc} #left{width:50%; float:left;} #right{width:50%; float:left;} --></style> </head> <body> <div id="all"> <h1>見出し1</h1> <div id="left"> <h2>AAA</h2> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> <h2>BBB</h2> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> <h2>CCC</h2> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> </div> <div id="right"> <h2>AAA</h2> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> <h2>BBB</h2> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> <h2>CCC</h2> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> <h2>DDD</h2> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> <h2>EEE</h2> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> </div> </div> このように記述するとFirefoxではallで指定した背景色がh1にしか反映されず、left、rightの高さのずれている部分には反映されません。 この記述から、スタイルシートのrightに何も指定しないようにすると、allに指定した背景色はきちんと反映されるんですが、今度はleftよりrightのコンテンツが多いためカラム落ちしてしまいます。 どのように、記述すれば背景色がうまく反映され、カラム落ちを起こさずに済むのでしょうか？ 条件はFirefox,Opera,IE6でほぼ同じレイアウトが表現でき、tableやoverflowは使わない事です。
- ベストアンサー
- CSS
- 「>」を使った記述はCSS3からのもの？
とあるサンプルサイトのCSSを見たところ、 #global-nav > ul > li:first-child a { border-radius:6px 0 0 0; } というCSS3の角丸設定のものがありました。 一番最初にあるリンクが貼られているli要素に角丸を設定というのは何となく分かるのですが、「#global-nav > ul > li」の「>」を使ったような記述を初めて見ました。 これはどういった意味を表しているのでしょうか？ 「#global-nav」にある「ul」の「li」という意味のものであれば、「>」は別に記載する必要性はないと思うのですが…また、この記述もCSS3からのものなのでしょうか？ ご存じ方、ご教授いただければ幸いです。 よろしくお願いします。
- ベストアンサー
- HTML
- IE9でCSS3が機能しない
CSSセレクタについてお伺いします。 あるショッピングカートサイトを使っているのですが、このサイトはhtmlは編集できずCSSしか編集できないページがあります。 このページのデザインをなんとか編集したいと奮闘しています。 そのサイトのhtmlは不親切にもidやclassがほとんど記述されていません。 そのため:nth-child(n)などを使ってなんとか要素を編集できそうでした。 しかしfirefoxやchrome、operaはこの:nth-child(n)が機能するのですが IE9では機能しません。 IE9ではhtmlの宣言を<!DOCTYPE html>と記述しないとCSS3 は使えないのでしょうか？ CSS側だけでなんとかclassなどの指定がない要素を取得する方法はないでしょうか？ よろしくお願いいたします。
- ベストアンサー
- CSS
- ＮＮでだけリストの一番上の項目がずれます。
IE、Opera、Firefox では問題なく表示されますが、Netscapeでだけ、リストの最初の項目の位置がずれます。 どうやら、ＣＳＳの li {margin: 0; padding: 4px;} が反映されていないようです。 <div id="xxx"><a name="aaa" /> <!-- Menu --> <div class="navi"> <ul> <li><a href="#aaa">ホーム</a></li> <li><a href="#bbb">あいう</a></li> <li><a href="#ccc">えおか</a></li> </ul> </div> <!-- Content --> <div class="content">中身</div> </div> 「ホーム」がずれます。 正しく反映させる方法はありますでしょうか？
- ベストアンサー
- ブログ
- 箇条書きの、項目間のマージンをCSSで空ける
箇条書きの項目間のマージンをCSSで空けるために li{ margin-top:0.5em; } と <style>-</style> に書きました。 ふつうの箇条書き： <ul> <li>AAAAA</li> <li>BBBBB</li> </ul> では、項目間にマージンができてくれたのですが、 画像を先頭にした箇条書きでは、だめでした。 たとえば、 <ul imagesrc="botan.gif"> <li>AAAAA</li> <li>BBBBB</li> </ul> とすると、項目間のマージンがゼロです。 なぜでしょうか？良い方法はないでしょうか？
- ベストアンサー
- CSS
補足
私のサイトではないので、 サイト側で用意するといった方法はとれません。 あるサイトで利用したいのですが、DOMの構造はそのサイト特有なので div.aaa ul.bbb li nth-child(2) のように狙って用意する事ができます。 また、私だけでなくクロームやFFのエクステンションやテーマjsのように インストールして使う事ができるようなものの配布を考えています。