Powered by ヨクナウィネ出版

AmazonやGoogleリーダーをより見やすくするユーザーCSS

突然ですが、みなさんはAmazon.co.jpのカスタマーレビューのフォントサイズが小さいなあ!って思ったことないですか?僕はいつも無意識のうちにCtrl押しながらマウスホイールをクルクルしていました。さすがに面倒だなと思い、ブラウザ用のユーザーCSSを設定してみたら、結構いい感じです。CSS貼っておくので、よかったら使ってください。

Amazon.co.jp用のユーザーCSS

html, body, div, span, applet, 
object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, 
acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, 
samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt,
dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, 
tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, 
section, summary, time, mark, audio, video {
    font-family: 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Verdana, Arial !important;
}

table#productReviews td > div,
table.viewpointBox td > div,
div#productDescription div.productDescriptionWrapper,
div#revMHRL div.reviewText > div,
div#revMRRL div.reviewText > div,
div.crReviewHeader + table > tbody > tr > td > div {
    font-size: 130%;
    line-height: 160%;
}

Googleリーダー用のユーザーCSS

div.entry-body {
    font-size: 14px;
    line-height: 1.8em;
}

といった感じで、ユーザーCSSを設定してあげたら、結構見やすくなりました。Amazonなんかは結構謎で、ところどころフォントにMS Pゴシックを指定しているんですよね。とりあえず頭に出てきそうなタグ全てにヒラギノ、メイリオの順で指定しておきました。メイリオ派の人は順番変えてください。font-familyの行末にある "!important" は非常に重要なので消さないでください(笑)。あと、行間もデフォルトだとかなり狭いので、広めにしてあります。まあお好みで適宜調整してみてください。

ユーザーCSSのファイルは、各ブラウザのプロファイルフォルダのどこかにあるはずですが、FirefoxならStylishというアドオンから、ChromeならStylishという拡張機能から直接編集できるので便利です(おや、同じアドオンでしたね)。

ただし、FirefoxのStylishアドオンで利用するときは、次のコードで囲んでください。Chrome版のときは、適用先という欄があるのでそこにURLを書いてから保存してください。

@-moz-document url-prefix("http://www.amazon.co.jp/"),
               url-prefix("https://www.amazon.co.jp/") { 

/* url-prefix("URL") という形式でURLを書くと、それを含むページに適用されます。
   url("URL") で完全一致、 domain("hogehoge.com") でドメイン指定ができます。

   ここに上記のCSSを挿入してください。 */

}

追記(2013年9月5日)

Amazonのレビューページのコードに変更があったようなので、若干の修正を加えました。
そして、Google Readerは気がつけば終了してしまいましたね…。

買い物しようよ!

コメントを書き込む

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

コメント

おや、コメントがまだありません。