[ 解決済 ] VK All in One Expansion Unitを有効化するとスライドショーの高さが変わらない
[ 解決済 ] VK All in One Expansion Unitを有効化するとスライドショーの高さが変わらない
- このトピックには7件の返信、3人の参加者があり、最後に
により2年、 10ヶ月前に更新されました。
-
投稿
-
■ WordPress のバージョン
5.8.3■ テーマ・プラグインは全て最新版で確認してください。
確認しました。■ 子テーマをご利用の場合は親テーマに変更して症状が改善するか確認してください。
確認しました。■ テーマの種類
Lightning Pro■ テーマのバージョン
8.13.3■ スキンの種類
Pale II■ スキンのバージョン
8.1.8■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。■ プラグインの種類・バージョン
9.70.2.0■ 期待する動作
トップスライドショーの画像の高さを600pxから450pxに変更したい。■ 自分で試した事
画像の高さを450pxに揃えても、150pxの余白ができてしまいます。
プラグインを一つずつ無効化して確認したところ、VK All in One Expansion Unitを無効化すると、きちんとスライドショーの高さが収まりました。■ 症状が発生するブラウザ
Chorme、Edge（いずれもWindows）■ 実際の症状
VK All in One Expansion Unitを無効化してしまうと、カスタムCSSなど使えなくなりそれはそれで困ります。VK All in One Expansion Unitを有効化してもスライドショーの高さを短くして使いたいのですが方法はありますでしょうか？>トップスライドショーの画像の高さを600pxから450pxに変更したい。
質問があります。
このトップスライドショーは【カスタマイズ】→【Lightning トップページスライドショー】の機能であっていますか？
（VK Blocks Proのスライダーブロックの可能性もありますので、聞いてみた次第です。）画像の高さを450pxに揃えても、150pxの余白ができてしまいます。
ちょっとどのような状況なのかの詳細がわかりませんので、
実際にサイトを見てみると、適切な回答が得られる可能性が高いです。
差し支えなければサイトのURLや画像のキャプチャを貼ることはできますか？トップスライドショーは【カスタマイズ】→【Lightning トップページスライドショー】の機能であっています。
現在は、VK All in One Expansion Unitを停止していますので、イメージを画像にしました。
元々、推奨サイズである高さ600PXのスライドショーにしていたのですが（グレー部分）、450pxに変更したくなりました。
本来の動きであれば、スライドショーの画像を高さ450px（ピンク部分）にすれば、自動でサイズ調整されるかと思いますが、フロントページのコンテンツ（グリーン部分）が上に上がってこないというか、150PXの隙間ができたままになります。
スライド左右にある＜＞も600PXのセンターにあるままです。
伝わりましたでしょうか？返信ありがとうございます。
本来の動きであれば、スライドショーの画像を高さ450px（ピンク部分）にすれば、自動でサイズ調整されるかと思いますが、フロントページのコンテンツ（グリーン部分）が上に上がってこないというか、150PXの隙間ができたままになります。
私の環境では、症状が確認できませんでしたので、VK All in One Expansion Unitを停止すると正常に見えるとおっしゃっておりましたので、もしかすると追記されたCSSが原因ではないかと思いました。
VK All in One Expansion Unitを無効化してしまうと、カスタムCSSなど使えなくなりそれはそれで困ります。
一度、VK All in One Expansion Unitに追加したCSSのご確認をしてみて、スライドショー部分にheightの指定が書いていないか、ご確認お願いいたします。
もしくはVK All in One Expansion Unitに追加したCSSを添付することはできますか？
ご返信ありがとうございます。
VK All in One Expansion Unitを有効化した後、追加したCSSを全削除してみましたが、変わりませんでした。
追記していたcssはこちらです。
——–
/* インスタボタン */
.btn-instagram {
background: linear-gradient(45deg, rgba(254,212,117,1) 0%,rgba(229,61,93,1) 50%,rgba(194,49,134,1) 70%,rgba(156,56,187,1) 100%);
border-radius: 5px;
color: #fff;
display: inline-block;
font-weight: 400;
padding: 8px;
text-align: center;
text-decoration: none;
transition: all .2s linear;
width: 150px;
}/* 投稿前後記事の非表示 */
.postNextPrev {
display: none;
}/* ヘッダー右 */
.siteHeader_sub { width: 70%; }
————あと、子テーマのstyle.cssに追記しているスライドショーのカーソルのカスタマイズcssはこちらです。
————
/* スライドショー カーソル */
.carousel-indicators li {
display: inline-block;
width: 20px;
height: 20px;
margin: 5px;
background-color: #fff;
text-shadow: 0 1px 2px rgba(0,0,0,1)
text-indent: -999px;
cursor: pointer;
border-radius: 20px
}.carousel-indicators .active {
width: 20px;
height: 20px;
margin: 5;
background-color: #D80000
}
——————
関連がありそうなcssはこれぐらいなのですが、削除してみても変わりませんでした。ありがとうございます。
VK All in One Expansion Unitを有効化した後、トップページ（固定ページ）の「カスタムCSS」を確認したところ、
下記の記述がありました！
—————–
@media (min-width: 768px) {
.carousel { height: calc( ( 100vw – 20px ) * ( 600 / 1900 ) + 1px ); }
}
@media (max-width: 767px) {
.carousel { height: calc( 100vw * ( 530 / 750 ) + 1px ); }
}
—————-
削除したところ、希望通りスライドショーの高さが調節されました。
うなこ様、対馬様、本当にありがとうございました。
- このトピックに返信するにはログインが必要です。
