• 文字サイズ


解決済

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

  • 相談者:非公開
  • 2020/03/25 11:50
いつも大変お世話になっております。
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を優先させる方法はありませんか?

よろしくお願い致します。
キーワード:CSSフリースペース
投稿内容について報告する

今気になってる疑問、
セミナーに参加すれば解決するかも!?
日本全国のネットショップ12,000社が参加!
ネットショップでお悩みがある方はまずはオンラインセミナーへGO!
広告0円で楽天の売上アップ続出!
ECマスターズチャンネルをチェック!
総視聴回数15万回突破!
最新の対策事例やSALE対策など、売上にお困りの方はぜひご視聴ください!

  • 返信者:非公開
  • 2020/03/25 12:29
ECマスターズの伊藤です。

> store.convert2.1.cssを無効化もしくはstore.convert2.1.cssで指定している
> po………(省略)………
  • 返信者:非公開(質問者)
  • 2020/03/25 13:02
ECマスターズ
伊藤様

ご返信ありがとうございます。
早速「投稿内容について報告する」よりURLを送らせて頂きました。

よろしくお願い致します。………(省略)………
  • 返信者:非公開
  • 2020/03/25 14:00
ECマスターズの伊藤です。

URLのご連絡ありがとうございました。

CSSには、スタイルの優先順位があり、
たとえば

<p class="w………(省略)………
  • 返信者:非公開(質問者)
  • 2020/03/26 12:40
伊藤様

ありがとうございます。
classを指定して試してみます。

また結果を書きます。………(省略)………
このフォーラムへの質問は終了しました