ホテル・結婚式場などのホームページがつくれるエレガントなデザインのテンプレート「CANON」

ワードプレステーマ別

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

WordPressテーマ「NULL」

TCD LABOはWordPressテーマ「NULL」を使用して作られています。

ダウンロード

Q.TOPページのスライダーの高さを変更する方法はありますか。

A.以下の方法にてご対応ください。

外観→TCDオプション→基本設定→カスタムCSSに入力してください。

/* PC */
#header_slider { height: 〇px; }
/* スマホ */
@media screen and (max-width: 730px){
  #header_slider { height: 〇px; }
}

〇を任意の数値に変更してください。

備考画面幅1280ピクセルまで → スライダー画像の高さが最大450ピクセルに固定されます。
画面幅1281ピクセル以上 → 同画像がおおよそ16:9の縦横比

上記の仕組みのため、画面幅が広くなったときに高さの最大値を設定したい場合は次のようなCSSにてアレンジできます。

#header_slider{
  max-height: 〇px;
}

 
文字の位置を調整されたい場合は以下の記述を追加してください。

/* PC */
#header_slider .caption { margin-top: -〇px; }
/* スマホ */
@media screen and (max-width: 730px){
  #header_slider .caption { margin-top: -〇px; }
}

〇を任意の数値に変更してください。

この記事は役に立ちましたか?

もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

同じテーマのカスタマイズ記事