画像を拡大せずサイズ通りに表示する方法

0
いいねをした人: 居ません
  • このトピックには4件の返信、2人の参加者があり、最後にshoneにより1年、 6ヶ月前に更新されました。
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • 投稿者
    投稿
  • #122348
    shone
    参加者
    47

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

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

    過去トピックにもあるように、snow monkeyでは「セクション」「画像」「カバー」など画像系のブロックはある程度自動でズームされてサイズが調整されていると思います。

    ただ、これでは特にヘッダー(ファーストビュー)画像などにおいて、トピックにもある通り文字などを入れたデザインの際に意図していないところで見切れたりと不都合が生じることがあり、これを何らかの方法で解決できないかと考えております。

    今回私もフルHD1920×1080で表示したときにちょうど画像が余白無く表示されるように、同サイズで画像を作成したのですが、ズームされることで狙った表示にならない状況です。

    仕様でズームされることがわかっているので予めそれを考慮して画像の要素を中央に寄せ気味にして作成するということもできるかと思いますが、実際にどの程度見切れるかは画像を設定してみないとわからないため、何度も調整のために画像編集するのは負担が大きくなってしまいます。

    最初から拡縮なく作成したサイズ通りに画像を表示できれば良いのですが、特定の画像(ヘッダーでの仕様想定なので「セクション(背景画像/動画)」「カバー」あたりが良いかと思っています)で、サイズ通りに表示することは可能でしょうか?

    また可能でしたら、今後機能として追加していただけると尚便利になるかと思うのですが、可能でしょうか?

    お忙しいところ恐縮ですが、お手すきの際にご確認いただけますと幸いです。

    何卒よろしくお願いいたします。

    0
    いいねをした人: 居ません
    #122350
    アバター画像キタジマ タカシ
    参加者
    2421

    画像に文字を入れるというとは、HTML なテキストを画像に重ねるということは不要ということですよね? それであれば画像ブロックを配置するのが良いと思います。画像ブロックはもともとのアスペクト比のまま表示されるので。基本的には max-width: 100% なので親のサイズに合わせて横幅は縮みますが、height: auto なのでアスペクト比を維持したまま高さも縮むはずです。

    0
    いいねをした人: 居ません
    #122351
    shone
    参加者
    47

    >キタジマさん

     

    早速のご返信ありがとうございます!

     

    画像に文字を入れるというとは、HTML なテキストを画像に重ねるということは不要ということですよね? それであれば画像ブロックを配置するのが良いと思います。画像ブロックはもともとのアスペクト比のまま表示されるので。

     

    ありがとうございます、単純な画像であれば画像ブロックで拡縮なしで表示できるのですね。

    今回はご認識のとおり画像の上にコンテンツを表示することがないので画像ブロックで対応できそうです。ただ場合によってはコンバージョンボタンなどを置きたいこともありまして、その場合にはセクションブロックなどを使うと思うのですが、この場合の拡縮リセットは可能でしょうか?

    0
    いいねをした人: 居ません
    #122357
    アバター画像キタジマ タカシ
    参加者
    2421

    その場合にはセクションブロックなどを使うと思うのですが、この場合の拡縮リセットは可能でしょうか?

    セクション(背景画像/動画)ブロックは仕様上難しい気がします。

    カバーブロックであれば、下記のような CSS でそれっぽい感じにできそうです(実際にはブロックスタイルや CSS クラスをつくって必要なカバーブロックにだけ適用するのが良いと思います)。

    .wp-block-cover {
        padding: 0;
        min-height: 0;
    }
    
    .wp-block-cover .wp-block-cover__image-background,
    .wp-block-cover video.wp-block-cover__video-background,
    .wp-block-cover-image .wp-block-cover__image-background,
    .wp-block-cover-image video.wp-block-cover__video-background {
        position: relative;
        height: auto;
    }
    
    .wp-block-cover__inner-container {
        position: absolute;
    }

    セクション(背景画像/動画)ブロックやカバーブロックで背景がトリミングされるようになっているのは、中のコンテンツに応じてブロック自体と背景がきれいに広がるようにするためです。背景が固定サイズだともし中身が多くなったときに背景が途中で途切れてしまったり、背景を優先するなら中のコンテンツが途中で途切れて見えなくなってしまったりします。

    実務的には中のコンテンツの量は制作者がコントロールできるので背景が固定サイズというのもできるとは思うのですが、中にどんなコンテンツが入るか想定できない、みんなが使うブロックの場合は、ある程度どういうコンテンツが来てもきれいに見えるようにということを考えると、やはりセクション(背景画像/動画)ブロックやカバーブロックのような実装がベターということになるのかなと思います。

    0
    いいねをした人: 居ません
    #123253
    shone
    参加者
    47

    セクション(背景画像/動画)ブロックは仕様上難しい気がします。

    カバーブロックであれば、下記のような CSS でそれっぽい感じにできそうです(実際にはブロックスタイルや CSS クラスをつくって必要なカバーブロックにだけ適用するのが良いと思います)。

     

    ありがとうございます!

    こちら試したところ、元画像のサイズのままでコンテンツを上に掲載することができました。

    解決しましたのでトピック閉じさせていたきます。

    1
    いいねをした人:
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • トピック「画像を拡大せずサイズ通りに表示する方法」には新しい返信をつけることはできません。

ドキュメント

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

ドキュメント

フォーラム

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

サポートフォーラム

よくあるご質問

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

よくあるご質問

お問い合わせ

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

お問い合わせ

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