[shone]

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

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

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

スノーモンキーに最適な画像のサイズや縦横比率

このトピックには4件の返信、2人の参加者があり、最後に京都はしもと製陶所により4年、 1ヶ月前に更新されました…

snow-monkey.2inc.org

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

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

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

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

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

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

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

♥ 0

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

[キタジマ タカシ]

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

♥ 0

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

[shone]

＞キタジマさん

 

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

 

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

 

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

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

♥ 0

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

[キタジマ タカシ]

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

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

カバーブロックであれば、下記のような 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

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

[shone]

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

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

 

ありがとうございます！

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

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

♥ 1

いいねをした人:

[投稿者]

投稿