それマグで！

知識はカップより、マグでゆっくり頂きます。　takuya_1stのブログ

習慣に早くから配慮した者は、 おそらく人生の実りも大きい。
トップ > opera > サイトの広告を消す方法

サイトの広告を消す方法

opera

User.CSSを使って広告を消す。


WEB業種で生計を立ててる身としては、心苦しいのですが。広告を消す方法。について

ブラウザ機能で広告を消す方法　（2分野・3種類）

  1. URLフィルタリング
  2. HTMLのエレメントを操作する

方法１：コンテンツブロック：オススメはOpera

オススメはOperaのコンテンツブロック。とても明解で分かりやすい。禁止URLリストを使うので、JSや画像にアクセスしないので、速度改善にもつながって一石二鳥です。

使い方


コンテンツブロック - Opera Wiki

コンテンツブロックの補足的な使い方


消えない場合はShift+クリックで消すとラッキーになれることも
JavaScriptなどもこれでブロック

やりすぎたら危険

先日このようなトラブルが。。。


どこかでユニクロの広告を消したらしく、ユニクロにアクセスできなかった。以前は真っ白なページになってたけど、最近はこのように出るようになった。

HTMLのエレメントを操作する。

ブラウザ機能で消せない場合に使う。設定が面倒なので、よく使うサイトや、本当にウザイ広告に使う。

  1. USER.JS
  2. ユーザースタイルシートで消す。

User.JSで消す方法

何でも出来るし、出来過ぎる。切れすぎるナイフなのでちょっとめんどくさい。と思ってた時期が私にもありました。使ってみると意外と使いやすい。食わず嫌いでした。

document.addEventListener('DOMContentLoaded', function() {
　document.getElementById("ad").innerHTML="";
},false);

ユーザースタイルシートの場合

スタイルシートで消す場合は、次の選択肢がある。

  1. display
  2. visibility
  3. hight + overflow
  4. position:absolute & left:-1000;

やりかた

  1. DomInspectorでDomノードから広告ノードを特定する
  2. サイト設定でユーザースタイルシートを選択する。

displayの場合

スタイルシートに次のように書く

#ad{
	display:none;
}

displayで消した場合の留意点

  1. ブロックがそのまま消えるので、段オチしてレイアウトに影響がある。
  2. タグ直書きスタイルが優先されるので<div style="display:block">とされたら消せない

visibilityの場合

スタイルシートに次のように書く

#ad{
	visibility:hidden;
}

visibilityで消した場合の留意点

  1. ブロックは背景色で塗りつぶされる

height/width を使う

スタイルシートに次のように書く

#ad{
	height: 2px;
	overflow:hidden;
}
  1. visibility/displayが旨く動作しないときに便利
  2. overflowで消すのがポイント

追記 position:absolute & left:-1000;

そういえば、position属性もありました。

#ad{
 position:absolute;
 left:-1000px;
 top:-1500px;
}

宇宙の彼方に表示する設定

参考：Visiblity の動作についてはここ

visibility:hidden/display:none の使い分け - ブックマクロ開発に

追記2011-01-17

!important属性も使えますね。→詳細