InDESIGN, WEB DIRECTION

Lightningのスライダー横幅変更方法・ヘッダー下グレーの影の消し方【WordPressテーマ】


有名&優秀な無料WordPressテーマ、Lightning(ライトニング)のカスタマイズ方法です。
今回は自分のための覚書なのでスクショなしで、すみません!

Lightningのスライダーの横幅を変更する方法

デフォルトのスライダーは横幅が画面いっぱいになっています。
ただ、写真の横幅が足りない(足りるようにズームすると、見栄えが悪くなる)
ということはあると思います。

写真のタテヨコ比は基本的に下記引用のサイズです。

デジタル一眼レフカメラの比率は3:2が、コンパクトタイプのデジタルカメラの比率は4:3が一般的です。スマートフォンでは、iPhoneが3:2、アンドロイドでは4:3や16:9が選べる機種もあります。

出典:https://ptl.imagegateway.net/contents/original/glossary/%E3%82%A2%E3%82%B9%E3%83%9A%E3%82%AF%E3%83%88%E6%AF%94.html

一方、Lightningの推奨画像サイズは1900*600pxと、
かなり横に長いです。

となると、新規に写真撮影しないと、
スライダーにぴったりくる写真がない…

ということもあるかと思います。
そんなときに、スライダー自体の横幅を縮め、
スライダーを中央に寄せるカスタマイズはどうでしょう?

追加CSSに下記を記述します。

.carousel {
border-bottom: 1px solid rgba(0,0,0,.05);
display: block;
overflow: hidden;
width: 80%;
margin: 0 auto;
}

ヘッダー下グレーの影の消し方

スライダーの横幅を縮めると、ヘッダー下のグレーの影が気になる方もいるでしょう。
ということで、そちらも消去する方法です。

追加CSSに下記を記述します。

header.siteHeader {
border-bottom: 0px solid rgba(0,0,0,0);
box-shadow: 0 0px 0px rgba(0,0,0,0);
}

注意

このやり方ですと、スマホのときも画像サイズが80%になります。

PCは80%でいいけど、スマホの時は、100%にしたい、

という方は別の記述が必要になります。
自分は、スマホも80%でいいか、と思っているので、
そこまでは調べきれてないです、すまぬ!

By
0

You may also like

Leave a Reply

CAPTCHA