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

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

  • 解決済 hhaa

    (@hhaa)


    4年、 9ヶ月前

    テーマは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)

    4年、 9ヶ月前

    こんにちは

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

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

    (@rocketmartue)

    4年、 9ヶ月前

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

    Honda

    (@rocketmartue)

    4年、 9ヶ月前

    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)

    4年、 9ヶ月前

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

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「ヘッダー部に挿入したスライダーのサイズを変更したい」には新たに返信することはできません。

トピックタグ

表示