質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.63%

カルーセル?Webトップの画像が横にスライドされるやつについてなのですが、

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 622

satoshi1111

score 11

私の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(); ?>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • Lhankor_Mhy

    2018/09/22 10:26

    『画像スライドの部分がパソコン用の大きさ(細さになってしまいます。)』とは、具体的にはどのような状況ですか? カルーセルが小さすぎる、ということですか?

    キャンセル

  • satoshi1111

    2018/09/22 18:25

    mts10806 ありがとうございます。そうしてみます。

    キャンセル

  • satoshi1111

    2018/09/22 18:26

    Lhankor_Mhy そうですね、縦に長いのが横になってしまいます。バナーを抜いたら元に戻ります。

    キャンセル

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.63%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる