人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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を適用させる方法はないでしょうか。
方法をご存じの方がおりましたら、ご教授願います。
よろしくお願い致します。



●質問者: サード
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

質問者から

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


1 ● Cherenkov
●100ポイント

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

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


2 ● a-kuma3
●100ポイント

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.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