- このトピックには6件の返信、2人の参加者があり、最後に
により4年、 8ヶ月前に更新されました。
-
投稿
-
【お使いの Snow Monkey のバージョン】7.7.0
度々の質問で恐縮です。
トップページでのブロック「セクション（背景画像あり）」のモバイルでの表示が思うようにいかず、ご教示いただけませんでしょうか。
トップページ（固定ページ・1カラム）でセクション（背景画像あり）を使ってメニュー直下にヘッダー画像を配置しています。
PC用の画像（1800 x 594px）とモバイル用の画像（650 x 463px)を、それぞれセクション（全幅）で配置し、CSSで表示を切り替えています。
PC用は問題ないのですが、モバイル用は以下のようにうまくいきません。
●ブロック設定「高さ」広め・・・上下は全て表示されるが、左右が切れてしまう。
●ブロック設定「高さ」フィット・・・左右は全て表示されるが、画像の上部3分の1程度しか表示されない。CSSでいろいろ試してみたのですが、うまく調整できません。
どうぞよろしくお願いいたします。いいねをした人: 居ませんセクション（背景画像あり）に表示される画像はあくまで「背景画像」です。表示範囲の主体となるのは画像ではなく中身のコンテンツになります。画像をすべて切れずに表示したいのでしたら、背景画像にするのではなく、テキストはテキスト、画像は画像と別のブロックで表現するのが良いと思います。
どうしてもセクション（背景画像）でやりたい場合は
object-fit: contain;とすると画像が切れずに表示されますが、上下（か左右）に無駄な余白がでてしまうと思います。いいねをした人: 居ませんありがとうございます。
やりたいことは、フルサイズ幅のヘッダー画像をPCとモバイルで、切り替えて設定し、画像の上にテキストを表示させることです。（PC用はうまく表示できたので、問題はモバイルの方です）ご返信の内容の通り、テキストと画像を別々に設定した場合、画像の上にテキストを重ねることはできるのでしょうか。
また、今回のような場合、おすすめの方法はありますでしょうか。
ブロックは使い慣れておらず、ご教示いただけると助かります。いいねをした人: 居ませんご返信の内容の通り、テキストと画像を別々に設定した場合、画像の上にテキストを重ねることはできるのでしょうか。
残念ですができません。画像が切れないように、かつ無駄な余白を表示しないようにしながらその上にテキストを重ねるということは、今度は逆にテキストがはみ出す可能性があるということです。それをレスポンシブですべてのデバイスで対応させるというのは現実的ではありません。そういう理由で、テキストと画像は別々に表示する方向が良いのでは、という提案をしました。
おそらくうまくいっている PC のほうも、ブラウザサイズによっては多少切れる部分がでるのではないかと思います。
繰り返しになりますが、どうしても切れないように表示したいのであれば
object-fit: contain;を使うしかないと思います。いいねをした人: 居ません画像ブロックではなくてセクション（背景画像あり）ブロックに対して、になりますね。例えばこんな感じ。
.smb-section-with-bgimage__bgimage > img { object-fit: contain; }そのままだと全てのセクション（背景画像あり）ブロックに対して適用されてしまうので、適用したいセクション（背景画像あり）ブロックに適当なアンカーや追加 CSS クラスを設定して、それに対して CSS を書くようにするのが良いかと思います。
いいねをした人: 居ませんありがとうございます。CSSの書き方勉強になりました。
ただ、うまくいきましたが、上下に黒いスペースが発生してしまいました。今回はセクションでやるのが便利かと思い、使ってみましたが、テキストの挿入が思うようにいかないようですね。これでやるとしたら、画像自体にテキストを入れるのがよいのかもしれません。
別な方法で、以前、一度やったことのあるホームページの上部ウィジェットにスライダーを入れてやってみたら何とかできそうです。テキストも入れられますね。スマホとPCの切り替えには、プラグインを使ってみようと思います。
「セクション（背景画像あり）」については、解決済にさせていただきます。
いいねをした人: 居ません
- トピック「ブロック「セクション（背景画像あり）」のモバイルでの表示について」には新しい返信をつけることはできません。