- このトピックには4件の返信、2人の参加者があり、最後に
により4日、 11時間前に更新されました。
4件の投稿を表示中 – 1 – 4件目 (全4件中)
-
サイトを拝見して追加されている CSS を抽出してみました。
[data-unitone-instance-id="ab1b64a4-decb-4354-b4c6-2db2d3660f24"] { @media (min-width:600px) { display:flex; gap: var(--unitone--s2); flex-wrap:nowrap; } } [data-unitone-instance-id="ab1b64a4-decb-4354-b4c6-2db2d3660f24"]::after { @media (min-width:600px) { content:""; width:2px; height:100%; background-color:var(--unitone--color--text); } } [data-unitone-instance-id="3182bfc8-522e-4d8d-9c85-16dfa68eb9d7"] { @media (min-width:600px) { transition:.2s ease-out; } } [data-unitone-instance-id="3182bfc8-522e-4d8d-9c85-16dfa68eb9d7"]:hover { @media (min-width:600px) { background-color:var(--unitone--color--accent__pale); } } [data-unitone-instance-id="1e30c348-fb1c-4188-8ad3-35412387830d"]::before { content: "; position: absolute; top: 23px; left: -18px; width: 60px; height: 60px; background: -webkit-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%); background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) } [data-unitone-instance-id="4a9845bc-59d1-4818-a299-9880e46dca6b"] { @media (min-width:600px) { padding-left: var(--unitone--global--gutters); padding-right: var(--unitone--global--gutters); } } [data-unitone-instance-id="4a9845bc-59d1-4818-a299-9880e46dca6b"] .unitone-grid { @media (max-width:599px) { --unitone--gap: var(--unitone--s-1) !important; } } [data-unitone-instance-id="4a9845bc-59d1-4818-a299-9880e46dca6b"] { @media (min-width:600px) { padding-left: var(--unitone--global--gutters); padding-right: var(--unitone--global--gutters); } } [data-unitone-instance-id="4a9845bc-59d1-4818-a299-9880e46dca6b"] .unitone-grid { @media (max-width:599px) { --unitone--gap: var(--unitone--s-1) !important; } } [data-unitone-instance-id="f39ef671-6664-44bb-86a8-68353e9b8d1d"] .unitone-section, [data-unitone-instance-id="f39ef671-6664-44bb-86a8-68353e9b8d1d"] .unitone-section>[data-unitone-layout="gutters"], [data-unitone-instance-id="f39ef671-6664-44bb-86a8-68353e9b8d1d"] .unitone-section>[data-unitone-layout="gutters"]>[data-unitone-layout="container"] { height: 100%; } [data-unitone-instance-id="2bf8a8c5-91c9-4658-873d-d56943b5080e"] .recruit-layer__body { transition: .2s ease-out; } [data-unitone-instance-id="2bf8a8c5-91c9-4658-873d-d56943b5080e"]::hover .recruit-layer__body { background-color: var(--unitone--color--dimmed-light) !important; } [data-unitone-instance-id="e4264c2e-024f-448c-b5da-b03431778815"] { border-radius: var(--radius-m); overflow: hidden; } [data-unitone-instance-id="e4264c2e-024f-448c-b5da-b03431778815"] iframe { display: block; width: 100%; @media (min-width: 1024px) { height: 100%; } }こういう感じで出力されていて、メディアクエリが入れ子になっていました。
この追加 CSS は「
&から始まらないといけない」という仕様になっていて、メディアクエリは CSS の仕様的には外に出さないといけないので、現状メディアクエリの入れ子には対応できていません…（将来的には対応したいなーと思っていますがやり方がわからず…）。なので、そういうのが影響して適用されないのかもしれません。
一応このサイトでテストページを作り、デコレーターブロックに
& { background-color:#000; color:#fff; }をそのままコピペしたらエディター上でも実際の画面でも反映されました。
いいねをした人：あ、メディアクエリの入れ子には対応できていませんが、下記のような形ならメディアクエリも効かせることができるようでした。
& { background-color:#000; } @media (max-width: 600px) { & { background-color: purple; } }いいねをした人：お世話になっております。
お忙しいところご確認いただきありがとうございます。
再度見直してみたところ、一部の追加CSSの記述が間違っていた（閉じ括弧の欠落）ためそれ以降のブロックの追加CSSが適用されなかったようです。[data-unitone-instance-id="1e30c348-fb1c-4188-8ad3-35412387830d"]::before { content: "; position: absolute; top: 23px; left: -18px; width: 60px; height: 60px; background: -webkit-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%); background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) }このbackgroundを
background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65));に直したところ無事適用されました。
お手数おかけしてしまい申し訳ございませんでした。メディアクエリに関する補足もありがとうございます。その記述方法で活用させていただいております。
編集画面でCSSも管理できるようになったため開発体験が向上しました。
素晴らしい機能の実装ありがとうございます。いいねをした人：
4件の投稿を表示中 – 1 – 4件目 (全4件中)
- トピック「decoratorブロックの追加CSSが適用されない」には新しい返信をつけることはできません。
