class=”resImage-mobile”を使います。もちろんレスポンシブです^^
必ず、PC用画像と同じ場所にスマホ用画像（ PC用画像ファイル名_mobile ）を置いてください。
imgタグに class=”resImage-mobile” クラスを設定する事によって、画面サイズが小さい場合に画像ファイルを切り替える事が出来ます。
モバイル用の画像は、通常の画像のファイル名の末尾に _mobile を追加します。
※画像は「PC、タブレットサイズ用」と「モバイル用」の2種類用意する必要があります。
sample.jpg ・・・ PC、タブレットサイズ用画像
sample_mobile.jpg ・・・ モバイル用画像
header.php 106行目 <?php echo get_biz_vektor_header_image_home();?> を書き換え。
１．スライドショーなし
|
1 2 3 4 5 6 7 8 9 |
<?php if(is_front_page() ) { ?> <div id="topMainBnr"> <div id="topMainBnrFrame"> <div class="slideFrame"><img class="resImage-mobile" src="ヘッダー画像URL" alt="" /></div> </div> </div> <?php } ?> |
２．スライドショーあり
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?php if(is_front_page() ) { ?> <div id="topMainBnr"> <div id="topMainBnrFrame" class="flexslider"> <ul class="slides"> <li><span class="slideFrame"><img class="resImage-mobile" src="1つめの画像" alt="" /></span></li> <li><span class="slideFrame"><img class="resImage-mobile" src="２つめの画像" alt="" /></span></li> <li><span class="slideFrame"><img class="resImage-mobile" src="３つめの画像" alt="" /></span></li> <li><span class="slideFrame"><img class="resImage-mobile" src="４つめの画像" alt="" /></span></li> </ul> </div> </div> <?php } ?> |
３．スライドショーなし（CSSだけで頑張ったバージョン）
デフォのまま、CSSだけで切り替えます。
|
1 2 3 4 5 6 |
@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; } } |
- 投稿タグ
- カスタム
この方法を試しましたが、トップページだけでなく、下層ページにまでヘッダー画像が表示されてしまいます。。。
header.php 自体が全ページ共通のヘッダー部分の記述だとしたら当然ですよね。。。
トップページだけ、スマホ表示の時の画像変更方法分かりますか？？？
あー^^; ごめんなさい
１，２番は
if (is_front_page() ) ) { }
で括ってください
お礼おそくなりましてすいません。
おかげさまで無事表示できるようになりました。
どうもありがとうございました。