Firefoxアドオン「Stylish」の使えるスタイル8選

Posted at 10:45 on April 20, 2009

Last updated at 23:42 on September 16, 2010

Tags: Amazon, Firefox, Google, Microsoft, SEO, Web, Yahoo!, ツール, パソコン, ライフハック, 仕事, 勉強

Firefox のアドオン Stylish はウェブページの見た目や Firefox 自体の見た目をカスタマイズできるというもので、Firefox ユーザなら多くの人がご存知かと思います。

Stylish はスタイルシートをいじるというもので、基本的に Stylish でできることはこれまたお馴染みの Firefox アドオン Greasemonkey でできるのですが、Greasemonkey ≒ JavaScript を使いすぎると重くなりがちです。なので、Stylish ≒ スタイルシートでできることはスタイルシートでやってしまおうということになります。

今回は Stylish で使える（と鍵山が勝手に判断した）スタイルを８つご紹介します。

気になったものがあったら使ってみてください。

基本的には記事を紹介しますが、ここでご紹介するスタイル自体は元記事を参考に鍵山が自分好みにカスタマイズしたものも含まれます。CSS がわかる人は独自にカスタマイズすることで格段に使いやすくなりますよ。

コンテンツ

Google や Yahoo! の検索結果に番号を振る
1. Google の検索結果に番号を振る
2. Yahoo! の検索結果に番号を振る
3. MSN Live Search の検索結果に番号を振る
フォーカスの当たっているテキストボックスやテキストエリアを目立たせる
“rel=”nofollow””の付いたリンクを目立たせる
更新ボタンと中止ボタンを１つにする
AutoPagerize のページ区切りをカスタマイズする
アマゾン（Amazon）のアフィリエイトリンクを目立たせる

Google や Yahoo! の検索結果に番号を振る

↓

（クリックで拡大表示）

Google や Yahoo! で検索して、その順位を調べたいことってありますよね。でも、デフォルトでは順位を知るには上から数えるしかありません。これは非常に面倒臭い作業です。ということで、自動で番号を振ってくれるスタイルをご紹介します。

まずは Google からです。

ウェブ検索（日米両方）、ブック検索、スカラーに対応しています。

» ライフハック・便利ツール紹介野郎: Googleでも検索結果に番号を振るスタイルを書いてみた：Firefoxのアドオン「Stylish」で

※ 元記事での修正に合わせてこちらでも一部修正しました（June 28, 2009）。修正部分は文字を緑色にしてあります。

