CSS本文はこちらです。
* {
font-family: "游ゴシック体", "Yu Gothic", YuGothic !important;
font-weight: 500 !important;
}
しかしこちらを指定してもamazon検索結果ページ(http://goo.gl/8BjvnG)では font-weightが上手く適用されず、書籍名などは指定した太さではなく、標準の太さになってしまいます。
上手く font-weightを適用させる方法はないでしょうか。
方法をご存じの方がおりましたら、ご教授願います。
よろしくお願い致します。
・stylishの設定で適用先が検索結果画面にもマッチするものか確認する。ドメイン上のURLで amazon.co.jp
実際にstylishで動作確認してみたところ、ぱっとは適用されず、一旦リロードしたりすると適用されました。
Firefox の Stylish で試してみたんですが、全称セレクタ (*) がきちんと効かないみたいです。
同じ意味にはなりませんが、ほとんどの要素には class 属性が付いているので、属性セレクタで class を指定すると全ての文字に指定が効いている感じです。
@-moz-document domain("amazon.co.jp") { /* ★これ */ [class] { font-family: "游ゴシック体", "Yu Gothic", YuGothic !important; font-weight: 500 !important; /* color: yellow !important; テスト用。まっ黄色になります */ } }
Firefox の Stylish で試してみたんですが、全称セレクタ (*) がきちんと効かないみたいです。
質問にあるページで読み込まれている外部スタイルシートにこんなのがあります。
http://z-ecx.images-amazon.com/images/G/01/AUIClients/AmazonUI-e6d8c1a1479b4ee222c80ab0847b45bdb546bab8._V2_.css#AUIClients/AmazonUI.jp.rendering_engine-not-trident.min
そこには、このような記載があります。
.a-text-normal { font-weight: 400 !important; font-style: normal !important; text-transform: none !important; text-decoration: none !important; }
書籍名などは H2 要素なのですが、class に a-text-normal が指定されています。
font-weight に !important がついているので、Stylish でユニバーサルセレクタで !important をつけても、ユニバーサルセレクタよりもクラス指定のセレクタの方が詳細度が大きいのでクラス指定の font-weight: 400 が採用される、ということが原因です。
以下、参考。
https://developer.mozilla.org/ja/docs/Web/CSS/Specificity#Crescent_order_of_specificity
コメント(0件)