ライフハック・便利ツール紹介野郎

Gmailを等幅フォント表示にするStylishのスタイル - June 2, 2010版

2010-06-02T23:08:00.003+09:00

本日 Gmail の Labs を何気なく見てみると、いくつか新たな機能が追加されていました。実は追加されてから数日以上経っていたなんて可能性もあるわけで、ちょっと気付くの遅かったかもしれないと思って微妙に凹みましたｗ

さて、Labs の新機能の中には、これまでブラウザ（Firefox など）の拡張（例えば Better Gmail 2 など）を使わないと普通の人には使えなかったような機能が追加されていました。例えば、ラベルのネスト、メール一覧時に右クリックでプレビュー表示などです。今回はこのプレビューで表示したメール本文にも等幅フォント表示を対応させようということで、スタイルを書き直してみました。

■ Gmail Fixed-width Font | userstyles.org

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("mail.google.com") {
  /* テキストメッセージ [for text message] */
  div.ii, textarea.Ak,
  div.yq, div.yy span {
    font-family: monospace !important;
    font-size: 85% !important;
  }
  /* HTMLメッセージ [for HTML message] */
  div.ii p, div.ii li, div.ii table,
  div.yq p, div.yq li, div.yq table {
    font-family: sans-serif !important;
    font-size: 100% !important;
  }
}

/*--------------------------------------------------
  * font-family: フォントを指定
    * monospace: 等幅フォント
    * sans-serif: 普通のサンセリフフォント
  * font-size: 文字の大きさ
    * %, em, px
--------------------------------------------------*/

いかがでしょうか？

Gmail に限らず、「CSS とかよくわかんないけど、これをこういう風に表示させてみたい！」なんてご意見がございましたら、お気軽にコメントをください。

Gmailを等幅フォント表示にするStylishのスタイル - Oct. 23, 2009版

2009-10-23T23:59:00.004+09:00

※ この記事でご紹介しているスタイルは最新版ではありません。お手数ですが、最新版は「gmail 等幅フォント」で検索を行ってお求めください。検索ツールで期間を適当に指定して、その下の「日付順」を選べば最新の記事が１番上に表示されます。

以前、「Gmail本文を等幅フォント表示：引用部分がプロポーショナルになる問題を解決」という記事を書きましたが、Gmail がまた UI を変更したようで、メール作成時のテキストエリアが等幅で表示されなくなっていました。

ということでスタイルを直しておいたので、どうぞお持ちください。修正したのは４行目の「textarea.Ak」の「.Ak」部分です。

■ Gmail Fixed-width Font

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("mail.google.com") {
  div.ii, textarea.Ak {
    font-family: monospace !important;
    font-size: 12px !important;
  }
  div.ii p, div.ii li, div.ii table {
    font-family: sans-serif !important;
    font-size: 12px !important;
  }
}

Bingの検索結果に番号を振るスタイル「Bing Result Number」：Live Result Numberを修正

2009-09-09T12:40:00.009+09:00

以前「MSN Live Searchで検索結果に番号を振るスタイル」という記事を書きましたが、マイクロソフトの検索エンジンが Bing になってからこのスタイルが機能しなくなってしまっていました。

検索エンジンが切り替わってからけっこう経っていますが、普段は Google を使っているので気づくのが遅れてしまいました。不甲斐ないです。

ということで、「Live Result Number」を書き直して「Bing Result Number」をここで公開します。ソースは以下ですので、これをコピペしてくだされば Bing 検索結果に番号が振られるはずです。

もし Stylish のインストールから知りたいという方は「Yahoo!で検索結果に番号を振るスタイルを書いてみた」に軽く書いていますのでご参照ください。

■ ソース

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("search.live.com"), domain("search.msn.co.jp"),
domain("www.bing.com") {
  body {
    counter-reset: result !important;
  }
  div#results h3:before {
    content: counter(result) ". " !important;
    counter-increment: result !important;
    color: #000 !important;
  }
}

