バーバーや美容室のホームページがつくれるWordPressテーマ「HOMME」

ワードプレステーマ別

TCDテーマORION:スライダー画像が見切れる時の対処方法

Q.スライダー画像が見切れてしまいますがどうしたらいいでしょうか?

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

スライダー部分は、設定された画像を背景画像として表示しておりますが、画面全体を覆う形になるように画像を拡大・縮小する仕様となっております。その際、画像の縦横比は保持されるため、画像のサイズ、デバイスの画面サイズによっては上下、または左右が見切れることがございます。

下記箇所をご変更頂くことで画像の拡大・縮小を解除することができます。尚、画像の左右が見切れることはなくなるかと思われますが、その代わりに余白が発生することが予想されますので予めご了承ください。

下記、編集するファイルと編集する箇所になります。
編集するファイル:header.php
編集する箇所:

<div class="item"  style="background-image:url(<?php echo esc_attr($image[0]); ?>); background-size:cover;  background-position:center;">

<div class="item"  style="background-image:url(<?php echo esc_attr($image[0]); ?>);  background-size:contain; background-repeat:no-repeat; background-position:center;">

※同じコードが3か所ございます。上から順に、「ヘッダーコンテンツのタイプ」が「画像スライダー」「動画を背景に表示」「YouTubeの動画」のときに使用されるものとなります。必要な箇所をご変更ください。

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

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

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