- このトピックには3件の返信、2人の参加者があり、最後に
により3年、 11ヶ月前に更新されました。
-
投稿
-
【お使いの 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%; }初歩的な質問かもしれませんが、教えていただけますと幸いです。
Who liked: No userもしかしたら、mayuさんは学習過程なのかもしれないと思い、あえて答えは出さずにヒントだけ提供してみますね。
Snow Monkey Blocksのスライダーは、キタジマ氏が自身で開発したプラグインを採用しています。
そちらの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をちょっとごにょごにょしてみると幸せになれるかもしれません。ぜひ挑戦してみてください。
Who liked: No userオレインさん
デフォルトでは切り取り（トリミング）はおこなわれないので、.spider__canvasか.spider__slideでトリミングする感じになるかなと思います。mayuさん
「画像の上下をトリミングして、縦幅を狭くしたい。」とのことなので、CSS でやるとすればwidthではなくheightを使うことになります。また、.spider__figureは画像そのものなので、普通に高さを指定すると画像が潰れてしまいます。background-sizeを併用するか、オレインさんが書かれているように.spider__canvasや.spider__slideに対して高さ指定することになると思います。
あるいは、スライダーブロックはインスペクター（設定パネル）に「画像のアスペクト比」という設定があり、そこで「16:9」の比率で画像をトリミングして表示することが出来るので、比率がそれで良いのなら、その設定を使うのが一番簡単だと思います。Who liked: No user
- トピック「スライダーの高さを変更したい」には新しい返信をつけることはできません。