Gmailの広告領域を非表示にしてメッセージ領域を広げるスタイル：FirefoxアドオンStylishで

2009-07-04T23:27:00.011+09:00

こういうことってありません？

Gmail を使ってるんだけど、ディスプレイの横幅が狭いせいでメッセージがすぐ改行されて見づらいから、Google さんには申し訳ないけど、スポンサーリンク部分を非表示にしてメッセージをそこまで広げて表示したいなってこと、ありますよね？

いつものように、それを実現するスタイル「Gmail Ads-block and Full-width」を書いてみました（Firefox アドオン Stylish でしか動作確認はしていません。Stylish のインストール方法は「Yahoo!で検索結果に番号を振るスタイルを書いてみた：Firefoxのアドオン『Stylish』で」を参照ください）。

もともと、Gmail Cleaner and Tweaker という、Gmail の広告部分を非表示にしてメッセージ表示領域を広げるというスタイルがありました。ですがこのスタイル、広告非表示＆メッセージ幅拡大だけでなくいろんなところに手を出してくれていて、それが構文的にエラーを起こしてるっぽいんですね。一応そのままで動きはするんですが、なんか気持ち悪いし正直不要な部分の装飾が多かったので、

メッセージ右の広告表示領域を非表示にする
メッセージ表示領域を広告が表示されていた部分まで広げる
「別のウィンドウで開く」「すべて印刷」などのリンクは残す

という３点に絞って、Gmail Cleaner and Tweaker を書き変えてみました。若干アドホックな処置もしたのでスマートなソースになっていないかもですが、先の３点は満たされてると思います（ソースは以下）。

最近はディスプレイの性能が上がると同時に価格が下がってきていて、デスクトップでは画面の横の解像度が1400とか1600とかっていうのが普通になってるような気がしますが、一方でネットブックのようにディスプレイ幅の非常に小さい PC も大量に出回っています。僕自身もこの間ネットブックを買って、Gmail のメッセージ表示領域の狭さに愕然としました。このように狭いディスプレイで Gmail を使うような方には今回のスタイルはお役に立てるかなと思います。

ではでは、快適な Gmail の旅を！

/* This style is originally powered by "Gmail Cleaner and Tweaker" <http://userstyles.org/styles/4211>. */
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("mail.google.com") {

  /* Block the ads table in the message window */
  div.diLZtc td[class="Bu"]:first-child + div.diLZtc td[class="Bu"],
  div.diLZtc td[class="Bu"]:last-child > div > div > div:not(:first-child) {
    display: none !important;
  }

  /* Useful link, such as New window, Print all, Expand all, Collapse all, Foward all */
  td[class="Bu"]:last-child > div.nH {
    width: auto !important;
  }
  table.Bs div.hj {
    position: absolute !important;
    left: 0px !important;
    margin-top: 5px !important;
    width: 100% !important;
    text-align: center !important;
    height: 20px !important;
  }
  table.Bs div.hj > div.hk:not([style="display: none;"]) {
    display: inline !important;
    margin: 0 0.5em !important;
  }

  div .nH .if {
    margin-top: 25px !important;
  }

}

Googleで検索結果に番号を振るスタイル：スカラーでの誤作動を修正

2009-06-28T17:10:00.006+09:00

以前「Googleでも検索結果に番号を振るスタイルを書いてみた：Firefoxのアドオン「Stylish」で」という記事で Google ウェブ検索、ブック検索、スカラーの検索結果に番号を振る、Firefox アドオン Stylish 用のスタイルをご紹介しました。

それで、しばらくは問題なく使えてた（と思う）のですが、今日（2009年６月28日に）久しぶりにスカラーを使って検索してみたら表示がおかしなことになっていました。検索結果として表示されるウェブページ１つに対して１つの番号が振られるようにスタイルを書いていたのですが、なぜか１つのページに対して２つの番号が振られてしまっていたのでした。

ということで、修正版はこちらです。ご自由にお持ちください。

