レスポンシブでTOP画像を出し分けたい
 
通知
すべてクリア

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


hir
 hir
(@hir)
New Member
結合: 1年前
投稿: 1
Topic starter  

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

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


引用
Xeory開発チーム
(@xeory_developer)
Eminent Member
結合: 3年前
投稿: 39
 
@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 12か月前 4回 by Xeory開発チーム
This post was modified 12か月前 by Xeoryフォーラム管理者

返信引用
共有: