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

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

  RSS

hir
 hir
(@hir)
New Member
参加: 3か月 前
投稿: 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 2か月 前 4 times by Xeory開発チーム
This post was modified 2か月 前 by Xeoryフォーラム管理者

返信引用
Share:

コンテンツマーケティングを得意とするバズ部が、自信を持ってお届けする
Xeoryカスタマイズサービス

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

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

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

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


サイト制作の相談をする