■ ソース

@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;
  }
}

Gmail本文を等幅フォント表示：引用部分がプロポーショナルになる問題を解決

2009-06-01T21:17:00.010+09:00

※ この記事でご紹介しているスタイルは最新版ではありません。お手数ですが、最新版は「gmail 等幅フォント」で検索を行ってお求めください。検索ツールで期間を適当に指定して、その下の「日付順」を選べば最新の記事が１番上に表示されます。

以前、「Gmail本文を等幅フォントで表示する方法：Firefoxアドオン『Stylish』で」「Gmail本文を等幅フォントで：テキストとHTMLの使いわけ問題もクリア」という記事を書きましたが、テキストメッセージであっても引用部（“>”の付いた部分）が等幅フォントで表示されないという問題があることに気付きました。

このままではまずいので、スタイルを書き直してみました。しばらくは今ので問題なく等幅フォント表示されると思います。

書き直したソースは以下です。どうぞご自由にお持ちください。

■ ソース

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("mail.google.com") {
  div.ii, textarea.dV {
    font-family: monospace !important;
    font-size: 12px !important;
  }
  div.ii p, div.ii li, div.ii table {
    font-family: sans-serif !important;
    font-size: 12px !important;
  }
}

Gmail本文を等幅フォントで：テキストとHTMLの使いわけ問題もクリア

2009-05-18T03:21:00.025+09:00

※ この記事でご紹介しているスタイルは最新版ではありません。お手数ですが、最新版は「gmail 等幅フォント」で検索を行ってお求めください。検索ツールで期間を適当に指定して、その下の「日付順」を選べば最新の記事が１番上に表示されます。

※ 2009年５月18日追記しました。

以前、「Gmail本文を等幅フォントで表示する方法：Firefoxアドオン『Stylish』で」という記事を書いて、Gmail 本文を等幅フォントで表示するスタイル「Gmail Fixed-width Font」を作ってみましたが、HTML メッセージまで等幅になってしまうという問題が残っていました。

ですが、このたびバージョンアップしまして、テキストメッセージ＝等幅フォント、HTML メッセージ＝プロポーショナルフォントとすることができました！　これで、Gmail がまたソースを変更するまでは快適なメール生活を送ることができます。

ソースは以下です。どうぞご自由にお持ちください。

■ ソース

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("mail.google.com") {
  div.ii {
    font-family: monospace !important;
    font-size: 12px !important;
  }
  div.ii div {
    font-family: sans-serif !important;
    font-size: 12px !important;
  }
}

“12px”の部分をいじれば文字サイズを大きくしたり小さくしたりできますのでお好みで変更してください。

※ 追記（May 18, 2009）

新規メール作成のときにテキストエリアも等幅フォントにしないといけないのに、すっかり忘れていました。

ということで、追記しました。

■ ソース

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("mail.google.com") {
  div.ii, textarea.dV {
    font-family: monospace !important;
    font-size: 12px !important;
  }
  div.ii div {
    font-family: sans-serif !important;
    font-size: 12px !important;
  }
}

※ 追記（May 23, 2009）

さらに追記です。

Stylish よりも Greasemonkey のほうがいいという方は、Gmailを固定ピッチの等幅フォント（MonoSpace）で表示する方法（2009年03月版） [C!]というエントリがぴったりです！

基本的にどちらも同じような表示になると思いますのでお好みでどうぞ。

Creazy さんの二番煎じになってしまったような……。

popInで設定機能が使えない＝設定できないエラーを解決する方法

2009-03-21T17:09:00.009+09:00

こういうことってありません？

Firefox のアドオン「popIn」を使ってるんだけど、なぜか最近その「設定」機能が使えなくなって不便だってこと、ありますよね？

今回は、その問題を解決する方法をご紹介します。

どうすればいい？

ウェブページ上のテキストを選択してマウスを少し動かすだけで検索他の便利な機能がさくっと使える、Firefox のアドオン「popIn」。

