ワードプレスのテーマ「lightning」のスライドショーの幅をかえたい！
ナカノヒトワードプレスのテーマ「lightning」は大変素晴らしいテーマです。
しかも無料で使えるトコが本当に素晴らしい、PRO版もお手頃価格なので、必要があれば有料版を購入しようかと思います。
さて、今回はlightningのスライドショーの全幅を変更したいなって話です。
全幅の方がとっても優雅で、ダイナミックですよね。
良いと思います！！
ですが、文字を載せたスライドショーの場合は、全幅だと画面サイズの大きいPCで見た場合
なんかボヤケル・・・
ん～。推奨が1900PXなんですが、1900PXの画像作るの結構面倒だし、容量もデカイし・・・
って事で今回は1200PX幅固定の画像を作り、サイト中央に設置する事にしました。
追加CSSはこんな感じ。
.ltg-slide picture {
max-width:1200px;
height: auto;
}
.ltg-slide .swiper-slide>a {
max-width:1200px;
height: auto;
}
※1200PXの所は任意でどうぞ。
なんとなく画像が小さくなると横の余白が気になる・・・
そんな場合は、背景に色を入れるといいかもしれません
追加CSSはこちら。
※色のトコは任意でどうぞ。
.swiper-container {
background-color: #dcf2fc;
}
旧バージョンの「lightning」の場合はこちら
上記の追加CSSで変更できなかった場合は、以下もお試しください。
上記記事は、2021年5月現在のライトニングのスライドショーに適用されますが、少し古いバージョンの物だとCSSのクラス名が違っていますので、以下を追加してお試しください。
.carousel-inner {
max-width:1200px;
margin: 0 auto;}
.carousel {
background-color: #ccc;
}
同様にライトニングでスライドショーの横幅を変更したく、ネットで検索していたらこちらに辿りつきました。
ワードプレスの追加CSS欄にコピペしてみましたが、反映されません。
やり方が違うのでしょうか？
初心者につき、すいませんが教えていただけますか？
宜しくお願い致します。
tk様
サイトの訪問ありがとうございます。
ご返信がおくれましたが、その後いかがでしょうか
CSSに追加してもキャッシュなどで変わってないように見える場合がございますので確認してください。
ナカノヒトさま
スライド画像の文字がぼやけてしまい
画像サイズを小さくできないかと検索してこの記事を見つけました。
「CSS追加」にそのまま貼付けするだけで
画像サイズ小さくできました。
悩み解決できました。
有難うございました。
便利屋フォーカス様
サイト訪問ありがとうございます。
お役に立てて何よりです。
Lightningのスライドショーの幅を変更したくて検索していたところ、こちらのサイトにたどり着きました。
さっそく記述の通りに、下記ＣＳＳを追加したのですが、反映されません。何故でしょうか？
.ltg-slide picture {
max-width:1200px;
height: auto;
}
Casheかと思いリフレッシュしても変わりません。
ご教示願えればうれしいです。
ヤタガラス様
サイト訪問ありがとうございます。
Lightningのスライドショーですが、記事はLightningの最新版の変更になります。
前のバージョンのテーマですと、こちらのCSSを追加するといかがでしょうか？
.carousel-inner {
max-width:1200px;
margin: 0 auto;
}
幅は1200PXですので任意で変更されてください。
背景の色も変えたい場合は以下も追加されてください。
.carousel {
background-color: #ccc;
}
はじめまして。Wordpress初心者です。
lightningスライドショーの全幅がどうしても気になって検索…
こちらのページにたどりつきまして、無事に変更することができました！
ものすごくスッキリしました。ありがとうございました。
あいも様
サイト訪問ありがとうございます。
お役に立てて何よりです。
はじめまして。
lightningスライドショーの大きさを小さくしたいなと思い
こちらのページにたどりつきました。
幅は無事に変更することができ、色も変えることができました。
ありがとうございます。
高さの変更方法も知りたいのですが、教えていただけますか？
Wordpress初心者です。どうぞよろしくお願いします。
いと様
サイト訪問ありがとうございます。
高さですが、高さは自動（オート）になっております↓
height: auto;
これは、幅サイズに合わせて高さを自動計算し、縦横の比率を元画像に合わせていると言う事です。
ですので、元画像の高さを先にトリミング（写真の下か上をカット）し、スライドショーに画像を入れてください。