wordpressでスマホとPCでのトップ画像の切り替えたい

Question

前提・実現したいこと

色々調べてみましたが、どうしても解決できずにおります。

template-partyのwordpressテンプレート「tpwp_biz46」を使用しております。

トップページにだけ表示されるトップページ画像をスマホとPCで違う画像に切り替えたいです。

現状は、PCで表示される画像がスマホで閲覧すると小さくなるだけなんですが、縦長な別画像にしたいです。

発生している問題・エラーメッセージ

画像にドロッププルダウンメニューが被ってしまいます。

該当のソースコード

/* スマホのときのヘッダー画像 */
@media (max-width: 480px) {
    /* PC用のヘッダー画像を消す */
    #mainimg img {
        display: none;
    }
 
    /* スマホ用のヘッダー画像を表示 */
    #mainimg:after {
        background: url(★画像URL★);
        background-size: 100% auto;
        content: '';
        display: block;
        height: 320px;
    }
}

試したこと

こちらのサイトの「STINGER PLUS+の例」を参考にしました。

補足情報（FW/ツールのバージョンなど）

「wordpress スマホ閲覧の場合だけヘッダ画像を切り替えたい」を読んで「phpでPCかモバイルかを判断し画像の出力そのものを変える」という事をしなければならないのかなと思いましたが、わかりません。

どうかご教授お願い致します。

Answer 1

header .inner
の高さが指定されているからではありませんでしょうか？

$ua=$_SERVER['HTTP_USER_AGENT'];
$sp = ((strpos($ua,'iPhone')!==false)||(strpos($ua,'iPod')!==false)||(strpos($ua,'Android')!==false));
if ($sp){
  /*スマホの処理*/
  <img src="スマホの画像url" alt="">
}else{
  /*PCの処理*/
  <img src="<?php header_image(); ?>" alt="">
}

縦長の画像が正常に表示されて入ればこれでいけそうですが…

Comments

[tyorin]

ご回答ありがとうございます。
スマホ用のヘッダー画像がheight: 320px;でしたので、320にしてみましたが、画像より上のヘッダー部分が広がっただけで、画像にプルダウンメニューが被ってしまいます。

[Atsushi_Okumura]

画像が入っているエリア#mainimgや付近のエリアの高さが指定されていそうなのですが
実際のHTMLやCSSは出せますでしょうか

[tyorin]

何度もありがとうございます。

先ほど変更してみたcssは、

/*ヘッダー（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
border-top: 4px solid #f6a72a; /*上の線の幅、線種、色*/
}
header .inner {
height: 100px; /*高さ*/
}
/*ロゴ画像*/
header #logo {
width: 400px; /*ロゴ画像の幅*/
float: left; /*左に回り込み*/
margin-top: 20px; /*ロゴの上にあける余白。上下のバランスをここで調整して下さい。*/
}
の

header .inner {
height: 100px; /*高さ*/
を100から320に変更してみました。

【HMTL】
<!--トップページだけにメイン画像を表示させる-->
<aside id="mainimg">
<img src="http://★画像URL★.png" alt="">
</aside>

【header.php】
<!--トップページだけにメイン画像を表示させる-->
<?php if (is_front_page() ): ?>
<aside id="mainimg">
<img src="<?php header_image(); ?>" alt="">
</aside>
<?php endif; ?>

的外れな返答をしていたらすいません。
どうぞよろしくお願いします。

[Atsushi_Okumura]

初めから縦長の画像を指定した場合は重ならずに表示されますか？

[tyorin]

何度もありがとうございます。

初めから縦長の画像を指定した場合とは、<img src="<?php header_image(); ?>" alt="">の画像を縦長にするという事でしょうか。

初歩的な事を伺ってすいません、掲載していただいたPHPはどの辺りに設置すればよいでしょうか。
また的外れな返答をしていたらすいません。
どうぞよろしくお願いします。

[Atsushi_Okumura]

初めから縦長の画像を指定した場合
これは、スマホ用の画像をPC用に指定した場合です。

PHPはheader.phpの
<img src="<?php header_image(); ?>" alt="">
を入れ替えるように設置します。

[tyorin]

初歩的なご質問にお付き合い頂いてありがとうございます。

希望通りスマホ画像に被らない状態になりましたが、

<!--トップページだけにメイン画像を表示させる-->
<?php if (is_front_page() ): ?>
<aside id="mainimg">

$ua=$_SERVER['HTTP_USER_AGENT'];
$sp = ((strpos($ua,'iPhone')!==false)||(strpos($ua,'iPod')!==false)||(strpos($ua,'Android')!==false));
if ($sp){

/*スマホの処理*/
<img src="★画像URL★"">
}
else{
/*PCの処理*/
<img src="<?php header_image(); ?>" alt="">
}

</aside>
<?php endif; ?>
は間違って設置していますでしょうか。

PHP$ua=$_SERVER['HTTP_USER_AGENT'];
$sp = ((strpos($ua,'iPhone')!==false)||(strpos($ua,'iPod')!==false)||(strpos($ua,'Android')!==false));
if ($sp){
/*スマホの処理*/
} else{ /*PCの処理

も見えてしまいます。
またパソコンでは両方の画像が見えます。

何度もすいません。

[Atsushi_Okumura]

申し訳ないです。下のように<?phpと?>を追記してみてください。

<?php
$ua=$_SERVER['HTTP_USER_AGENT'];
$sp = ((strpos($ua,'iPhone')!==false)||(strpos($ua,'iPod')!==false)||(strpos($ua,'Android')!==false));
if ($sp){

/*スマホの処理*/
?>
<img src="★画像URL★" alt="">
<?php }
else{
/*PCの処理*/
?>
<img src="<?php header_image(); ?>" alt="">
<?php } ?>

</aside>

[tyorin]

本当ありがとうございました！！！
希望通りPCとスマホの画像が切り替わりました！

初歩的な事ばかりお尋ねしたにも関わらず、最後までご回答くださりありがとうございました。

[tyorin]

/*スマホの処理*/
?>
<img src="★画像URL★"">
にしていただけると助かります。

[Atsushi_Okumura]

URL失礼しました。

とんでもないです、自分の未熟さを痛感する思いです。
ありがとうございました。

[tyorin]

私のミスでお手数おかけしました。

知識もない私に、細かく丁寧に教えてくださり感謝しかありません。
ありがとうございました。