[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

いいねをした人：

[inc2734]

入れ子にしないと発生しないのでよくはわからなかったのですが、どうも CSS の仕様っちゃ仕様なのかな？という感じでした。

これ折り返しが有効になっているときだけ発生するみたいなんですけど、折り返しは CSS 的には flex-wrap: wrap で、横並びのときは縦に折り返すけど、縦並びのときは横に折り返す、ということになるから、条件が重なると折り返しちゃって横にはみ出す、みたいな感じみたいでした。

なので、縦並びになっているときは強制的に flex-wrap: nowrap !important になるように修正してみました。v18.5.0 にアップデートして確認してみてください！

♥ 0

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

[inc2734]

いずれもフレックスボックスで、ボタンの方向を変えるのは flex-direction で軸を変えるということになるので、その辺りでフレックスボックス関連のプロパティが干渉するのだろうなという気がします。

調査します！

♥ 0

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

[inc2734]

v18.4.0 にアップデートして確認をお願いします！

♥ 0

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

[inc2734]

あれ！ほんとですね、ご報告ありがとうございます。修正入れます！

♥ 0

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

[inc2734]

これはちょっと気になるかも…

♥ 0

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

[inc2734]

下層ページが 404 になっているみたいです。

HP公開しました。 | 沖縄国際動物医療センター – 那覇市仲井真に6月オープン予定の動物病院です

開院に向けてWebサイト準備中でございます。 当院は、2025年6月の開院を目指し、現在鋭意準備を進めております。 開院に関するお知らせにつきましては、当ウェブサイトは…

www.okinawa-ah.jp

未分類 | 沖縄国際動物医療センター – 那覇市仲井真に6月オープン予定の動物病院です

沖縄国際動物医療センターは、2025年6月に沖縄県那覇市仲井真にオープンする動物病院です。来院する動物たちを自分のペットや家族と同様に考え、心を込めた質の高い動物医…

www.okinawa-ah.jp

REST API のエンドポイントも 404 になっていました。

なので 404 が解決すれば認証の問題も解決しそうな気がします。なにか 404 になりそうな心当たりはありますか？ プラグインやパーマリンクの問題では無さそうだったので、サーバー側かもしれません。

♥ 0

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

[投稿者]

投稿