私のHPでは上画像が横にスライドされるやつがついていて、スマホだとそれがスマホ用に若干縦長に大きく表示されるようになっています。
そして、HTMLにリンク付きのバナーをその下に入れたのですが、パソコン用のHPは良かったのですが、
スマホで見てみると、画像スライドの部分がパソコン用の大きさ(細さになってしまいます。)
どうすれば、画像が横にスライドされるやつはそのままで、その下にリンク付きのバナーを入れられますか?
HTML上の画像、URLは消してます。
どうかよろしくお願い致します。
これを入れたいです。[<div class="kaigyou"><br></div> <div class="web"> <a href="http/plan/" target="_blank"><img src="http.jpg" alt=""></a> </div>] <?php get_header(); ?> <!--// カルーセル開始 //--> <div id="carousel-first-generic" class="hidden-xs carousel slide" data-ride="carousel" data-interval="8000"> <!-- Indicators --> <ol class="carousel-indicators ind"> <li data-target="#carousel-first-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-first-generic" data-slide-to="1"></li> <li data-target="#carousel-first-generic" data-slide-to="2"></li> <li data-target="#carousel-first-generic" data-slide-to="3"></li> <li data-target="#carousel-first-generic" data-slide-to="4"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <!--// カルーセル1個目 --> <div class="item active"> <img src="top画像(2018).jpg" width="1800" height="730" alt="アンパン" class="img-responsive maximage" /> </div> <div class="item"> <img src="画像.jpg" width="1800" height="730" alt="カレー" class="img-responsive maximage" /> </div> <div class="item"> <img src="http:/.jpg" width="1800" height="730" alt="食" class="img-responsive maximage" /> </div> <div class="item"> <img src="http://ww1.jpg" width="1800" height="730" alt="パン" class="img-responsive maximage" /> </div> <div class="item"> <img src="htフェ1.jpg" width="1800" height="730" alt="ビフェ" class="img-responsive maximage" /> </div> </div> <a class="left carousel-control" href="#carousel-first-generic" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> </a> <a class="right carousel-control" href="#carousel-first-generic" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> </a> </div><!--カルーセル終わり--> <!--// カルーセル開始 //--> <div id="carousel-second-generic" class="visible-xs carousel slide" data-ride="carousel" data-interval="8000"> <!-- Indicators --> <ol class="carousel-indicators ind"> <li data-target="#carousel-second-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-second-generic" data-slide-to="1"></li> <li data-target="#carousel-second-generic" data-slide-to="2"></li> <li data-target="#carousel-second-generic" data-slide-to="3"></li> <li data-target="#carousel-second-generic" data-slide-to="4"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <!--// カルーセル1個目 --> <div class="item active"> <img src="http://www.画像(2018).jpg" width="780" height="730" alt="" class="img-responsive maximage" /> </div> <div class="item"> <img src="http画像.jpg" width="780" height="730" alt="" class="img-responsive maximage" /> </div> <div class="item"> <img src="h画像.jpg" width="780" height="730" alt="" class="img-responsive maximage" /> </div> <div class="item"> <img src="htt.jpg" width="780" height="730" alt="" class="img-responsive maximage" /> </div> <div class="item"> <img src="1.jpg" width="780" height="730" alt="" class="img-responsive maximage" /> </div> </div> <a class="left carousel-control" href="#carousel-second-generic" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> </a> <a class="right carousel-control" href="#carousel-second-generic" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> </a> </div><!--カルーセル終わり--> <div class="kaigyou"><br></div> <div class="web"> <a href="http/plan/" target="_blank"><img src="http.jpg" alt=""></a> </div> <div class="container-fluid text-center mrt30"> <img src="http://www.jpg" alt="!" /> </div> <div class="container-fluid text-center pm50"> <a href="http:/calendar/" target="_blank"><img src="http://www.jpg" width="520" alt="予" class="over"></a> </div> <div class="container-fluid"> <div class="container"> <div class="row topborder"> <div class="col-sm-3 col-xs-12 text-center menus"> <a href="<?php echo home_url(); ?>/concept/"> <div class="menupic"> <img src="<?php bloginfo('template_url'); ?>/.jpg" width="210" height="201" class="hidden-xs img-responsive m-maxwidth" alt=""> <img src="<?php b.jpg" width="640" height="380" class="visible-xs" alt=""> </div> <p class="hidden-xs"><br> </p> <button class="btn btngreen2"</button></a> </div> </div> </div> <?php //pagedに値をセットするのを忘れずに! $the_query = new WP_Query( array( 'paged' => get_query_var( 'paged' ) ? intval( get_query_var( 'paged' ) ) : 1, 'post_type' => 'post' , 'category__not_in' => 6, 'posts_per_page' => 4 ) ); ?> <?php if ( $the_query->have_posts() ) while ( $the_query->have_posts() ) : $the_query->the_post(); ?> <div class="news_box col-sm-3 col-xs-12 text-center"> <a href="<?php the_permalink(); ?>" class="thum" style="background:url(<? the_field('アイキャッチ') ?>);width:75%;height:0px;padding-bottom:75%;background-size:cover;display:block;margin:0 auto 20px;"></a> <a class="news_ttl" href="<?php the_permalink(); ?>"><? the_title() ?></a><br> <?php echo mb_substr(strip_tags($post-> post_content),0,55).'...'; ?> </div> <?php endwhile; ?> <?php wp_reset_postdata(); ?> </div> </div> <?php get_footer(); ?>
あなたの回答
tips
プレビュー