サポート » テーマ » ヘッダー部に挿入したスライダーのサイズを変更したい

  • 解決済 hhaa

    (@hhaa)


    テーマはtwentyfifteenです。
    プラグインを利用して、スマホアクセス時にヘッダー部にスライダーを表示しています。
    下記コードをheader.phpの該当箇所に挿入しています。

    <?php if ( is_home() || is_front_page() ) : ?>
    <?php if ( wp_is_mobile() ) : ?>
    <?php echo do_shortcode(‘[metaslider id=”404″]’); ?>
    <?php else: ?>
    <?php endif; ?>
    <?php endif; ?>

    このスライダーの幅を変更するためには、どのように記述すればよいでしょうか。他の要素の幅はそのままで、スライダーのみ、画面いっぱいの全幅で表示したいと考えています。

    ヘルプの必要なページ: [リンクを見るにはログイン]

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • ishitaka

    (@ishitaka)

    こんにちは

    下記の CSS ではどうでしょうか。

    .site-branding {
    	padding-right: 0;
    }
    .site-branding .metaslider {
    	position: relative;
    	width: 100vw;
    	left: 50%;
    	padding: 0;
    	transform: translateX(-50%);
    }
    Toshiyuki Honda

    (@rocketmartue)

    Metaslider の編集画面の右側に「高度な設定」というメニューがありますので、「引き伸ばす 100%幅で表示」にチェックを入れてください。

    Toshiyuki Honda

    (@rocketmartue)

    https://surfershomehana.net/ のサイトを確認してみました。
    スマホ用のスライダーの表示コードを記入する位置が
    <p class="site-description">三重県伊勢エリア・国府の浜の駐車場兼サーフショップです。</p>
    の下になっていますが、この位置だと
    <div class="site-branding"><header id="masthead" class="site-header" role="banner">に padding が設定されているので、100%表示になりません。
    </header><!-- .site-header -->の下に移動してみてください。

    hhaa

    (@hhaa)

    @ishitaka さま
    @rocketmartue さま
    ご両名、ご回答ありがとうございました。それぞれ違うやり方ですが、どちらもうまくいきました。
    着眼点等、大変参考になります。ありがとうございます。

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