有名&優秀な無料WordPressテーマ、Lightning(ライトニング)のカスタマイズ方法です。
今回は自分のための覚書なのでスクショなしで、すみません!
Lightningのスライダーの横幅を変更する方法
デフォルトのスライダーは横幅が画面いっぱいになっています。
ただ、写真の横幅が足りない(足りるようにズームすると、見栄えが悪くなる)
ということはあると思います。
写真のタテヨコ比は基本的に下記引用のサイズです。
デジタル一眼レフカメラの比率は3:2が、コンパクトタイプのデジタルカメラの比率は4:3が一般的です。スマートフォンでは、iPhoneが3:2、アンドロイドでは4:3や16:9が選べる機種もあります。
一方、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%でいいか、と思っているので、
そこまでは調べきれてないです、すまぬ!