じゃまな広告をブロックしたり職場でムフフなサイト見たいときとか
今回はCSSなかでもユーザースタイルシートを記述し良く使うサイトを自分好みにカスタマイズするときに使う機能をメモる
中でも広告除去を手動でできるようにしてサイトの構成が変わっても誰かが広告削除プログラムを更新するのではなくその場でいじって即広告非表示にできるのは覚える価値が十分にあるだろう
ちなみにFireFoxで実装するのでIE版のCSSと挙動が若干違うので気を付けていただきたい
CSSって何とかFireFoxって何って人向けには作ってないので分からなかったらコメントしてほしい。返信は遅れるかもしれないができるだけこたえるので
どちらも初期設定等は特に必要なかったと思う
使い方はアドオン名で検索すると出てくるので省略して、CSSの基本くらいはわかってるの前提で良く使うタグやCSS構文をメモる
はユーザースタイルシートで記述した要素を優先する時に使う（正確にはちょっと違う）
既にある要素に上書きして機能させたいときはまずこいつを使うことになる
該当する要素を非表示にする。本来は開発時に一時的に無効かさせるのに使うみたいだが広告ブロック要素を非表示にしたりするのにもっとも
前者は広告のURLを名指しで指定して非表示にする
後者は気に食わない画像のURLを名指しで指定して非表示にする
良く使く構文
↑bodyのbackgroundを無効かする
↑http://www.yahoo.co.jpに一致した物をかたっぱしから非表示にする
↑カラフルなサイトを即シンプルに
↑広告は大抵divでclassかidで括ってるから要素名名指しで非表示できれいに見えなくなることが多い
↑職場でムフフな画像を見る時画面の下から見上げるようにすると鮮明に見えたりｹﾞﾌﾝｹﾞﾌﾝ
だいたい「!important」と「display: none」が分かればだいたいの広告は非表示にできる
この手法は非表示にするのが胆で広告をブロックするツールだと
とあるサイトで広告のサーバネームとメインコンテンツの画像のサーバネームが一緒でメインコンテンツごとブロックしてしまうなんて場合に、上記の方法をとれば広告を直接指定して見えなくすることができるわけだ
FireFoxの場合画像を非表示にすると読み込み事態も行われない為モバイルノートPCで画像やflashを使ったコンテンツを非表示にして必要な情報だけを早く表示することもできる
中でも広告除去を手動でできるようにしてサイトの構成が変わっても誰かが広告削除プログラムを更新するのではなくその場でいじって即広告非表示にできるのは覚える価値が十分にあるだろう
ちなみにFireFoxで実装するのでIE版のCSSと挙動が若干違うので気を付けていただきたい
CSSって何とかFireFoxって何って人向けには作ってないので分からなかったらコメントしてほしい。返信は遅れるかもしれないができるだけこたえるので
-Firebug
-Stylish
どちらも初期設定等は特に必要なかったと思う
使い方はアドオン名で検索すると出てくるので省略して、CSSの基本くらいはわかってるの前提で良く使うタグやCSS構文をメモる
"!important"
はユーザースタイルシートで記述した要素を優先する時に使う（正確にはちょっと違う）
既にある要素に上書きして機能させたいときはまずこいつを使うことになる
display: none!important;
該当する要素を非表示にする。本来は開発時に一時的に無効かさせるのに使うみたいだが広告ブロック要素を非表示にしたりするのにもっとも
a[href=""] {display: none!important;}
img[src="/yahoo.co.jp/img/title.jpeg"] {display: none!important;}
前者は広告のURLを名指しで指定して非表示にする
後者は気に食わない画像のURLを名指しで指定して非表示にする
良く使く構文
/*img タグで使うもので画像の透明度を指定する*/
opacity:0.20!important;/**/
/*要素の属性名に一致するものに適用させる*/
body[background] {none!important;}
↑bodyのbackgroundを無効かする
/*要素の属性名と属性値に一致するものに適用させる*/
a[href="http://www.yahoo.co.jp"] {display: none!important;}
↑http://www.yahoo.co.jpに一致した物をかたっぱしから非表示にする
*{/*全て要素の背景色と文字の色を指定する*/
background:#FFFFFF!important;/*全部白*/
color:#999999!important;/*全部黒*/
}
↑カラフルなサイトを即シンプルに
div#left{/*div#leftを抹殺*/
display: none!important;
}
↑広告は大抵divでclassかidで括ってるから要素名名指しで非表示できれいに見えなくなることが多い
img{/*イメージを半透明にするがfirefoxだと0から1の間で小数点を指定するIEだと0から100の間で指定するため微妙に互換性が無い*/
opacity:0.20!important;
}
↑職場でムフフな画像を見る時画面の下から見上げるようにすると鮮明に見えたりｹﾞﾌﾝｹﾞﾌﾝ
だいたい「!important」と「display: none」が分かればだいたいの広告は非表示にできる
この手法は非表示にするのが胆で広告をブロックするツールだと
とあるサイトで広告のサーバネームとメインコンテンツの画像のサーバネームが一緒でメインコンテンツごとブロックしてしまうなんて場合に、上記の方法をとれば広告を直接指定して見えなくすることができるわけだ
FireFoxの場合画像を非表示にすると読み込み事態も行われない為モバイルノートPCで画像やflashを使ったコンテンツを非表示にして必要な情報だけを早く表示することもできる
