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

スポンサーサイト

  • このエントリーをはてなブックマークに追加
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

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

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

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




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

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

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

Amazon、Yahoo!、楽天市場 の個別商品ページに価格.comの最安値を表示する 最安値チェッカー 1.4




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

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

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

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

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



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

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

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

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



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

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



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

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

domain("rakuten.co.jp")で楽天市場のドメインを追加し、「最安値チェッカー 1.4」の表示エリアを敢えて目立つような背景色を指定しました。 わからないときはコピペしてください。



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

記入したら保存をクリックして終了です。



アマゾン、楽天市場での表示エリアの背景色が変更されます
アマゾン

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




楽天市場

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





インストールページ

関連記事
-0 comments
管理者にだけ表示を許可する
-0 trackbacks