• 文字サイズ


質問中

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フリースペース
投稿内容について報告する
楽天スーパーSALEで売上アップ!
今年4月から毎週オンラインにて開催し、これまでに1300社以上が参加された 90分で学べる楽天集客対策セミナーを11月27日(金)に開催します。 初めての参加で満足できるか不安な方には返金保証もお付けしております。 ぜひこの機会にご参加ください。

  • 返信者:非公開
  • 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を指定して試してみます。

また結果を書きます。………(省略)………