Q.スマホで閲覧した際トップページのスライダー画像が左右見切れるのを回避したい
スマホで閲覧した際、トップページのスライダー画像が小さくなるため、自動的にサイズを調整していますが、そのために起こる左右の見切れを回避する方法です。
A.下記のphpファイルの該当箇所を編集してください
編集するファイル:page-welcome.php
編集する箇所:
<div class="slider heightasviewport has-background animate" data-order='0' data-parallax="scroll" data-image-src="<?php echo $options['slider_image1']; ?>"></div> <div class="opaque slider heightasviewport has-background animate" data-order='1' data-parallax="scroll" data-image-src="<?php echo $options['slider_image2']; ?>"></div> <div class="opaque slider heightasviewport has-background animate" data-order='2' data-parallax="scroll" data-image-src="<?php echo $options['slider_image3']; ?>"></div>
↓
<?php if(!is_mobile()){ ?> <div class="slider heightasviewport has-background" data-order='0' data-parallax="scroll" data-image-src="<?php echo $options['slider_image1']; ?>"></div> <div class="opaque slider heightasviewport has-background" data-order='1' data-parallax="scroll" data-image-src="<?php echo $options['slider_image2']; ?>"></div> <div class="opaque slider heightasviewport has-background" data-order='2' data-parallax="scroll" data-image-src="<?php echo $options['slider_image3']; ?>"></div> <?php }else{ ?> <div class="slider heightasviewport has-background" data-order='0' data-parallax="scroll" data-image-src="【スマホ用画像URL1】"></div> <div class="slider heightasviewport has-background" data-order='1' data-parallax="scroll" data-image-src="【スマホ用画像URL2】"></div> <div class="slider heightasviewport has-background" data-order='2' data-parallax="scroll" data-image-src="【スマホ用画像URL3】"></div> <?php }; ?>
この記事は役に立ちましたか?
もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!