[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

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

[inc2734]

すみません、うまくいかないというのは、認証に失敗してしまうということでしょうか？それともこのコードがシンタックスエラーとかになってしまうということでしょうか？

もし認証に…ということであれば、$license_key =... の下の行に var_dump( $license_key ); を追加していただいて、ライセンスキーに不要な文字（前後の空白等）が紛れていないか念の為確認をお願いします。

もしそれも問題なさそうであれば、可能であれば直接環境を調査させていただきたいです。ご検討よろしくお願いいたします！

♥ 0

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

[inc2734]

サーバー側で10分、テーマ側でも1日キャッシュするようにしていました！なのでテーマ側でキャッシュを削除してどうなるか試していただきたいです。

wp-content/themes/unitone/functions.php の 最終行に下記のコードを足してください。

$license_key    = \Unitone\App\Controller\Manager\Manager::get_setting( 'license-key' );
$transient_name = 'unitone-license-status-' . $license_key;
delete_transient( $transient_name );

そして認証をしたらどうなるか試してみてください。試したあとは上記のコードは消してください。

♥ 0

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

[inc2734]

unitone 公式サイトと REST API 通信ができれば大丈夫なので、ベーシック認証が直接の問題になる可能性は低いのかな？と思うのですが、例えば公式サイトがプラグインのアップデートで一時的に通信できない状態になっているタイミングだったりすると、認証が通らない可能性はあります。

認証状態は現状10分キャッシュするようになっているので、10分おいてからもう一度認証してみてください！すでに10分たっているけど認証が通らないということであれば改めて調査します。

♥ 0

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

[inc2734]

v18.3.1 で修正を入れてみましたがどうでしょうか？

♥ 0

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

[inc2734]

わーこちらこそ申し訳ありません(TT)
コードをぱっとみた感じではおかしいところがわからなかったので詳しく調べてみます。また報告します！

♥ 1

いいねをした人：

[inc2734]

検証ありがとうございます！はい、次のリリースに含めますので、そのまま使用されて大丈夫です。

♥ 0

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

[投稿者]

投稿