[星乃 みなみ]

【お使いの Snow Monkey のバージョン】バージョン: 15.16.0
【お使いの Snow Monkey Blocks のバージョン】バージョン 13.4.0
【お使いの Snow Monkey Editor のバージョン】バージョン 6.2.1
【お使いのブラウザ】chrome
【当該サイトのURL】http://x04.kglb.net/%e9%9d%92%e5%b1%b1%e4%bd%86%e9%a6%ac%e5%b1%8b/

### 実現したいこと

横幅いっぱいに広がるアイキャッチ画像をマルチデバイスに対応したまま固定幅にしたい

### 発生している問題

各店舗や会社から写真素材の提供を受けているが、素材によっては横幅いっぱいにできるほどの解像度がない場合がある。そのため、アイキャッチを本文と同じ幅（1280）にしたい

### 試したこと

ブラウザーの開発ツールでコードをみて、CSS編集で対応可能かとおもったら、HTMLがデバイス毎にイメージタグが指定されていて、CSSがどのように動作しているのか想定より複雑だった。CSSだけの編集ではできないのではないかという疑問になり、サポートの門を叩いた。

コミュニティのみなさん　ごぶさたしてます
また案件の改修事案であまりここに持ち込むべきではないのは重々承知しておりますが
少々手に負えない可能性がありましたので、投稿させていただきました
よろしくお願いいたします

♥ 0

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

[星乃 みなみ]

カスタマイザーで指定できるか探したがわからず

HAPPY SNOW MONKEY

100%GPL有料WordPressテーマ Snow Monkeyの非公式カスタマイズデモサイト

happy-snow-monkey.olein-design.com

で、フックをさがしたものの、前後に挿入するものはあるけど、アイキャッチを編集するものはなく

テーマエディターを開いた物の、どこに記述されてるかすら分からずです

♥ 0

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

[キタジマ タカシ]

こういうことですかね？

ページヘッダーは高さが固定で、画像はトリミングされる形で表示されますが、そのトリミングはそのままで大丈夫なのですかね？

♥ 0

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

[星乃 みなみ]

こういうことです！

ページヘッダーは高さが固定で、画像はトリミングされる形で表示されますが、そのトリミングはそのままで大丈夫なのですかね？

ちょっと考えが及んでませんでしたが、トリミングされるのは問題ないと考えます。
横幅いっぱいの時の高さと同じで固定して、横幅はトリミングされるのでOK
あれ、横幅いっぱいにして高さをトリミングしたほうがいい

どっちが綺麗でしょうか
画像を作るのはデザイナーなので、こうトリミングされると伝えたら
それを前提に画像をつくるとおもいます。

♥ 0

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

[星乃 みなみ]

それの実現方法教えて下さい！
デザイナーにみせて納得させます。

♥ 0

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

[キタジマ タカシ]

.c-page-header__bgimage {
  margin: 0 auto;
  max-width: 1280px;
}

を追加してみてください。トリミングについては、object-fit: cover になっているので、ページヘッダーの表示範囲いっぱいに画像を広げてはみ出た部分がトリミングされるという挙動になります。

♥ 1

いいねをした人:

[星乃 みなみ]

夜にもかかわらず素早くありがとうございます。

追加してみましたが、再現できませんでした。
キャッシュもクリアーしてみたのですが…..

スタイルの記述位置とか変えて見ます
うーん

♥ 0

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

[星乃 みなみ]

リンクが古くって　テストサイト見てました

希望の形になってます

これで他のコンテンツもいれてみて調整してみます

ありがとうございます

デザイナーの反応をみてトピック閉じますね

♥ 0

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

[星乃 みなみ]

デザイナーからOKでました！
また他の画像を入れてみて、トリミングとか調整できなかったら相談しますね
いつも迅速なサポート　ありがとうございました！

閉じまーす

♥ 1

いいねをした人:

[投稿者]

投稿