[ 解決済 ] ヘッダーロゴ画像をPCとスマホで違う画像を設置する方法

横からすみません。

こんなかんじにしてみたら、いかがでしょうか。

@media (max-width: 480px) {

.siteHeader_logo img {
    opacity: 0;
}

.siteHeader_logo {
    background-image: url(スマホ用のヘッダーロゴ画像のURL);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

}

このやり方、ちょっと楽できます (^^♪

石川さん、なるほど、そういうことでしたか… 了解いたしました。

ご質問者は「CSSで可能であれば…」とのことですが、他にもこのトピックを参考にされる方がいるかもしれないので、フィルターフックを使うやり方も書いてみます。

子テーマの functions.php などに以下の行を追加すれば、モバイル端末での閲覧時にヘッダーロゴ画像が差し替えられます。（たしか、タブレットでもヘッダーロゴ画像が差し替えられたと思う）

add_filter( 'lightning_head_logo_image_url', function( $options ){

    if ( wp_is_mobile() ){
      $options = 'スマホ用のヘッダーロゴ画像のURL';
    }

    return $options;

} );

functions.php についての参考ページ ↓

カスタマイズの準備 1 : Lightningの子テーマの準備