[mayu]

【お使いの Snow Monkey のバージョン】12.1.0
【お使いの Snow Monkey Blocks のバージョン】10.0.0
【お使いの Snow Monkey Editor のバージョン】
【お使いのブラウザ】
【当該サイトのURL】

### 実現したいこと

SNOW MONKEY BLOCKSのスライダーで、画像の上下をトリミングして、縦幅を狭くしたい。

### 発生している問題

下の方法で高さを調整すると、画像がつぶれてしまいます。

### 試したこと

追加CSSに下記のコードを書きました。

.smb-spider-slider .spider__figure {
  width: 40%;
}

初歩的な質問かもしれませんが、教えていただけますと幸いです。

♥ 0

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

[Olein_jp]

もしかしたら、mayuさんは学習過程なのかもしれないと思い、あえて答えは出さずにヒントだけ提供してみますね。

Snow Monkey Blocksのスライダーは、キタジマ氏が自身で開発したプラグインを採用しています。

inc2734/spider

Contribute to inc2734/spider development by creating an account on GitHub.

github.com

そちらのDOM構造ですが、簡単にご説明すると、

.wp-block-snow-monkey-blocks-spider-slider の中に .spider という囲いがあり、その中に .spider__canvas や .spider__dotsといった、画像部分やドット（もしくはサムネイル）部分が用意されています。

画像部分は .spider__canvas になるのですが、この中に spider__slide があり、その中にトピックに書いてある .spider__figure というimgタグの画像が配置されています。

しかし、挑戦されたように .spider__figure をいじっても高さは変更することはできません。なぜなら、.spider__figure を .spider__slide で囲ってあり、それらを .spider__canvas でよしなに切り取っているような作りになっています。

ですので、一番外枠の .spider__canvas をちょっとごにょごにょしてみると幸せになれるかもしれません。

ぜひ挑戦してみてください。

♥ 1

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

[mayu]

ご丁寧に解説いただきまして、ありがとうございました。

まだ思うような形にはできていませんが、もう少しチャレンジしてみます。

ありがとうございました。

♥ 0

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

[キタジマ タカシ]

オレインさん
デフォルトでは切り取り（トリミング）はおこなわれないので、.spider__canvas か .spider__slide でトリミングする感じになるかなと思います。

mayuさん
「画像の上下をトリミングして、縦幅を狭くしたい。」とのことなので、CSS でやるとすれば width ではなく height を使うことになります。また、.spider__figure は画像そのものなので、普通に高さを指定すると画像が潰れてしまいます。background-size を併用するか、オレインさんが書かれているように .spider__canvas や .spider__slide に対して高さ指定することになると思います。
あるいは、スライダーブロックはインスペクター（設定パネル）に「画像のアスペクト比」という設定があり、そこで「16:9」の比率で画像をトリミングして表示することが出来るので、比率がそれで良いのなら、その設定を使うのが一番簡単だと思います。

♥ 0

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

[投稿者]

投稿