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

TCDテーマSOURCE:スマホトップページの画像スライダーの高さを変更する方法

Q.スマホ表示でトップページ画像スライダーの縦幅が大きく、横が見切れるので調整したい。

A.下記の方法でカスタマイズしてください。

カスタムCSSに下記の内容を記載下さい。

@media only screen and (max-width: 767px) {
#header_slider { height: ●vh; }
#header_slider .item { height: ●vh; }
.use_animation #index_3box_header.animation_element .headline { opacity:1; }
.use_animation #index_3box_header.animation_element .desc { opacity:1; }
}

●に任意の値を設定ください。(デフォルトは90です)

(補足)
通常ですと、画面のスクロールに合わせてスライダーから下のコンテンツが出現しますが、
画像スライダーの高さを調整すると、スクロール前の状態(=コンテンツ出現アクション前)が画面下部に表示されるため空白があるように見えてしまいます。

そのため、上記のカスタムCSSでは、.use_animation…の部分で、
スクロールなしの状態でも3点ボックスコンテンツを表示させるよう記述しています。

The following two tabs change content below.

RM

一年中麦茶を飲んでいます。

TCD LABO ご利用上の注意

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

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

お問合せ・ご要望

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