AUTHORITY SITE

Firefox アドオンの
Stylish の使い方では、既存のユーザースタイルシートをインストールする方法を説明しました。
この記事では、ユーザースタイルを自作する方法を説明します。一般的に、高度なデザインを実現するためのには CSS に関する知識が必要となります。
そのため、ここでは全くCSSの知識を持っていない人でもできる超簡単で、特に需要があると思われるウェブ広告の削除のためのユーザースタイルの作り方と簡単なCSSの説明をします。

まず、Firebug をインストールして再起動してください。
Firebug はウェブサイトを簡単に編集するためのアドオンです。これを使うとユーザースタイルの作成が楽になります。

ウェブ広告が多種多様な 痛いニュース(ﾉ∀`) の広告を消すスタイルシートを作ります。

まず、ステータスバーのホタルのアイコンをクリックします。
次に、下図で白くハイライトされているアイコン（□の上にマウスポインタが乗ったようなアイコン）をクリックします。

次に、消したい広告の上にマウスポインタを持っていきます。広告の周りに青い枠が表示されたらクリックします。

すると同時に、Firebug の <div class="google-user-ad google-user-ad-top ad-bg"> が選択されます。ウェブページで選択された部分（この場合は選択されたウェブ広告）に対応するソースコードが選択されます。
つまり、<div class="google-user-ad google-user-ad-top ad-bg"> の部分をスタイルシートで消せば、その部分に対応する広告が消えるということです。

今度はステータスバーにある Stylish のアイコン（アルファベットのSをモチーフにしたアイコン）を右クリックして、”新しいスタイルを書く” を選択します。
（Stylish をインストールしていない場合は、Firefox アドオンの Stylish の使い方 にインストール方法が書いてあります）

blog.livedoor 専用をクリックする。

“新しいスタイル” というウィンドウが現れます。
名前のところにユーザースタイルシートの名前を入れます。
名前は何でも良いのですが、『痛いニュース(ﾉ∀`) 広告削除』としておきます。

@-moz-document domain("blog.livedoor.jp") {
}

↑という部分があると思います。
domain(“blog.livedoor.jp”) の意味は、URL のホスト名が blog.livedoor.jp で終わるすべての URL に 波括弧（{ }）の中の命令を適用するという意味です。
痛いニュース(ﾉ∀`) (http://blog.livedoor.jp/dqnplus/) のホスト名はblog.livedoor.jp なので、括弧内の命令が適用されます。
しかし、VIPPERな俺 (http://blog.livedoor.jp/news23vip/) にも適用されます。

痛いニュース(ﾉ∀`) (http://blog.livedoor.jp/dqnplus/) だけに適用したい場合は、
domain(“blog.livedoor.jp”) の部分を
url-prefix(http://blog.livedoor.jp/dqnplus/) に変更します。
これは、URL の最初の部分が http://blog.livedoor.jp/dqnplus/ に一致したら適用するということです。

@-moz-document url-prefix(http://blog.livedoor.jp/dqnplus/) {
/* ここに書いていきます */
}

<div class="google-user-ad google-user-ad-top ad-bg"> の部分が広告なので、それを消すためのCSSを /*ここに書いていきます */ の部分に書いていってください。

.google-user-ad {display:none !important;}

google-user-ad の前に “.” があります。
これは 『google-user-ad がクラス名だ』 ということを表します。
その次に display:none !important; という部分があります。
これは、『絶対表示しないでください』 という意味です。
class=”abc” のときは、.abc とします。
id=”abc” の場合は、#abc にします。
!important についてですが、スタイルシートには適用される優先度があります。

ウェブページの指定 > 閲覧者の指定 > ブラウザのデフォルト指定の順に優先度が高くなっています。
しかしそれぞれ、!important を付けると、
閲覧者の指定 > ウェブページの指定 > ブラウザのデフォルト指定という順に優先度が高くなります。
Stylish は閲覧者がウェブページのスタイルシートを変更しているので、!important を付けなければ、ウェブページの指定が優先されてしまいます。

次にテキストリンクの広告を消していきます。
同様に、下図で白くハイライトされているアイコン（□の上にマウスポインタが乗ったようなアイコン）をクリックします。その後アマゾンのリンクを選択してクリックします。

次にアマゾンのリンクを青い枠で選択できたら、クリックします。

Firebug の青い背景色になった部分で、href 以降にある URL をクリックします。そして、そのURLをコピーします。
すると、http://www.amazon.co.jp/exec/obidos/ASIN/B003GALBE0/kimagureeigan-22/ref=nosim/ という感じの URL がコピーできます。
このリンクを消すためのスタイルを記述すると下のようになります。

/* アマゾンへのリンクが全て消える */
a[href^="http://www.amazon.co.jp/"] {display:none !important;}
/* リンク先URLに amazon を含むもの全て消える */
a[href*="amazon"] {display:none !important;}
/* まとめて指定する場合はコンマで分ける */
a[href^="http://www.amazon.co.jp/"] ,
a[href*="amazon"] {display:none !important;}

a[href^="http://abc.com/"] は、URLの最初が http://abc.com/ と一致するものを指定し、a[href*="def"] はリンク先URLに def を含むものを指定します。

組み合わせていけば、広告消しだけならユーザースタイルを簡単に作成できます。
例えば下のような感じになります。

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix(http://blog.livedoor.jp/dqnplus/)
{
	.google-user-ad,
	.ld-side-banner,
	#poweredAdsBy,
	a[href^="http://dbirth.dmm.co.jp/"],
	a[href^="http://track.xmax.jp/"],
	a[href^="http://www.amazon.co.jp/"]
	{display:none !important;}
}

class は”.” id は “#”
一度に複数のセレクタを指定するときは、コンマで区切る。
{display:none !important;} は『絶対表示しないでください』 という意味。