2009年にお世話になった16のStylishスタイル

Posted at 23:00 on January 4, 2010

Last updated at 15:46 on January 11, 2010

Tags: Amazon, Firefox, Google, Microsoft, SEO, Web, Yahoo!, ツール, デザイン, パソコン, ブラウザ, ライフハック, 備忘録, 非記事紹介

年も明けまして、2009年にお世話になった Stylish のスタイルでもご紹介しようかと思います。

内容はこんな感じです。

検索エンジン関連
1. Google の検索結果に番号を振る
2. Yahoo! の検索結果に番号を振る
3. Bing の検索結果に番号を振る
検索以外の Google サービス関連
1. Gmail を等幅フォントで表示する
2. Gmail の広告を非表示にしてメッセージ領域を広げる
3. Gmail で未読メールの件名をボールド（太字）にしない
4. Google Reader の余計な部分を省いてすっきり表示にする
5. Google Reader のリスト表示で、マウスオーバーで背景色を変更する
6. Google Reader のリスト表示で、未読タイトルをボールド（太字）にしない
7. Google Calendar の土日の色を変更する
8. Google Maps の表示領域を広げすぎる
9. Google のサービスで表示されるメニューバーを小さく表示する
ウェブページ一般関連
1. グリモン AutoPagerize のページ区切りをデザインする
2. フォーカスの当たっているフォーム要素を強調する
3. Nofollow リンクを強調する
4. Amazon Associate のリンクを強調する

検索エンジン関連

検索エンジンの検索結果に番号を振る系の機能は Greasemonkey といった JavaScript などでも代替可能なのでお好みでどうぞ。

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

» ライフハック・便利ツール紹介野郎: Googleで検索結果に番号を振るスタイル：スカラーでの誤作動を修正

» Google Result Number (Multi-service) | userstyles.org

Google の検索結果に番号を振ります。2010年１月４日現在、日本（google.co.jp）と本家（google.com）のウェブ検索、ブック検索、スカラーに対応しています。

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

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

» Yahoo! Result Number | userstyles.org

Yahoo! の検索結果に番号を振ります。2010年１月４日現在、日本（yahoo.co.jp）と本家（yahoo.com）に対応しています。

Bing の検索結果に番号を振る

» ライフハック・便利ツール紹介野郎: Bingの検索結果に番号を振るスタイル「Bing Result Number」：Live Result Numberを修正

» Bing Result Number | userstyles.org

Bing の検索結果に番号を振ります。

▲上に戻る▲

検索以外の Google サービス関連

Gmail、Google Reader など、Google が提供するさまざまなサービスを便利にするスタイルです。Google サービスのユーザ向けです。

Gmail を等幅フォントで表示する

» ライフハック・便利ツール紹介野郎: Gmailを等幅フォント表示にするStylishのスタイル – Oct. 23, 2009版

» Gmail Fixed-width Font | userstyles.org

テキストメッセージは等幅フォントで、HTML メッセージはプロポーショナルフォントで表示されます。

Gmail の広告を非表示にしてメッセージ領域を広げる

» ライフハック・便利ツール紹介野郎: Gmailの広告領域を非表示にしてメッセージ領域を広げるスタイル：FirefoxアドオンStylishで

» Gmail Ads-block and Full-width | userstyles.org

Gmail のメッセージ領域の右側にある広告を非表示にして、メッセージ領域をそこまで広げます。ディスプレイの小さいネットブックなんかでは重宝するかと思います。

Gmail で未読メールの件名をボールド（太字）にしない

» Gmail Subject No-bold | userstyles.org

Gmail のメール一覧で件名を通常の太さで表示します。太字でなくなる分、少しだけ情報量が増えます。

Google Reader の余計な部分を省いてすっきり表示にする

» Clean Google Reader | userstyles.org

Google Reader がコンパクトになります。現バージョンでは、一部のドロップダウンメニューが使えなくなってしまいます。

Google Reader のリスト表示で、マウスオーバーで背景色を変更する

» GReader Highlight Row | userstyles.org

Firefox アドオンの Better Gmail が備えるハイライト機能もどきを Google Reader でも可能にします。

Google Reader のリスト表示で、未読タイトルをボールド（太字）にしない

» GReader Title No-bold | userstyles.org

Google Reader で未読の記事タイトルを普通の太さで表示します。ちょっとだけ情報量が増えます。

Google Calendar の土日の色を変更する

» Google Calendar – Colorize Weekends (Mon-Sun) | userstyles.org

Google Calendar の土曜を青、日曜を赤で表示します。これは週が月曜開始になっている人用です。日曜開始はこちら。

Google Maps の表示領域を広げすぎる

» Google Maps – Full Screen (Updated 12. August ‘08) | userstyles.org

Google Maps のヘッダー領域、サイドバー領域をなくし、地図の表示領域をほぼ限界まで広げます。僕は、サイドバーを使いたいときには Stylish で無効にしています。

Google のサービスで表示されるメニューバーを小さく表示する

» Google Compact Gbar | userstyles.org

Google のサービスの上部に表示されている「Gmail Calendar Documents…」みたいなメニューバーを小さく表示します。少しだけ画面が有効に使えるようになります。

▲上に戻る▲

ウェブページ一般関連

特定のウェブページでなく、すべてのウェブページに共通して使えるスタイルです。地味に役立つと思います。

グリモン AutoPagerize のページ区切りをデザインする

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

AutoPagerize の素っ気ないページ区切りをお好みのデザインにします。僕はオリジナルのものをちょっと修正して以下の CSS を使っています。

@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; /* 自分で追加 */
}

フォーカスの当たっているフォーム要素を強調する

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

ウェブページのフォームでフォーカスの当たっている要素を強調します。Google Chrome にはデフォルトで似たような機能が付いていますね。

Nofollow リンクを強調する

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

“rel="nofollow"”という属性の付いたリンクを強調します。SEO に関心がある人向けです。僕はちょっとだけ修正して以下の CSS を使っています。

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

Amazon Associate のリンクを強調する

» Amazon Associate Check | userstyles.org

Amazon Associate のリンクを強調します。普通のリンクの中に Amazon へのリンクを混ぜてあるとちょっとだけげんなりするという方向けです。Amazon Associate のリンクでないのに強調してしまうという誤爆が多々発生しますｗ

以上です。2010年もお世話になります。

▲上に戻る▲

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

« 前の記事：2009年にお世話になった17のGreasemonkeyスクリプト

「きにきじ」：今日の気になる記事