一時期騒がれましたし、愛用している方もけっこういるのではないかと思います。

この「popIn」、最近になって設定できないという問題に遭遇しませんでしたか？

そう、ちょうど下の画像のようになってしまい、設定するのがほぼ不可能になってしまうという現象です。

表示されるべき項目が表示されないんですね。

一応、数ピクセルだけ表示されてはいるんですが、こんなんで設定なんてできるわけがありません。

で、この問題をどう解決するかです。

実はこの問題、かの有名なアドオン「Greasemonkey（以下、グリモン）」と競合してるんですね（もしかすると他の方の環境では別の要因が絡んでるかもしれませんが、とりあえず当方の環境ではグリモンがやらかしていました）。

ということで、グリモンを無効にしてしまいましょう。

とはいっても非常に便利なグリモンをそうやすやすと無効にはしたくないですよね。

別に普段は有効にしてていいんです。

「popIn」で設定を変更したいなというときにのみ、ステータスバーにあるグリモンアイコンをクリックして無効にして、設定が完了したらまた有効にすればいいんですよ。

グリモンの無効化・有効化という余計な２つのステップが増えてしまいますが、「popIn」の設定なんてそんなに頻繁にするものでもないので、とりあえずこの解決方法で間に合うのではないかと思います。

あとは、「popIn」配布元さんに頑張ってもらうしかないですかね。

※ 追記（April 19, 2009）

記事でとりあげたエラーですが、グリモン自体が悪いというわけではないようです。

何がエラーの原因になっているのか特定しようと試みたところ、「Google Contacts Autocomplete」というスクリプトが原因であることがわかりました。

このスクリプトは、ウェブ閲覧中にメールアドレスを入力しなければならないとき、Gmail の連絡先に登録されているメールアドレスから自動補完してくれるという非常に便利なスクリプトです（ちょっと伝わりにくいかもですが）。

popIn を取るか Google Contacts Autocomplete を取るか……。両方使えればベストではありますが……。

とりあえず両方使いつつ popIn の設定の際にグリモンを一時オフにするという方向でいこうと思います。実は popIn の設定以外にも便利な機能が使えないということに最近気付いてしまいましたが……。

※ さらに追記（April 27, 2009）

バージョンアップで問題が解決したようです。これでより便利に popIn を使えます。ありがとうございます。

Gmail本文を等幅フォントで表示する方法：Firefoxアドオン「Stylish」で

2009-03-20T18:09:00.015+09:00

※ この記事でご紹介しているスタイルは最新版ではありません。お手数ですが、最新版は「gmail 等幅フォント」で検索を行ってお求めください。検索ツールで期間を適当に指定して、その下の「日付順」を選べば最新の記事が１番上に表示されます。

こういうことってありません？

Gmail を使ってるんだけど、2009年３月あたりから急に等幅フォント表示できなくなって困ってるってこと、ありますよね？

その問題を Firefox アドン「Stylish」を使って解決しようと、「Gmail Fixed-width Font」というスタイルを書いてみました。

どうすればいい？

「Stylish」のインストール後、以下のソースを書いて保存すれば完了です。

Stylish のインストール方法、スタイルの書き方についてはYahoo! で検索結果に番号を振る方法を参照ください。

ただ、今のままだと HTML メッセージも等幅フォントで読みこんじゃうんですよね。

やっぱりテキストメッセージ＝等幅フォント、HTML メッセージ＝プロポーショナルフォントってしたいじゃないですか。

ちょっと解決法を考えてみますが、どなたかうまい方法をご存じの方がいらしたらご教授ください。

■ ソース

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("mail.google.com") {
  div.ii, textarea.dV {
    font-family: monospace !important;
    font-size: 85% !important;
  }
}

「gDocsBar」の“Authorization required”エラーを防ぐ方法

2009-03-14T23:39:00.007+09:00

こういうことってありません？

