高機能な不動産物件ポータルサイトが作成できるWordPressテーマ「GRAVITY」
ワードプレステーマ別

TCDテーマHAKU:ヘッダーコンテンツのスライダーを比率固定にする方法

WordPressテーマ「NULL」

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

ダウンロード

Q.ヘッダーコンテンツのスライドを比率固定にする方法を教えてください

・トップページのヘッダーコンテンツのスライダーに登録されている画像を、切り取られずに全体を表示させたいです。
・トップページのメインで表示させる動画をフルサイズで表示させたいです。

▼変更後のイメージ(参考:デモサイト
変更後イメージ

A.下記の方法でご対応ください。

TCDテーマ>基本設定>カスタムCSSに入力します。下記例は横1980px、縦1080pxの画像を利用した例になります。

  #header_slider,#header_slider .item {
    aspect-ratio: 1980 / 1080;
    height: auto !important;
  }

※PCでのみ、同じ比率で表示させる場合:
冒頭に @media not all and (max-width: 750px){ を、末尾に } を追記してください。

※SP時のみ、比率を指定する場合:
冒頭に @media screen and (max-width: 750px) { を、末尾に } を追記してください。

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

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

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