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

2022年7月15日(金)2024年7月23日(火) 対馬俊彦

対馬俊彦

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 風 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 ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

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

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

最適なホームページ

を制作いたします

制作費用	クオリティを落とさずに価格を抑えたサイトを制作します
必要十分	お問い合わせフォーム、新着情報など必要なものが最初から揃っています
サポート	1年間のサポートがついて安心初めてでもホームページを活用できます

もっと詳しく