WordPressテーマTCDのカスタマイズを研究するサイト

スマホで閲覧した際トップページのスライダー画像が左右見切れるのを回避する方法

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 }; ?>

関連記事

TCD LABO ご利用上の注意

TCD LABO(ティーシーディー・ラボ)に掲載しているTCDテーマのカスタマイズ情報のご利用にあたっては、必ずカスタマイズするファイルのバックアップをご用意の上、ご利用者様責任において実施していただきますようお願いいたします。

カスタマイズの実施により生じたいかなる不具合等についてもTCD LABOはその責任を負いかねます。
何卒ご理解、ご了承の上、当サイトをご活用いただけますようお願い申し上げます。

お問合せ・ご要望

TCDLaboへのお問合せやご要望は
ご連絡フォーム をご利用ください。