スライドショーの幅をコンテナ幅に合わせるカスタマイズ

Lightning のスライドショーは初期状態では画面幅いっぱいに表示されますが、大きな画面で見たときのバランスを考えてスライドショーの幅を小さめにしたくなることがあると思います。

そのようなときのカスタマイズの一例を紹介します。

今回は、以下のようにコンテナ幅とぴったり合わせたレイアウトにしてみます。

Lightning のスライドショーの幅をコンテナ幅に合わせるカスタマイズ

カスタマイズ手順

子テーマの CSS などに以下の行を追加します。

@media (min-width: 1400px) {
  .ltg-slide picture,
  .ltg-slide .swiper-slide>a {
    max-width: calc( var(--vk-width-container) - var(--vk-width-container-padding) * 2 );
    display: block;
    margin: 0 auto;
  }
  .ltg-slide-text-set {
    max-width: calc( var(--vk-width-container) - var(--vk-width-container-padding) * 2 );
    padding: 0 15px;
  }
}

2024.1.29 CSS を変更

Lightning G3 Pro Unit を使ってコンテナサイズを変更した場合でもコンテナ幅とぴったり合うように、CSS を以下のように変更しました。

/* 変更前 */
max-width: 1110px;
/* 変更後 */
max-width: calc( var(--vk-width-container) - var(--vk-width-container-padding) * 2 );

下記の BizVektor 風も同様に変更してあります。

BizVektor 風にしてみました

さらに手を加えて、懐かしの BizVektor 風にしてみました。

BizVektor 風にしてみました

BizVektor 風 CSS 😋

@media (min-width: 1400px) {

  .ltg-slide picture,
  .ltg-slide .swiper-slide>a {
    max-width: calc( var(--vk-width-container) - var(--vk-width-container-padding) * 2 );
    display: block;
    margin: 0 auto;
  }

  .ltg-slide-text-set {
    max-width: calc( var(--vk-width-container) - var(--vk-width-container-padding) * 2 );
    padding: 0 15px;
  }

  .swiper-container {
    background-color: #ddd;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
    left: calc( ( 100vw - var(--vk-width-container) - var(--vk-width-container-padding) * 2 ) / 2 - 55px);
    background-color: #f0f0f0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
    right: calc( ( 100vw - var(--vk-width-container) - var(--vk-width-container-padding) * 2 ) / 2 - 55px);
    background-color: #f0f0f0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .ltg-slide .swiper-button-next:after, .ltg-slide .swiper-button-prev:after {
    font-size: 1.0em;
    color: #ddd;
  }

}

投稿者プロフィール

対馬 俊彦
対馬 俊彦魚沼情報サービス (新潟県南魚沼市)
【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、お手伝いいたします。

Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。

遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り(無料)を提示させていただきますので、お気軽にお問い合わせください。

メールでのお問い合わせはこちら

Lighting テーマ使用

WordPress サイト開設

スターターパック

  • デザイン済みパーツを組み合わせることで価格納期を大幅削減
  • プロが作ったクオリティが高いホームページ
  • サポート付き・ご自分でかんたんに情報発信できます