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

[kabu]

■ WordPress のバージョン
WordPress 5.9

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
Lightning Pro

■ テーマのバージョン
8.11.2

■ スキンの種類
Origin II

■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。

■ プラグインの種類・バージョン
なし

■ 期待する動作
ヘッダーロゴ画像をPCとスマホで違う画像を設置したいと思っております。

「カスタマイズ」→「Lightningデザイン設定」ではPC、スマホとも同じ画像になってしまいます。

CSSで可能であればご指導宜しくお願い致します。

皆様、不慣れな初心者で申し訳ございません。

■ 自分で試した事
ネットで該当のcssを調べてみましたがみつかりませんでした。

■ 症状が発生するブラウザ
全てのブラウザ

■ 実際の症状
ヘッダーロゴ画像がPCとスマホで同じになってします。

[石川＠Vektor,Inc.]

手法としてはロゴ画像は透明の画像を登録して、
背景画像としてPC用とモバイル用のロゴをCSSで指定切り替えするとか…?

[対馬 俊彦]

横からすみません。

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

@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;
}

}

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

[石川＠Vektor,Inc.]

実験してないのでわからないのですが、opacity:0; だと音声ブラウザで読み上げられないとか Google 先生にスルーされるとか、そういう事があるのかもしれないという理由で、「透明の画像で」というふうに書きました。

ただ、雰囲気的にそうなのかなと思っただけで実際どうかはわかりません…。

[対馬 俊彦]

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

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

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

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

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

    return $options;

} );

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

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

[kabu]

お二人様、大変ありがとうございました。

無事に希望どおりの設置できました。

重ねて、ありがとうございました。

[投稿者]

投稿