ヘッダー画像をPC・スマホで切り替える

class=”resImage-mobile”を使います。もちろんレスポンシブです^^

必ず、PC用画像と同じ場所にスマホ用画像（ PC用画像ファイル名_mobile ）を置いてください。

bizvektorページ装飾指定一覧表より

imgタグに class=”resImage-mobile” クラスを設定する事によって、画面サイズが小さい場合に画像ファイルを切り替える事が出来ます。
モバイル用の画像は、通常の画像のファイル名の末尾に _mobile を追加します。
※画像は「PC、タブレットサイズ用」と「モバイル用」の2種類用意する必要があります。
sample.jpg ・・・　PC、タブレットサイズ用画像
sample_mobile.jpg ・・・　モバイル用画像

header.php　106行目　<?php echo get_biz_vektor_header_image_home();?>　を書き換え。

１．スライドショーなし

[php]

[/php]

２．スライドショーあり

[php]

[/php]

３．スライドショーなし（CSSだけで頑張ったバージョン）

デフォのまま、CSSだけで切り替えます。

[css]
@media (max-width: 770px){
#topMainBnrFrame .slideFrame img { display:none; }
#topMainBnrFrame .slideFrame { background: url(スマホ用画像のURL) no-repeat; height:0px; padding-top:26.1%; background-size: contain; }
}
[/css]

「bizvektorのcss・phpカスタムまとめ」へ