[inc2734]

v19.2.0 にアップデートして確認してみてください！

♥ 20

いいねをした人：

[inc2734]

あーどうも「流体タイポグラフィ」を有効化すると、干渉して、読み込み順によっては「流体タイポグラフィ」がデフォルトで持っているフォントサイズのほうが優先されてしまい、小さくなってしまうということがおこりえるみたいです。

僕の環境だと「流体タイポグラフィ」の CSS が先に読まれるから上書きされて小さくならなかったみたいです。流体タイポグラフィの CSS を弱める変更を入れようと思います。できたらまた書き込みます！

♥ 7

いいねをした人：

[inc2734]

僕の開発環境でテストしてみました。

↓の画像の上側が 100px のカスタムフォントサイズ、下側が 50px〜100px のカスタムフルード値を設定したものです。

ちゃんと反映されていて、HTML 上に下記の CSS が出力されていました。

--wp--preset--font-size--custom-1: 100px;
--wp--preset--font-size--custom-2: clamp(50px, 3.125rem +((1vw - 3.2px)* 4.931), 100px);

公開側の画面で適用されなくなったということは、何らかの CSS で上書きされてしまっているか、何らかの原因で上記のような CSS が出力されなくなっている可能性があるのかなと思います。その辺確認してみてください！

もし URL を共有いただけるならこっちでも見てみます。

♥ 5

いいねをした人：

[inc2734]

僕の環境だと、下記の画像のようにフォーム自体は横いっぱいに広がります。

が、テキストフィールドやテキストエリアはデフォルトが幅100%ではないため、フォームの幅までは広がりませんでした。Contact Form 7 に詳しくないのでどう調整するのがベストかはわからないのですが、Contact Form 7 にテキストフィールドやテキストエリアのサイズを設定する項目があればそれで設定、なければ CSS で width: 100% を追加する、のようなカスタマイズが必要になるのかなと思います。

そもそもフォーム自体も横いっぱいに広がらないということであれば、使っているテンプレートとか追加している CSS が影響しているとか色々可能性が考えられるので、実際のページの URL をここで共有して直接見せていただければと思います。

♥ 1

いいねをした人：

[inc2734]

デコレーターブロックで囲って、デコレーターブロックを全幅にするとどうでしょうか？

♥ 0

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

[inc2734]

v19.0.0 にアップデートして確認してみてください！

unitone v19.0.0 をリリースしました

unitone v19.0.0 の概要 機能追加 スペーシングサイズプリセットに、モバイルでは M になるサイ…

unitone.2inc.org

♥ 0

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

[inc2734]

v19.0.0 にアップデートして確認してみてください！

unitone v19.0.0 をリリースしました

unitone v19.0.0 の概要 機能追加 スペーシングサイズプリセットに、モバイルでは M になるサイ…

unitone.2inc.org

♥ 0

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

[inc2734]

これも次のアップデートで入れれそうなのでしばしお待ちを…！今日か明日にはリリース予定です。

♥ 0

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

[inc2734]

これは僕も思うときがあるのですが、やり方がわからないもので…😭

♥ 0

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

[inc2734]

一応、Snow Monkey Blocks のタブブロックはその動作に対応しています。のでそっちを使ってみるのも良いかもしれません。

参考：

Snow Monkey Blocksの「タブ」ブロックにHTMLアンカーをつけたい！高度な設定に[HTMLアンカー]の項目を追加して欲しいです。

このトピックには16件の返信、2人の参加者があり、最後にTarCoon☆CarToonにより6ヶ月、 2週前に…

snow-monkey.2inc.org

ただ、Snow Monkey Blocks のタブブロックは開発したのが結構前で、当時の WordPress で動作させるために今となっては実装が複雑になっているので、使いにくかったり、なんか挙動が怪しいということはありえます…。

unitone のタブブロックは最新の WordPress に対応した実装（Intaractivity API）をしているので、それで
KaoruDesign さんの書かれたコードと相性がわるくて動かない、というのはあるかもしれません。

♥ 1

いいねをした人：

[inc2734]

めちゃ助かります、ありがとうございます！
そして現象確認できました。干渉ではなく不具合でした。
明日か明後日、WordPress 6.8 対応版のリリースを予定しているので、それに入れ込みたいと思います。

♥ 0

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

[inc2734]

ご報告ありがとうございます！これ他の設定との干渉の可能性も無いことは無い気がするので、良かったらそのレイヤーブロックをコピーして、ここに貼り付けてもらえないでしょうか？

♥ 0

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

[inc2734]

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

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

& {
 background-color:#000;
}

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

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

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

& {
 background-color:#000;
}

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

♥ 0

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

[inc2734]

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

& {
 background-color:#000;
}

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

♥ 1

いいねをした人：

[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

いいねをした人：

[投稿者]

投稿