採用サイト制作に最適なWordPressテーマ「ISSUE」の機能概要

ワードプレステーマ別

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://tcd-theme.com/2016/06/google-develop.html

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

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

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