YAHOOのフリースペースについて

Question

いつも大変お世話になっております。
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を優先させる方法はありませんか？

よろしくお願い致します。

Answer

ECマスターズの伊藤です。

> store.convert2.1.cssを無効化もしくはstore.convert2.1.cssで指定している
> position、marginよりもこちらが設定したCSSを優先させる方法はありませんか？

実際の構成を拝見したいので、
URLをご連絡いただけますでしょうか。

フォーラムへのご投稿が難しい場合は、
一番最初の投稿の右下にございます
「投稿内容について報告する」より
お知らせいただきますようお願いします。

Answer

ECマスターズ
伊藤様

ご返信ありがとうございます。
早速「投稿内容について報告する」よりURLを送らせて頂きました。

よろしくお願い致します。

Answer

ECマスターズの伊藤です。

URLのご連絡ありがとうございました。

CSSには、スタイルの優先順位があり、
たとえば

texttext

p{margin:10px}
p.wordb{margin:50px}

の場合、より指定が多い
p.wordb{margin:50px}
が優先されます。

上記方法を利用し
.mdFreeSpaceConvert .elConvert p
より優先されるよう
.mdFreeSpaceConvert .elConvert p.wordb
といった形で、classを指定していただき、

更に、!importantが付与されているものが
最優先となりますので

.mdFreeSpaceConvert .elConvert p.wordb{
    margin:10px!important;
}

のように、!importantを付与することで、
store.convert2.1.css
よりも優先されるスタイルを
指定いただくことができますので、
お試しくださいませ。

Answer

伊藤様

ありがとうございます。
classを指定して試してみます。

また結果を書きます。