[ 解決済 ] VK All in One Expansion Unitを有効化するとスライドショーの高さが変わらない

VWSとは フォーラム All in One Expansion Unit [ 解決済 ] VK All in One Expansion Unitを有効化するとスライドショーの高さが変わらない

[ 解決済 ] VK All in One Expansion Unitを有効化するとスライドショーの高さが変わらない

  • このトピックには7件の返信、3人の参加者があり、最後にうなこにより2年、 7ヶ月前に更新されました。
8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • 投稿者
    投稿
  • #62188

    mamikawata
    参加者

    ■ 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を有効化してもスライドショーの高さを短くして使いたいのですが方法はありますでしょうか?

    #62207

    うなこ
    モデレーター

    >トップスライドショーの画像の高さを600pxから450pxに変更したい。

    質問があります。
    このトップスライドショーは【カスタマイズ】→【Lightning トップページスライドショー】の機能であっていますか?
    (VK Blocks Proのスライダーブロックの可能性もありますので、聞いてみた次第です。)

    画像の高さを450pxに揃えても、150pxの余白ができてしまいます。

    ちょっとどのような状況なのかの詳細がわかりませんので、
    実際にサイトを見てみると、適切な回答が得られる可能性が高いです。
    差し支えなければサイトのURLや画像のキャプチャを貼ることはできますか?

    #62214

    mamikawata
    参加者

    トップスライドショーは【カスタマイズ】→【Lightning トップページスライドショー】の機能であっています。
    現在は、VK All in One Expansion Unitを停止していますので、イメージを画像にしました。
    元々、推奨サイズである高さ600PXのスライドショーにしていたのですが(グレー部分)、450pxに変更したくなりました。
    本来の動きであれば、スライドショーの画像を高さ450px(ピンク部分)にすれば、自動でサイズ調整されるかと思いますが、フロントページのコンテンツ(グリーン部分)が上に上がってこないというか、150PXの隙間ができたままになります。
    スライド左右にある<>も600PXのセンターにあるままです。
    伝わりましたでしょうか?

    Attachments:
    You must be logged in to view attached files.
    #62220

    うなこ
    モデレーター

    返信ありがとうございます。

    本来の動きであれば、スライドショーの画像を高さ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を添付することはできますか?

    • この返信は2年、 7ヶ月前にうなこが編集しました。
    #62223

    mamikawata
    参加者

    ご返信ありがとうございます。
    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はこれぐらいなのですが、削除してみても変わりませんでした。

    #62227

    トップページの編集画面で カスタム CSS の中味を確認してみると、なにか見つかるかもしれません。

    添付画像をご参照ください。

    【以下、追記です。症状とは関係なさそうですが…】

    この CSS って、意図した通りの動きをしていますか?

    * text-shadow: の最後に ; がないです。
    * margin の単位がないです。

    • この返信は2年、 7ヶ月前に対馬 俊彦が編集しました。
    Attachments:
    You must be logged in to view attached files.
    #62233

    mamikawata
    参加者

    ありがとうございます。

    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 ); }
    }
    —————-
    削除したところ、希望通りスライドショーの高さが調節されました。
    うなこ様、対馬様、本当にありがとうございました。

    #62245

    うなこ
    モデレーター

    解決してよかったです!
    対馬さんの回答の所に「ベストアンサーにする」ボタンが表示されていると思いますので、
    表示されていたら是非「ベストアンサーにする」をつけるようによろしくお願いいたします。

    ※モデレーター以上のユーザーはスタッフになりますので、ベストアンサーが付けれなくなっております。

    • この返信は2年、 7ヶ月前にVektor,Incが編集しました。
    • この返信は2年、 7ヶ月前にうなこが編集しました。
8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • このトピックに返信するにはログインが必要です。