[uni]

【お使いの unitone のバージョン】18.5.0
【お使いのブラウザ】Arc/Chrome
【当該サイトのURL】https://www.beluga-ah.jp/

### 発生している問題

バージョンアップ以降に追加したdecoratorブロックやdivブロックに追加CSSを記述したのですが、それが適用されません。

たとえば追加CSSで

& {
background-color:#000;
color:#fff;
}

と記述すると、編集画面では黒背景・白文字になりますが実際のページでは無背景色・通常の文字色になってしまいます。

### 試したこと

バージョンアップ以前に追加したdecoratorブロックに記述していた追加CSSを変更した場合は正しく反映されました。

♥ 0

いいねをした人： いません

[inc2734]

サイトを拝見して追加されている 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;
}

をそのままコピペしたらエディター上でも実際の画面でも反映されました。

♥ 1

いいねをした人：

[inc2734]

あ、メディアクエリの入れ子には対応できていませんが、下記のような形ならメディアクエリも効かせることができるようでした。

& {
 background-color:#000;
}

@media (max-width: 600px) {
  & {
    background-color: purple;
  }
}

♥ 1

いいねをした人：

[uni]

お世話になっております。

お忙しいところご確認いただきありがとうございます。
再度見直してみたところ、一部の追加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も管理できるようになったため開発体験が向上しました。
素晴らしい機能の実装ありがとうございます。

♥ 1

いいねをした人：

[inc2734]

解決してよかったです！ 一点追記です。

これはちゃんと出力されるのですが、

& {
 background-color:#000;
}

@media (max-width: 600px) {
  & {
    background-color: purple;
  }
}

これだとだめみたいです。（& で始まっていないから）

@media (max-width: 600px) {
  & {
    background-color: purple;
  }
}

& {
 background-color:#000;
}

ぱっと直すのは難しそうなので、おいおい改善します…

♥ 0

いいねをした人： いません

[投稿者]

投稿