Firefox のアドオンで、Google ドキュメントを非常に便利にしてくれる「gDocsBar」を使いたいんだけど、なぜかファイルを開こうとすると“Authorization required”というエラーメッセージが表示されるだけでファイルが開けないってこと、ありますよね？

この問題を解決する方法をご紹介します。

どうすればいい？

そもそも「gDocsBar」というのは、Google ドキュメントを Firefox のサイドバーで利用できるようにするものです。

単にサイドバーで利用できるだけでなく、サイドバーの右下のあたりにファイルをドラッグアンドドロップするとファイルのアップロードも簡単にできます。

こんな便利な「gDocsBar」ですが、使ってみると“Authorization required”というエラーメッセージが表示されてファイルが開けないというエラーが生じることがあります。

当方が試してみたところ、このエラーが生じるのは、フォルダにわりあてられたファイルを開こうとするときのようです。

つまり、「gDocsBar」で開きたいファイルはどのフォルダにもわりあててはならないということです。

これだけでエラーは出なくなりますが、フォルダ機能が使えないとなると不便ですよね。

とりあえず「gDocsBar」を使うときにはフォルダ機能を使わず、今後のバージョンアップで問題が解消されることを祈るしかなさそうです。

別の解決方法をご存じの方がいましたらどうぞご教授ください。

Google Readerで記事を流し読みするのにぴったりの「Google Reader autoscroll」：Greasemonkeyスクリプト

2009-02-27T01:10:00.013+09:00

こういうことってありません？

Google Reader 使ってて、さらにけっこうな数のフィードを受信してるんだけど、記事が多すぎるから List ビューにしてタイトルで詳細を読むか判断したい、しかも便利にってこと、ありますよね？

今回ご紹介するのは、「Greasemonkey」スクリプトである「Google Reader autoscroll」です（Google Reader のインターフェースが変更になったせいで一時は機能しなかったのですが、いつのまにか復活していたのでご紹介します）。

どんなツール？

Google Reader autoscroll は、Google Reader で簡単に流し読みできるようにしてくれる Greasemonkey スクリプトです。

Google Reader で List ビューにしている場合、記事のリストを下にスクロールしていっても上に流れた記事は既読になりません。

Expanded ビューにすればスクロールによって記事が自動で既読になっていくのですが、これでは読む必要のなさそうな記事の本文もすべてスクロールすることになり、時間や労力がけっこう無駄になってしまいます。

そこで登場したのがこの Google Reader autoscroll！

このスクリプトは、List ビューであってもマウスホイールでぐりぐりするだけでどんどん記事が既読になっていくというものです。

作者によるデモムービーもあります。

ということで、まずは「Greasemonkey」をインストールしましょう。

そしたら、「.crypto's devlog: Project: Google Reader autoscroll」にアクセスし、ちょっとわかりづらいですが、コメントを含めた１番下、2008 年 12 月 13 日の“.crypto's”（作者の）コメント欄にある URL からスクリプトをインストールしましょう。

あとは Google Reader にアクセスして快適な記事チェックをお楽しみください！

※ 追記（March 2, 2009）

Google Reader を便利にしてくれるアドオン「Better GReader」の「[Shit] + [Y] で選択している記事から上を既読にする」機能を使ったあと“Refresh（更新）”するとか、とりあえず全部流し読みして最後に“Mark all as read（すべて既読にする）”とかでもいいじゃないかって意見があるかもしれません。

でもですね、前者の方法では、既読にしたつもりでも既読にされない記事が多発します。結局手動で既読にするか、“Mark all as read（すべて既読にする）”を使うことになるわけです。

また、後者の方法では、流し読みを始めてから“Mark all as read（すべて既読にする）”までの間に更新された記事まで既読にしてしまうんです！　つまり、記事の見逃しが生じてしまいます。中には貴重な情報が含まれた記事もあるかもしれません。

でも、「Google Reader autoscroll」ならスクロールした分は確実に既読になるので、あとは“Refresh（更新）”すれば未読分が残ります。本当にすばらしいツールだと思います！