@namespace url(http://www.w3.org/1999/xhtml);
 
/* ウェブ検索 */
@-moz-document domain("google.com"), domain("google.co.jp") {
  body {
    counter-reset: result !important;
  }
  h3.r:before {
    content: counter(result) ". " !important;
    counter-increment: result !important;
  }
}
 
/* ブック検索 */
@-moz-document domain("books.google.co.jp") {
  body {
    counter-reset: result !important;
  }
  h2.resbdy:before {
    content: counter(result) ". " !important;
    counter-increment: result !important;
  }
}
 
/* スカラー */
@-moz-document domain("scholar.google.co.jp") {
  body {
    counter-reset: result !important;
  }
  h3.r:before {
    content: counter(result) ". " !important;
    counter-increment: result !important;
    color: #000 !important;
  }
}

↓

（クリックで拡大表示）

続いて Yahoo! 検索です。

Yahoo! JAPAN と本家 Yahoo! に対応しています。

» ライフハック・便利ツール紹介野郎: Yahoo!で検索結果に番号を振るスタイルを書いてみた：Firefoxのアドオン「Stylish」で

@namespace url(http://www.w3.org/1999/xhtml);
 
@-moz-document domain("search.yahoo.co.jp") {
  body {
    counter-reset: result !important;
  }
  div.web h3:before {
    content: counter(result) ". " !important;
    counter-increment: result !important;
    color: #000 !important;
    font-size: 120% !important;
  }
}
 
@-moz-document domain("search.yahoo.com") {
  body {
    counter-reset: result !important;
  }
  div.res h3:before {
    content: counter(result) ". " !important;
    counter-increment: result !important;
    font-size: 110% !important;
  }
}

↓

（クリックで拡大表示）

一応 MSN Live Search もあったほうがいいですね。

本家と日本の２つに対応しています。

» ライフハック・便利ツール紹介野郎: MSN Live Searchで検索結果に番号を振るスタイル：Firefoxのアドオン「Stylish」で

@namespace url(http://www.w3.org/1999/xhtml);
 
@-moz-document domain("search.live.com"), domain("search.msn.co.jp") {
  body {
    counter-reset: result !important;
  }
  div#results h3:before {
    content: counter(result) ". " !important;
    counter-increment: result !important;
  }
}

▲上に戻る▲

フォーカスの当たっているテキストボックスやテキストエリアを目立たせる

↓

（クリックで拡大表示）

フォーム入力時、今どこにフォーカスしているのかわかりにくくて目を凝らしてしまうことってありませんか？　この前リリースされた Google Chrome では、そうしたことにならないよう、フォーカスのあるテキストボックス（テキストエリア）の枠が黄色になって目立ちます（下画像）。

（クリックで拡大表示）

これと似たようなことを Firefox でもやろうというのがこのスタイルです。

» Bright Focus (for buttons, links, and textboxes) | userstyles.org

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix(http), url-prefix(file) {
a:hover:active {
  color: #10bae0;
}
a:not(:hover):active {
  color: #0000ff;
}
*:focus {
  -moz-outline: 2px solid -moz-rgba(16,186,224,0.5) !important;
  -moz-outline-offset: 1px !important;
  -moz-outline-radius: 3px !important;
}
button:focus,
input[type="reset"]:focus,
input[type="button"]:focus,
input[type="submit"]:focus,
input[type="file"] > input[type="button"]:focus {
  -moz-outline-radius: 5px !important;
}
button:focus::-moz-focus-inner {
  border-color: transparent !important;
}
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
  border: 1px dotted transparent !important;
}
textarea:focus, button:focus, select:focus, input:focus {
  -moz-outline-offset: -1px !important;
}
input[type="radio"]:focus {
  -moz-outline-radius: 12px;
  -moz-outline-offset: 0px !important;
}
a:focus {
  -moz-outline-offset: 0px !important;
}
}

▲上に戻る▲

“rel=”nofollow””の付いたリンクを目立たせる

↓

（クリックで拡大表示）

SEO スパムが増えてきて、それに伴って“rel=”nofollow””の付いたリンクも増えてきました。

このいわゆる nofollow リンクは、リンク先にリンクジュースを渡したくないときに使うとされ（Yahoo! さんではあまり効果がないように思いますが……）、コメントスパムが頻発したことから普及したような気がします。

Nofollow リンクのデフォルト状態での見た目は普通のリンクとまったく同じです。これを悪用して相互リンクに nofollow リンクを使うことで自分だけリンクジュースをもらおうとする人が現れもしました。

最近では自サイト内でそれぞれのページに関して意図的に優劣を付けるために使用されることも多いです。例えばブログではタグへのリンクには nofollow を付けているところがけっこう見られます。

とまぁ、つらつらと nofollow リンクについて説明してきましたが、見た目が普通のリンクと同じ nofollow リンクを一目で見分けがつくようにしようというのがこのスタイルなわけです。

» お気に入りのFirefoxアドオン – その3 >> 病的溺愛シンドローム

@namespace url(http://www.w3.org/1999/xhtml);
 
a[rel~=nofollow] {
  color: #000080 !important;
  text-decoration: none;
  background-color: #afeeee !important;
  border-top: 1px dotted #000080 !important;
  border-bottom: 1px dotted #000080 !important;
}
a[rel~=nofollow]:hover {
  text-decoration: underline;
}

▲上に戻る▲

更新ボタンと中止ボタンを１つにする

[画像] Combine Stop/Reload buttons before →

ブラウザで余計なところはとことん削っちゃおうということで、同時に必要になることがない（と考えられる）リロードとストップは一緒にしてしまおうというのがこのスタイルです。

» Combine Stop/Reload buttons | userstyles.org

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
#stop-button[disabled="true"] {
  display:none;
} 
#stop-button:not([disabled]) + #reload-button {
  display:none;
}

▲上に戻る▲

AutoPagerize のページ区切りをカスタマイズする

↓

（クリックで拡大表示）

連続したページを自動で下に継ぎ足してくれる便利な Greasemonkey スクリプトの AutoPagerize、愛用している方もいるかと思います。

デフォルトではページ区切りがちょっとそっけない感じなので少しカスタマイズしてみようというスタイルです。

» しげふみメモ : AutoPagerizeのページ区切りをサイトに合わせて見やすくしよう

