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

TCDテーマVOGUE:スマホでのスライダー画像を全体表示する方法

Q.スマホでのスライダー画像を全体表示するにはどうしたらいいでしょうか?

スマホ(iphone)でサイトを見た時に、トップページだけ画面右に縦に空きができて、トップ画像も縮小されず、一部分しか表示されません。

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

スライダーの画像についてですが、
こちらは、
外観>TCDテーマオプション>トップページ>ヒーローヘッダーの設定
にて「背景画像(タブレット・スマホ用)」にご設定の画像が、
スマートフォン表示時に表示されますが、
画像サイズが画面の表示領域より大きい場合は、
真中部分が表示される仕様です。
画像全体表示されたい場合は、
カスタムCSSにて下記内容をご記述くださいませ。

@media only screen and (max-width: 767px) {
  .p-hero-header__slider-item {
    background-size: contain;
    background-size: 100% 100%;
  }
}

画像を原寸大で表示されたい場合は、background-size:100% 100%を、
画像を画面全体ちょうどに合わせられる場合は、background: containをご削除くださいませ。

また、スマートフォン用の画像をご作成されるなどのご調整も併せてお試しくださいませ。
他の箇所をご変更されたい場合は、該当箇所の要素を指定頂きまして、設定内容をご記述くださいませ。

どのようなID名、クラス名が使用されているかご確認頂く方法としては、
ブラウザに搭載されております「開発者モード」という機能をご使用頂きましたら、
簡単にご確認頂けるかと思います。
詳しくは下記の記事が参考になると思いますので、ご確認の上、お試しくださいませ。
http://design-plus1.com/tcd-w/2016/06/google-develop.html

The following two tabs change content below.

タカ

スポーツが好きな30代男性です。 休みの日はフットサルやバスケットをしています。

関連記事

TCD LABO ご利用上の注意

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

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

お問合せ・ご要望

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