レスポンシブでTOP画像を出し分けたい

最終の投稿

RSS

hir

(@hir)

New Member

参加: 8か月前

投稿: 1

10/11/2021 5:29 pm

メインビジュアルを画像に変更できたものの、タブレットやモバイルで違う画像に出し分けたいといろいろやってみましたがうまくいきません。

どのようにすればよいでしょうか。
（メインビジュアルを画像にすること自体は、ネット記事でCSSに組み込む方法なども見てやってみましたが、現状、テーマ設定→背景画像が効いているようです）

引用

Xeory開発チーム

(@xeory_developer)

Eminent Member

参加: 2年前

投稿: 40

10/12/2021 9:00 am

@media screen and (max-width: 550px) {

body.home #main_visual, body.home.default #main_visual{

background-image: url(ここに画像のURL) !important;

}
}

style.cssの一番下に下記のコードを追加してください。

上記はスクリーンサイズ550px以下に画像を指定する書き方です。
550px ←画面サイズに合わせて変更して下さい。

※!importantを記述しているのは、先に書かれているスクリーンサイズ(主にPCなど)で出力している画像が優先されてしまうのを防ぐためです。

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

This post was modified 7か月前 4 times by Xeory開発チーム

This post was modified 7か月前 by Xeoryフォーラム管理者

返信引用

自社サイトを運営し、
試行錯誤しながら蓄積してきた知見を
惜しみなく提供

私たちはデザイン会社ではなくマーケティング会社です。
例えばデザイン会社はおしゃれなサイトにこだわりますが、私たちは成果が出るサイトにこだわります。

目指す成果との因果関係・相関関係をデータから紐解き実現可能性の高いアイデアを選別し、計画、実行していきます。

※料金は内容によって異なります