(cache) Stylishでブラウザ表示の一部を変えて自分好みにしたい！

Stylishでブラウザ表示の一部を変えて自分好みにしたい！

2012-03-05 userstyles ユーザースタイル ,

Stylishでブラウザ表示の一部を変えて自分好みにしたい！ドラゴンフラッグという腹筋を週一で取り入れたいと思ったけどきついのでリバースクランチを日課に取り入れている管理人です。

私は特別なWebサイト以外のブラウザ表示は基本そのままにしていますが、どうしても気になる部分だけ「Stylish」を使い自分好みに見易くしています。

そこで今回は、Stylishでブラウザ表示の一部を変えて自分好みにしたい！と題し、先週紹介したお気に入りのFirefoxアドオンの「最安値チェッカー」の表示背景を「Stylish」を使い変更する方法を紹介します。

Stylishでブラウザ表示の一部を変えて自分好みにしたい！

今回の目的は、Firefoxアドオンの「最安値チェッカー」で表示された価格の部分が見づらいと感じたので、Firefoxアドオンの「Stylish」を使い その部分の背景色を変えて「最安値チェッカー」で表示される部分を見易くしたい と思いました。

「最安値チェッカー 1.4」は、Amazon、Yahoo!、楽天市場の個別商品ページに価格.com、coneco.net の最安値を表示するアドオンです。
「Amazon、Yahoo!、楽天市場の個別商品ページに価格.comの最安値を表示する最安値チェッカー 1.4」

ブラウザ表示の一部を自分好みに変更する

※ 上記画像は「最安値チェッカー 1.4」の表示エリアを分かりやすく赤枠で囲ってあります。

「最安値チェッカー 1.4」を使用すると Amazon などで個別商品ページを表示すると価格.com の最安値を表示するようになりますが、個人的には同系色で見づらいと感じていました。

Firefoxアドオンの「Stylish」を使ってブラウザ表示を変更するにはスタイルシートで記述する必要があるので、変更したい箇所の "HTMLタグ、class名、ID名" を知る必要があります。

HTMLタグ、class名、ID名を調べる

"HTMLタグ、class名、ID名" を調べるには変更したい表示エリア辺りでコンテキストメニュー(右クリック)を開き、"要素を調査" をクリックして Firefox 10 から導入されたインスペクタを使用します。

「アドオンの互換性を改善した Firefox の最新版公開 - インスペクタなど便利な Web 開発者向けツールも搭載 | Mozilla Japan ブログ」

Stylishでブラウザ表示の一部を変えて自分好みにしたい！

Firefox 10 から導入されたインスペクタで「最安値チェッカー 1.4」の表示エリアは、HTMLタグの div タグを使い ID名が LowestPriceChecker_wrap だということが分かります。

Stylish に背景色を変更するスタイルシートを書く

ID名を知ることができたので「Stylish」に「最安値チェッカー 1.4」の表示エリアの背景色を変更するスタイルシートを書きます。

「Stylish」ボタンをクリックして、"新しいスタイルを書く" ▶ "amazon.co.jp 専用..." でドメイン指定を選択するとスタイルシートを書き込むダイアログが表示されます。

Stylishでブラウザ表示の一部を変えて自分好みにしたい！

名前は自由に記入して、スタイルシートを以下のように書きます。

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

@-moz-document domain("amazon.co.jp"), domain("rakuten.co.jp") {

#LowestPriceChecker_wrap {
margin: 1.5em 0;
border: 1px solid #ff66cc;
background-color: #fdeff2;
}

}