いつも大変お世話になっております。
FUJIです。
よろしくお願い致します。
YAHOOのフリースペースについてご教授いただければありがたいです。
PC用フリースペースとスマホ用フリースペースがありますよね。
PC用フリースペースは外部CSS可能
スマホ用フリースペースはインライン(style="~")のみ可能
PC用フリースペースが入力されておりスマホ用フリースペースが入力されていない時、
スマホ商品ページの「商品情報をもっと見る」が「詳しく見る」になり、
スマホ用商品ページの商品商材情報にPC用フリースペースが表示される仕様ということを知りました。
いままで、スマホ用のフリースペースを入力していましたが、外部CSSで制御したかったので上記のスマホ用フリースペースに入力せず、PC用フリースペースのみ入力し外部CSSでメディアクエリを使って、スマホ表示時とPC表示時でスタイルを分ければいいかと思い試しました。
結果、メディアクエリのCSSは、YAHOOのスマホ用にコンバートするCSSに邪魔されました。
store.convert2.1.cssというファイルで下記のようなCSS(一部)が!importantで優先されました。
.mdFreeSpaceConvert .elConvert p {
box-sizing: border-box !important;
position: static !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
overflow-y: visible !important;
background-position: 0 0 !important;
font-size: 12px !important;
font-family: inherit !important;
}
position、margin、paddingやfont-sizeなど制御したい部分が邪魔されてしまいます。
ブラウザのデベロッパーモードでstore.convert2.1.cssの対象のCSSを解除すれば、
こちらが指定したCSSが適用されました。
そこで質問です。
store.convert2.1.cssを無効化もしくはstore.convert2.1.cssで指定している
position、marginよりもこちらが設定したCSSを優先させる方法はありませんか?
よろしくお願い致します。