@namespace url(http://www.w3.org/1999/xhtml);
 
/* AutoPagerize */
.autopagerize_page_separator {
  border:none;
}
p.autopagerize_page_info {
  margin:5px 0px 20px;
  background:#ebebeb;
  -webkit-border-radius: 0.4em;
  -moz-border-radius: 0.4em;
  /*
  border-radius: 0.4em;
  */
  line-height:1.5;
  font-size:100%;
  text-align:center;
  color: #000; /* 自分で追加 */
}

▲上に戻る▲

アマゾン（Amazon）のアフィリエイトリンクを目立たせる

↓

（クリックで拡大表示）

世界で１番有名な（ソースは鍵山ｗ）通販サイトといえばアマゾンですよね。

そのアマゾンにはアフィリエイトプログラムというのがあって、簡単に説明すると“自分のサイトにアマゾンで取り扱っている商品の広告を掲載してお小遣いを稼ごう！”というものです。

別に広告を貼るのはいいと思いますが、たまにたくさんのリンクを張っている中にアフィリエイトリンクを紛れ込ませているウェブサイトがあります。「どんなサイトかな？」と思ってアクセスしてみたら「なんだ、アマゾンかよ！」とがっかりするわけですｗ　アマゾンとしても買うつもりのない客が紛れ込んできては迷惑でしょうし、アフィリエイトリンクが普通のリンクと見分けられるようにしようというのがこのスタイルです。商品に興味があるときは普通にアクセスすればいいので特に問題はないと思います。

ただ、このスタイルは鍵山が自分で勝手に作ったもので、たまに誤爆します。アフィリエイトリンクには基本的に“xxxx（ユーザ ID）-22”という部分が含まれるため、“-22”で判別しようとしているのですが、ブログなんかでこの URL を含んでいる場合があるんですね。このへんは改良の余地ありということで思案中です。いいアイディアを知っていて、かつそれを教えてもいいよという親切な方はどうぞご教示ください。

@namespace url(http://www.w3.org/1999/xhtml);
 
a[href*="-22"] {
  color: #b8860b !important;
  text-decoration: none;
  background-color: #f0e68c !important;
  border-top: 1px dotted #b8860b !important;
  border-bottom: 1px dotted #b8860b !important;
}
a[href*="-22"]:hover {
  text-decoration: underline;
}

※ 追記（March 21, 2010）

バージョンアップして誤爆を減らしました。「URL に“amazon”も“-22”も含む」場合に強調するようにしました。また、ついでに楽天市場へのアフィリンクも強調するようにしました。コードは以下のようになりました。

@namespace url(http://www.w3.org/1999/xhtml);
 
a[href*="amazon"][href*="-22"], 
a[href*="afl.rakuten"] {
  color: #b8860b !important;
  text-decoration: none;
  background-color: #f0e68c !important;
  border-top: 1px dotted #b8860b !important;
  border-bottom: 1px dotted #b8860b !important;
}
 
a[href*="amazon"][href*="-22"]:hover, 
a[href*="afl.rakuten"]:hover {
  text-decoration: underline;
}

いかがでしたか？　気になるスタイルはありました？

どれか１つでもお役に立てたのなら嬉しいです。

自分の備忘録にもなる Stylish 特集でした。

▲上に戻る▲

よろしければ以下の関連（してそうな）記事もどうぞ！

« 前の記事：英語学習に使えるサイト、ページ8選：リスニング、ライティングのトレーニングに
» 次の記事：気になるフリーソフト19選 – セキュリティ、USB関連、その他便利ソフト

12 Responses to “Firefoxアドオン「Stylish」の使えるスタイル8選”

SEOgro より:

April 20, 2009 10:45

使えるFirefoxアドオン「Stylish」のスタイル8選 (via technorati.com) – http://www.kagitaku.com/diary…

SEOgro
» このコメントを引用してコメントする
便利なFirefoxアドオン10選 | きにきじより:

May 24, 2009 03:28

返信
aimymoco より:

August 17, 2009 10:22

stylish 便利設定

aimymoco
» このコメントを引用してコメントする
zonbinko より:

October 14, 2009 08:39

フォーカスの当たっているテキストボックスやテキストエリアを目立たせる

zonbinko
» このコメントを引用してコメントする
yoshy より:

February 21, 2010 07:24

Firefoxアドオン「Stylish」の使えるスタイル8選 | きにきじ – http://www.kagitaku.com/diary…

yoshy
» このコメントを引用してコメントする
moriya より:

February 21, 2010 17:44

Firefoxアドオン「Stylish」の使えるスタイル8選 | きにきじ – http://www.kagitaku.com/diary…

moriya
» このコメントを引用してコメントする
links for 2010-02-21 « 個人的な雑記より:

February 22, 2010 07:06

返信
hidehish より:

July 24, 2010 09:28

Firefoxアドオン「Stylish」の使えるスタイル8選 | きにきじ http://www.kagitaku.com/diary…

hidehish
» このコメントを引用してコメントする
hidehish より:

July 24, 2010 09:28

Firefoxアドオン「Stylish」の使えるスタイル8選 | きにきじ http://www.kagitaku.com/diary/2009/04/20/stylish-8.html

hidehish
» このコメントを引用してコメントする
xlazulite より:

April 28, 2011 18:03

RT @.TopsyRT: Firefoxアドオン「Stylish」の使えるスタイル8選 http://bit.ly/70ENhO

xlazulite
» このコメントを引用してコメントする
9yen より:

June 16, 2011 21:23

Firefoxアドオン「Stylish」の使えるスタイル8選 | きにきじ http://htn.to/ADmd6S

9yen
» このコメントを引用してコメントする
kawauso_666_ より:

September 2, 2011 21:02

火狐にこんなアドオンあったのか！　サイトのCSSを直接いじくれるらしい。　IE6→Sleipnir→火狐→Opera→Chromeと来たけどやっぱり狐さんが最強なんじゃないのｗ　http://t.co/CCn8UWy

kawauso_666_
» このコメントを引用してコメントする

「きにきじ」：今日の気になる記事をきまぐれにご紹介