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

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

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

  • このトピックには5件の返信、3人の参加者があり、最後にkabuにより2年前に更新されました。
6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • 投稿者
    投稿
  • #62075

    kabu
    閲覧者

    ■ WordPress のバージョン
    WordPress 5.9

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

    ■ テーマの種類
    Lightning Pro

    ■ テーマのバージョン
    8.11.2

    ■ スキンの種類
    Origin II

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

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

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

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

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

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

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

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

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

    #62128

    石川@Vektor,Inc.
    キーマスター

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

    #62136

    横からすみません。

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

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

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

    #62137

    石川@Vektor,Inc.
    キーマスター

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

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

    #62138

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

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

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

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

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

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

    #62139

    kabu
    閲覧者

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

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

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

6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • このトピックに返信するにはログインが必要です。