GoogleツールバーのChrome風の新しいタブ機能とTab Mix Plusの衝突・競合を回避して両者を共存させる方法

2009-02-01T19:43:00.028+09:00

こういうことってありません？

せっかく Google ツールバーの新しい機能“Chome 風の新しいタブ”を実装しようとしたのに、Tab Mix Plus というこれまた便利なアドオンと競合しちゃってるみたいで空白のタブしか表示されないってこと、ありますよね？

この問題を解決する方法を発見しました。

どうすればいい？

実はですね、Tab Mix Plus の「新しいタブに指定のページを表示」機能で URL に <chrome://google-toolbar/content/new-tab.html> と入力すればいいんです！超簡単ですね！

一応、順を追って説明してみます。

まずは「ツール」→「アドオン」と進み、Tab Mix Plus の設定画面を開きます。

「イベント」をクリックして「タブを開く」のタブを開きますｗ

そこで、「新しいタブに」というところで「指定のページを表示」という選択肢をプルダウンから選びます。

あとは「指定ページ」の横のテキストボックスに

chrome://google-toolbar/content/new-tab.html

と入力すれば完了です。

Google Crome 風の新しいタブをお楽しみください！

※ 追記（February 9, 2009）

この発見のヒントになったのは、「New Tab JumpStart」というアドオンでした。

実はこれまた“Chrome 風の新しいタブ”を Firefox で実現するためのアドオンです。

「New Tab JumpStart」のほうをずっと愛用してきていたのですが、どうも新しいタブを開くときの動作がもっさりしていて不満でした。

そこで本家 Google より登場したこのツールバーの機能ですが、これならタブを開く際のもっさり感がないので快適です。

ただ１つ難を言えば、新しいタブを開いたときのフォーカスがよくわからない感じになっているので、例えば URL バーとかにフォーカスが当たるようになるとより使いやすいかと思います（ちなみに「New Tab JumpStart」では URL バーにフォーカス）。

※ さらに追記（March 7, 2009）

しばらく Google ツールバーの“Crome 風タブ”機能を使ってみたところ、New Tab JumpStart 同様にタブを開くときのもっさり感がありますね。

しかも「最近登録したブックマーク」の挙動がおかしい気がします。見た感じ、これは正確には「最近アクセスした、ブックマーク登録済みのウェブページ」なんじゃないでしょうかね。

これが改善されないようなら New Tab JumpStart のほうが正直言って魅力的な気がします。

今後の Google さんに期待！

※ さらにさらに追記（July 7, 2009）

Firefox 3.5 をインストールしたら Google ツールバーが動かなかったので、入れ直しました。

それで気付いたんですが、僕が２月９日の追記で指摘した“Google の新しいタブページ”機能のプチマイナスポイントが改善されてるではありませんか！　つまり、新規タブを開くとロケーションバー（上では「URL バー」と表記）にフォーカスが行くようになっているんです。

３月７日の追記で指摘した「最近登録したブックマーク」に関しては相変わらず「最近アクセスした、ブックマーク登録済みのウェブページ」が表示されてしまうままのようですが、少しずつでもちゃんと改良されていくのはユーザとしては嬉しいものです。ブックマークのほうも早く改善されるといいんですが……。

Firefox が独自の新規タブ機能を開発中のようですし、それから、Safari 4 の新規タブは Apple らしくクールだなと思いました。“新規タブ機能”という非常に狭い領域であっても、複数の開発元が競争してくれてどんどんすばらしいアイディアが生まれていくといいですね。

MSN Live Searchで検索結果に番号を振るスタイル：Firefoxのアドオン「Stylish」で

2009-01-24T13:55:00.010+09:00

こういうことってありません？

MSN で検索したとき、目的のサイトが何位か知りたいんだけどちょっと下のほうにあって数えるの面倒臭いなってこと、ありますよね？

