stylishで指定しているフォント指定のCSSが、amazonの検索結果画面(http://goo.gl/8BjvnG)にて上手く反映されません


 CSS本文はこちらです。
* {
font-family: "游ゴシック体", "Yu Gothic", YuGothic !important;
font-weight: 500 !important;
}
 しかしこちらを指定してもamazon検索結果ページ(http://goo.gl/8BjvnG)では font-weightが上手く適用されず、書籍名などは指定した太さではなく、標準の太さになってしまいます。

 上手く font-weightを適用させる方法はないでしょうか。
 方法をご存じの方がおりましたら、ご教授願います。
 よろしくお願い致します。

回答の条件
  • 1人1回まで
  • 登録:
  • 終了:2016/02/28 14:25:03
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。
id:FLine

ブラウザはGoogle Chromeを使用しています。

回答2件)

id:Cherenkov No.1

回答回数1504ベストアンサー獲得回数493

ポイント100pt

・stylishの設定で適用先が検索結果画面にもマッチするものか確認する。ドメイン上のURLで amazon.co.jp

実際にstylishで動作確認してみたところ、ぱっとは適用されず、一旦リロードしたりすると適用されました。

id:a-kuma3 No.2

回答回数4974ベストアンサー獲得回数2154

ポイント100pt

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

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません