[taki]

【お使いの Snow Monkey のバージョン】13.2.3
【お使いの Snow Monkey Blocks のバージョン】10.3.3
【お使いの Snow Monkey Editor のバージョン】4.1.0
【お使いのブラウザ】Chrom
【当該サイトのURL】ローカル環境のため無し

### 実現したいこと

レスポンシブ設定をしたい

■セクション（背景画像）の画像をレスポンシブに合わせて調節したい
■プルクオートのタイトルサイズを変えたい

### 発生している問題

追加cssにてメディアクエリを書き込んでいるのですが、反映されないです。
ブロックごとに追加cssクラスもつけているのですが、反映されないです。
メディアクエリが読み込めていないのか、対象クラスが違うのでしょうか。

### 試したこと

ディベロッパーツールにてfont-sizeを変更すると変わります。
PCページの追加cssは反映されます。（メディアクエリ設定はしていません。）
トップ画像はheightにvhの設定もしてみたのですが、変わりませんでした。
メディアクエリでwidth:100%にしても変わらないので、画像がはみ出してしまいます。
入れているプラグインは「Snow Monkey Blocks 」「Snow Monkey Editor」「Contact form7」のみです。
ご教示いただけると幸いです。

♥ 0

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

[まーちゅう]

こんにちは
background-size: cover;で、画面サイズに合わせて背景画像のサイズが変わると思います。
画像を繰り返しにしている場合は、background-size: contain;の方がいいかもです。

♥ 0

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

[キタジマ タカシ]

こちらでも試してみましたが、CSS はあたっているようなので、まーちゅうさんが書かれているように background-size で調整するのが良いのでは？と思いました。

プルクオートのほうは、.title .has-large-font-size というクラスをどのように付与しているのかがわかりませんでした。

※CSS のスクショだけだと試そうと思う人が試しにくいと思うので、下記テキストで記入します。

@media screen and (max-width: 999px) {
  .top-image .smb-section-with-bgimage__bgimage {
	width: 100%;
	height: 100vh;
  }
}

@media screen and (max-width: 640px) {
  .top-image .smb-section-with-bgimage__bgimage {
	width: 100%;
  }

  .title .has-large-font-size {
    font-size: 20px;
  }
}

♥ 0

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

[taki]

まーちゅうさん、キタジマさん、ご教示いただきありがとうございます。

あれから試してみて、タブレットはなんとか枠内に見せたい部分は収まったのですが、スマホがどうしても画面に収まりきらない状態です。

セクション（背景）に「top-image」をつけて、cssで「top-image」「top-image img」とで「background-size: cover;」、繰り返し設定にはしていないのですが「background-size: contain;」で試しましたが変わらずでした。

今回のはトップ画像になるのですが、スマホ版で背景画像が縮小されないのは当てているクラスが違っているのでしょうか。

ご教示いただいた内容で追加cssを下記のように記載しましたが、縮小できませんでした。↓↓

/*タブレット*/
@media screen and (max-width:999px){
  /*トップイメージ*/
  .top-image {
    width:100%;
    height:90vh;
    background-size:cover;
  }
}

/*スマホ*/
@media screen and (max-width:599px){
  /*トップイメージ*/
  .top-image {
    width:100%;
    height:auto;
    background-size:cover;
  }
}

♥ 0

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

[キタジマ タカシ]

.top-image（= セクション（背景画像/動画ブロック）の大外の要素）には背景画像は無いので background-size をつけてもどこにも影響を与えることはできません。画像が繰り返しでない場合は背景画像ではなく img で配置されているので、background-size ではなくて object-fit になります。

@media screen and (max-width:999px){
  /*トップイメージ*/
  .top-image {
    height: 90vh;
  }
  .top-image .smb-section-with-bgimage__bgimage > img {
    object-fit: contain;
  }
}

ただ、background-size: contain や object-fit: contain は、表示エリアに収まるように画像を縮小するという指定になるので、画像を画面いっぱいに広げたいという用途には不向きです。ちょっとどう表示させたいのかがいまいちわかっていないのですが、

– 画像はどこか切れることなく全て表示したい
– 画像は画面いっぱいに表示したい
– 画像の上に文字を載せたい

という表現を実現したいのであれば、セクション（背景画像/動画）ブロックは向いていないのではないかと思います。Snow Monkey Blocks やコアのブロックにはそのような表現ができるブロックはなかったと思うので、CSS でカスタマイズするよりはカスタム HTML ブロックなんかで自作したほうが確実ではないかと思います。

♥ 0

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

[taki]

キタジマさん

お世話になっております。

object-fitで画面いっぱいに全体を表示することができました。

背景画像に色々と付け加えたい場合はカスタムHTMLブロックになるのですね。

勉強になりました。

 

説明不足なところもあり、申し訳ございませんでした。

回答いただきありがとうございました。

♥ 0

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

[キタジマ タカシ]

解決できてよかったです！

背景画像に色々と付け加えたい場合はカスタムHTMLブロックになるのですね。

「背景画像に色々と付け加えたい場合」というか「エリア内に背景画像を切り取らずに表示したい場合」が正しいですね。
解決済みということでトピック閉じます。

♥ 0

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

[投稿者]

投稿