それを解決するために、Firefox のアドオン「Stylish」を使って検索結果に番号を振る方法を考えました。

Yahoo! で検索結果に番号を振る方法、Google で検索結果に番号を振る方法に引き続きの投稿です。

どうすればいい？

前回の投稿と同様、もともとは、「Google result number」という、Google の検索結果に番号を振るスタイルがあったわけです。

そこから、どうせなら MSN Live Search でも番号振りたいってことでスタイル書いてみました。

「Stylish」のインストール後、以下のソースを書いて保存すれば完了です。

Stylish のインストール方法、スタイルの書き方についてはYahoo! で検索結果に番号を振る方法を参照ください。

それでは、順位が一目でわかる快適な検索をお楽しみください。

■ ソース

@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でも検索結果に番号を振るスタイルを書いてみた：Firefoxのアドオン「Stylish」で

2009-01-24T13:24:00.015+09:00

※ この記事でご紹介しているスタイルは最新版ではありません。最新版は「Googleで検索結果に番号を振るスタイル：スカラーでの誤作動を修正」です（2009年６月28日）。

こういうことってありません？

Google で検索したとき、目的のサイトが何位か知りたいんだけどちょっと下のほうにあって数えるの面倒臭いな～ってこと、ありますよね？

それを解決するために、Firefox のアドオン「Stylish」を使って検索結果に番号を振る方法を考えました。

Yahoo! で検索結果に番号を振る方法に引き続きの投稿です。

どうすればいい？

前回の投稿と同様、もともとは、「Google result number」という、Google の検索結果に番号を振るスタイルがあったわけです。

でもオリジナルのスタイルでは番号にまでリンクが張られたり、ウェブ検索にしか対応してなかったりしててちょっとそのままじゃ物足りなかったんです。

ってことで、番号にはリンク張られないようにして、ブック検索とスカラーにも対応させてみました（ブログ検索はソースが汚すぎて謎なので未対応ですｗ）。

まずは「Stylish」をインストールしてください。

そしたら以下のソースを書いて保存すれば完了です！
（Stylish のインストール方法およびスタイルの書き方についてはYahoo! で検索結果に番号を振る方法を参照ください）

順位が一目でわかる快適な検索をお楽しみください。

ちなみに、MSN Live Search 版もそのうち書く予定です。

というかもう書いてるのでそのうちアップします♪

■ ソース

@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;
  }

  .w:before {
    content: counter(result) ". " !important;
    counter-increment: result !important;
    color: #000 !important;
  }
}

Yahoo!で検索結果に番号を振るスタイルを書いてみた：Firefoxのアドオン「Stylish」で

2009-01-24T12:56:00.016+09:00

こういうことってありません？

Yahoo! で検索したとき、「目的のサイトが何位か知りたいんだけどちょっと下のほうにあって数えるの面倒くさいな」「数えなくてもわかればいいのに」ってこと、ありますよね？

それを解決するために、Firefox のアドオン「Stylish」を使って検索結果に番号を振る方法を考えました。

どうすればいい？

もともと、「Google result number」という、Google の検索結果に番号を振るスタイルがあって、今回はそれをまねしてみようってことで思いついたわけです。

別のアドオン「Greasemonkey」で番号を振る方法もありますが、グリモンはけっこう重くなっちゃうんですよね。

スタイルシートいじるだけならそんなに重くならないかなって素人考えに基づいてるわけですｗ

まずは「Stylish」をインストールしてください。

Stylish のインストールが完了したら、さっそくスタイルを書きます。

ステータスバーに画像のような Stylish のアイコンが出てると思うので、それをクリック（右でも左でも）して「スタイルを書く」→「空のスタイル」と選択します。

そしたら以下のソースをコピペして保存すれば完了！

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

順位が一目でわかる快適な検索をお楽しみください。

ちなみに、Google 版と MSN Live Search 版もそのうち書く予定です。

というかもう書いてるのでそのうちアップします♪

■ ソース

@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;
  }
}