[yuu]

【お使いの Snow Monkey のバージョン】15.2.1
【お使いの Snow Monkey Blocks のバージョン】12.0.3
【お使いの Snow Monkey Editor のバージョン】6.0.0
【お使いのブラウザ】Chrome
【当該サイトのURL】現在、まだローカルなのでありません

いつもお世話になっております。

### 発生している問題

Snow Monkey15.2.1に更新したところスライダーの上にlogo画像をtaranslateで乗せていましたが消えてしまいました。

スライダーの画像が切り替わるタイミングで一瞬表示されるのですが、これは不具合でしょうか？

↓編集画面

↓logo画像が消えてしまいます

↓スライダー画像が切り替わる時に一瞬出現します

↓スライダー画像が変わるとまた消えます

### 試したこと

cssは以下の通りです。

/*スライダー内logo*/
.naosuke-top-logo {
  display:flex;
  z-index: 100;
  transform: translatey(-550px);
}
@media screen and (max-width:1024px) {
  .naosuke-top-logo {
    z-index: 100;
    transform: translatey(-380px);
  }
  .naosuke-top-logo.wp-block-image:not(.is-style-rounded) img {
    width: 500px;
  }
}
@media screen and (max-width:767px) {
  .naosuke-top-logo {
    z-index: 100;
    transform: translatey(-310px);
  }
  .naosuke-top-logo.wp-block-image:not(.is-style-rounded) img {
    width: 300px;
  }
}

お手数をおかけしますが、ご確認よろしくお願いいたします。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

Snow Monkey Blocks のスライダーブロック、スライダー（非推奨）ブロックは中にコンテンツを入れられないようになっていますが、スライダーというのはどのように作成されたものでしょうか？

♥ 0

いいねをした人: 居ません

[yuu]

キタジマさん

 

ご返信ありがとうございます。

 

 

SnowMonkeyのスライダーの下に画像ブロックでロゴ画像を配置。

z-indexとtransform: translateYで画像の上に配置しました。

 

今回の更新前までは、スライダーの上に上手くロゴ画像が乗っかっており、スライダーの画像が切り替わってもロゴがそのままスライダーの上に乗っているような感じになっておりました。

♥ 0

いいねをした人: 居ません

[yuu]

キタジマさん

色々と試した結果、

* {
  z-index:0;
}

これでスライダーの上に画像を載せることができました！

ですので、こちらとしては解決したのですが、トピックは閉じたほうがいいでしょうか？m(_ _)m

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

それはすべての要素の z-index を0にしているので他に色々な問題がでる可能性があると思います。

.naosuke-top-logo の z-index をもっと大きくする、あるいは !important をつける、あるいはその両方をおこなうではダメそうですかね？

♥ 0

いいねをした人: 居ません

[yuu]

キタジマさんのおっしゃるとおりで　*にz-indexをするのはよくなかったです。

画像にz-inde:999;、!importantをつけてもダメでしたが、

スライダーにz-index:0;で思った通りにすることができました。

 

本番環境にアップしたのでこちらでご確認いただけます。

http://sibjapan.com/

 

良ければこれでトピックを閉じたいと思いますがいいでしょうか？

ご対応していただきありがとうございました。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

スライダーの z-index を 0 にするのも何か影響がありそうな感じがするので、

.smb-spider-slider + * {
    z-index: 1;
}

のように画像側の z-index を調整するのが良いと思います。最近のアップデートで、画像をセンタリングさせたときの HTML 構造が変わっており、それで .wp-block-image の z-index が効かなくなったのが原因のようです。なので .smb-spider-slider に隣接する要素は z-index: 1; のようにするのが良いのではと思いました。

♥ 2

いいねをした人:

[yuu]

キタジマさん、ありがとうございます。

確認が遅くなりました。

 

CSSを当てたところ実装できました。

ご対応いただきありがとうございます。

トピック閉じさせていただきます！

♥ 1

いいねをした人:

[投稿者]

投稿