HOME フォーラム BizVektor スマートフォン表示をした時に、違うヘッダー画像(スライダー)を表示させたい

このトピックには6件の返信が含まれ、2人の参加者がいます。2 年、 8 ヶ月前 Masayuki さんが最後の更新を行いました。

7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • 投稿者
    投稿
  • #3177

    Masayuki
    参加者

    WordPress 4.1
    BizVektor ver1.5.3
    スキン Default
    子テーマ使用

    WordPress 4.1
    BizVektor ver1.6.1
    スキン Calmly
    子テーマ使用

    配色や各所幅の変更等は、GoogleChromeの「要素の検証」を使用しながら、ある程度は修正できるのですが、上記2つの環境でWebサイトを制作し、スマーとフォンで表示をした時に、へッダー画像を入れ替えるようにするには、CSSで対応可能でしょうか?
    見たところ、PHPを操作しなくてはならないような気がするのですが...。
    お分かりになる方がいらっしゃいましたら、ヒントをお願いします。

    #3179

    magonote
    モデレーター

    phpいじる方が早いと思うけど、cssのみでとなると・・・

    未検証だけど、例えば、

    #topMainBnrFrameあたりに背景画像として、スマホで表示させたいヘッダー画像を仕込む。
    PC用ヘッダーは通常通り設定。
    スマホサイズになったら、#topMainBnr img を非表示に。

    みたいな感じでどうかな??

    #3183

    magonote
    モデレーター

    !?スライダー??
    スライドショーの中身を使い分けたい??
    もし、そうなら勘違いしてましたw

    せっかくなので、以下、スマホでヘッダー画像切り替えCSS
    たぶん、大丈夫だと思う。。。

    @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に直書の方がイイw
    106行目 <?php echo get_biz_vektor_header_image_home();?> を削除して、

    <div id="topMainBnr">
    <div id="topMainBnrFrame">
    <div class="slideFrame"><img class="resImage-mobile" src="ヘッダー画像URL" alt="" /></div>
    </div>
    </div>

    を追加。
    class=”resImage-mobile” については、「レスポンシブ対応のクラス名」参照

    CSSだけでやっつけらえるもんですね。勉強になりました^^

    #3185

    Masayuki
    参加者

    ご返答、有り難うございます。

    >!?スライダー??
    >スライドショーの中身を使い分けたい??
    >もし、そうなら勘違いしてましたw
    質問の仕方が悪かったようで・・・大変失礼いたしました。

    >106行目 <?php echo get_biz_vektor_header_image_home();?> を削除して・・・
    お恥ずかしいですがPHPについてほぼ知識が無いため、ご返答いただかなければ上記方法は思い付きませんでした。

    早速、試してみます。
    後日、結果を書き込みいたします。

    #3186

    Masayuki
    参加者

    アドバイス(回答)頂いた通りの修正を行い、スマホ表示の時にPC表示の時とは違うヘッダー画像を表示させることが出来ました。有り難うございますm(_ _)m

    ただ...ヘッダー画像がスライドショーになってくれません。
    分からないなりに色々試してはみたのですが、根本的な部分が理解できていないためか、全く答えに近づけているような気がしません。

    スマホ表示の時のスライドショーの画像を変える方法をご存知ではないでしょうか?
    お分かりの方がおられましたらご回答宜しくお願い申し上げます。

    #3187

    magonote
    モデレーター

    やっぱ、スライドショーなんだw

    <div id="topMainBnr">
    <div id="topMainBnrFrame" class="flexslider">
    <ul class="slides">
    <li><span class="slideFrame"><img src="1つめの画像" alt="" /></span></li>
    <li><span class="slideFrame"><img src="2つめの画像" alt="" /></span></li>
    </ul>
    </div>
    </div>

    が、デフォ状態。
    スライドショーにした状態で、ソースに表示されているとおり、コピペすればいいです。
    あとは、さっきと同じ処理を。

    #3193

    Masayuki
    参加者

    有り難うございます。

    教えていただきました記述に、imgにclass=”resImage-mobile” を追加、切り替え用の画像を用意して無事にヘッダースライダーの表示を切り替える事ができました。

    有り難うございましたm(_ _)m

7件の投稿を表示中 - 1 - 7件目 (全7件中)

このトピックに返信するにはログインが必要です。