Cocoonフォーラム

2018-02-102023-01-25

書き込みの前に以下の3点をご確認ください。

1つのトピックにつき1つの質問を書き込んでください
不具合・カスタマイズ対象ページのURLを提示し高速化を無効にしてください
該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL：

相談内容：

不具合の発生手順：

解決のために試したこと：

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

共有:

通知

すべてクリア

[解決済] CSSが効かなくなった

Cocoonテーマに関する質問

最新の投稿 : seven627 2週間前

4 投稿

3 ユーザー

3 Likes

48 表示

RSS

seven627

(@seven627)

Active Member Registered

結合: 12か月前

投稿: 7

Topic starter 2024-05-08 23:03

こんにちわ。

以前教えてもらったPCとスマホのサムネサイズを変更するCSSがCOCOONをアプデしてから

効かなくなってしまったのですが、何が原因でしょうか？

HTMLなどは特にいじっておらず、CSSなども当時のまま変更はしていません。

:root {
  --card-ratio: 3 / 2;
}
/* 画面サイズ834px以下の時 */
@media (width <= 834px) {
  :root {
    --card-ratio: 1 / 1;
  }
}
/* 表示比率 */
.ect-vertical-card .card-thumb {
    aspect-ratio: var(--card-ratio);
}
/* 画像を表示比率に合わせる */
.card-thumb img {
  height: 100%;
  object-fit: cover;
}

コードはこちらでして、aspect-ratio:の

var(--card-ratio);

の部分が効かなくなってしまっています。

よろしければ教えて頂けるとありがたいです。

宜しくお願いします。

chu-ya

(@chu-ya)

Famed Member Registered

結合: 2年前

投稿: 2316

2024-05-08 23:56

●回答

Cocoon2.7.1から、以下の設定に合わせ、aspect-ratioを、CSSに反映するようになりました。

[Cocoon設定]→[画像]→サムネイル画像

以前のCSSクラスでは、親テーマCSSに負け、反映されません。
:root→.ect-vertical-card .card-thumbとします。

以下に修正して下さい。
一部、親テーマCSSに追加され、不要となりました。

.ect-vertical-card .card-thumb {
  --card-ratio: 3 / 2;
}

/* 画面サイズ834px以下の時 */
@media (width <= 834px) {
 .ect-vertical-card .card-thumb{
    --card-ratio: 1 / 1;
  }
}

わいひら reacted