アイキャッチ画像の幅を固定にしたい(レスポンスは対応)

0
いいねをした人: 居ません
9件の投稿を表示中 - 1 - 9件目 (全9件中)
  • 投稿者
    投稿
  • #92540
    アバター画像星乃 みなみ
    閲覧者
    36

    【お使いの 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
    いいねをした人: 居ません
    #92546
    アバター画像星乃 みなみ
    閲覧者
    36

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

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

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

    0
    いいねをした人: 居ません
    #92552
    キタジマ タカシ
    参加者
    2233

    こういうことですかね?

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

    0
    いいねをした人: 居ません
    #92554
    アバター画像星乃 みなみ
    閲覧者
    36

    こういうことです!

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

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

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

    0
    いいねをした人: 居ません
    #92556
    アバター画像星乃 みなみ
    閲覧者
    36

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

    0
    いいねをした人: 居ません
    #92559
    キタジマ タカシ
    参加者
    2233
    .c-page-header__bgimage {
      margin: 0 auto;
      max-width: 1280px;
    }

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

    1
    いいねをした人:
    #92562
    アバター画像星乃 みなみ
    閲覧者
    36

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

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

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

    0
    いいねをした人: 居ません
    #92568
    アバター画像星乃 みなみ
    閲覧者
    36

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

    希望の形になってます

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

    ありがとうございます

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

    0
    いいねをした人: 居ません
    #92583
    アバター画像星乃 みなみ
    閲覧者
    36

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

    閉じまーす

    1
    いいねをした人:
9件の投稿を表示中 - 1 - 9件目 (全9件中)
  • トピック「アイキャッチ画像の幅を固定にしたい(レスポンスは対応)」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。