[ 解決済 ] トップページスライドショーの3枚目だけが狭くなる

[jkweb]

■ WordPress のバージョン
6.5.2

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ 子テーマをご利用の場合は親テーマに変更して症状が改善するか確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
15.21.1

■ Pro Unit のバージョン
0.26.9

■ スキンの種類
Origin III

■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。

■ 期待する動作
トップページスライドショーの画像全てを同じ幅で表示されるようにしたいです。
スライド効果はfadeです。

■ 自分で試した事
・スライドショー用に縦幅のサイズが同じ画像を用意
・Lightning機能設定の「theme.json を有効にする」にチェックが入っていることの確認
・スライドショーを全幅ではなくするために追加cssに以下を記述中です。

.ltg-slide picture {
max-width:1300px;
height: auto;
}
.ltg-slide .swiper-slide>a {
max-width:1450px;
height: auto;
}

このCSSを消したら3枚とも同じ縦幅横幅で表示されましたが、3枚とも全幅ではない少し狭い幅で表示させたいです。

■ 症状が発生するブラウザ
chrome

■ 実際の症状
スライドショー用に縦幅の同じ画像を3枚用意し、スライドショーに設定したところ、なぜか3枚目に設定した画像だけ1枚目2枚目よりも横幅も縦幅も狭く表示されます。全画面表示の時のみにこの現象が起こり、カスタマイズを押して左側にサイト基本情報や色などの項目を表示させ、全画面から少し狭い画面になったときは問題なく1枚目2枚目と同じ幅で表示されます。
Lightningを使用している他のホームページのスライドショーで同じ画像を使用してみましたが、このような現象は起こりません。

■ その他特記事項
追加CSSに記載中のCSSはこちらになります↓

.site-footer-copyright p:nth-child(2) {
display: none;
}

/*サイトフッター非表示*/
.site-footer{
display:none;
}

/*フッター上部ウィジェットの下余白*/
.site-body-bottom .widget{
margin-bottom:0;
}

.ltg-slide picture {
max-width:1300px;
height: auto;
}
.ltg-slide .swiper-slide>a {
max-width:1450px;
height: auto;
}

/*上に戻るボタンカスタマイズ*/
.page_top_btn {
right: 20px;
bottom: 20px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: var(–vk-color-primary);
box-shadow: none;
/*background-image: url(“変更したいアイコンのURL”);*/
}

---

該当URL : https://*********

※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

[石川＠Vektor,Inc.]

Lightningのご利用ありがとうございます。株式会社ベクトルの石川と申します。

見てみましたが、外からだと詳しい原因がわかりませんでした。

おそらく個別の環境の問題かと思いますので、とりあえずスライドをブロックに置き換える方法でいかがでしょうか？

Lightning のトップページスライドショーを VK Blocks のスライダーブロックでカスタマイズする

一度お試しくださいませ。

[うなこ]

お世話になります、気づいた点がありましたので投稿します

石川さんのおっしゃる通り、個別で追加CSSに追加したCSSが問題のようです。

以下の部分ですが、最大幅が1300pxと1450pxと違うので、3枚目はリンクが設定していないので（aタグがつかない）幅が１３００pxになっているのだと思います。
数字を合わせるのが一番管理しやすいかなと思います。

.ltg-slide picture {
max-width:1300px;
height: auto;
}
.ltg-slide .swiper-slide>a {
max-width:1450px;
height: auto;
}

[jkweb]

ご返信ありがとうございます。
追加CSSに記述していた

.ltg-slide picture {
max-width:1300px;
height: auto;
}
.ltg-slide .swiper-slide>a {
max-width:1450px;
height: auto;
}

こちらのCSSを、両方ともmax-widthを1450pxにしたら解決しました。
ネットで見つけたカスタム方法をそのままコピペしたため今回のようなことが起きたのだと思います。
ありがとうございました。

[投稿者]

投稿