[ 質問者返信待ち ] 「PR バナー カラムメニューフィット_工務店」がWordPressバージョンアップしたらカバーの透明度やホバー時のアニメーションが機能しなくなりました

VWSとは フォーラム Lightning [ 質問者返信待ち ] 「PR バナー カラムメニューフィット_工務店」がWordPressバージョンアップしたらカバーの透明度やホバー時のアニメーションが機能しなくなりました

[ 質問者返信待ち ] 「PR バナー カラムメニューフィット_工務店」がWordPressバージョンアップしたらカバーの透明度やホバー時のアニメーションが機能しなくなりました

  • このトピックには19件の返信、3人の参加者があり、最後に田邊翔哉により1週前に更新されました。
15件の投稿を表示中 - 1 - 15件目 (全20件中)
  • 投稿者
    投稿
  • #106300

    田邊翔哉
    参加者

    ■ WordPress のバージョン
    6.7.2

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

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

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

    ■ テーマのバージョン
    バージョン: 0.6.0

    ■ Pro Unit のバージョン
    バージョン 0.29.2

    ■ スキンの種類
    Evergreen

    ■ スキンのバージョン
    バージョン 0.2.6

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

    ■ 期待する動作
    カバーの透明度やホバー時のアニメーションが戻ってほしい

    ■ 自分で試した事
    バージョンアップ後、再度入れ直し更新した。

    ■ 症状が発生するブラウザ
    Chrome、Safari、edge、Firefox

    ■ 実際の症状
    カバーの透明度がなくなり(css opacity:0)、やホバー時のアニメーション動作のtransitionが0秒になった。

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

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

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

    #106303

    うなこ
    モデレーター

    お世話になっております。

    カラムブロックの「カスタム CSS」設定が消えているように見えました。
    消えてしまった原因は現時点では不明ですが、もし同様のご経験がある方がいらっしゃいましたら情報を共有いただけますと幸いです。

    以下の手順で設定をご確認いただき、必要に応じて CSS を追加していただけますでしょうか?

    1. 該当のページを開き、「カラムブロック」を選択してください。
    2. 右側の設定パネルで「カスタム CSS」欄を確認してください。(添付画像参照)
    3. 以下の CSS が入っているかご確認ください。

    もし何も入っていない場合は、以下の CSS を「カスタム CSS」欄にコピーして貼り付けてください。

    /* フィットカラム hover時のエフェクト */
    selector .vk_button{
     position:relative;
    }
    selector .vk_button:not(.vkp_button-through-arrow)::before{/*背景スライドボタンは除外しないとおかしくなる*/
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      content: '';
      background: #000;
      opacity:0.4;
      transition: all 0.5s ease-out;
      z-index:-1;
    }
    selector .vk_button:hover::before {
      opacity: 0;
      transition: all 0.5s ease-out;
    }
    
    selector.vk-cols--fit--gap1.wp-block-columns {
      gap: 0px;
    }
    selector .wp-block-cover{
      overflow:hidden;
    }
    selector .wp-block-cover .wp-block-cover__image-background{
      transition: all 0.4s ease-out;
    }
    selector .wp-block-cover:hover .wp-block-cover__image-background{
      transform: scale(1.08);
      transition: transform 0.2s linear;
    }
    selector.alignfull .wp-block-cover__inner-container{/*スマホサイズで隙間ができるので追加*/
     max-width:100vw;
    }

    もしくは以下のパターンをコピーしていただき、カラムブロックの「カスタムCSS」をコピーして、該当のページのカラムブロックの「カスタムCSS」部分に貼り直してください。

    PR バナー カラムメニューフィット_工務店

    上記の手順をお試しいただき、改善されるかご確認いただけますでしょうか?

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

    お世話になります。株式会社ベクトルの石川と申します。

    ご連絡の件につきまして、他で症状が発生していないため原因の調査が難しい状況なのですが、
    今後の事も踏まえまして定期バックアップの設定いただければと思います。

    UpdraftPlus を使ったWordPressのバックアップ・復元

    今後同じような症状が発生した時にバージョンアップ前に戻せますし、
    具体的に何をどうバージョンアップしたかがわかると検証がしやすいです。

    よろしくお願いいたします。

    #106321

    田邊翔哉
    参加者

    うなこ様

    お世話になります。
    この度はご丁寧な改善手順の共有、ありがとうございます。
    ただ、いただいきました上記の方法試しましたが、改善されませんでした。

    他にも一度削除し再設置したりいろいろと試しましたが、改善されないようでした。
    該当のページを開き設置した際(管理画面内で)では通常に表示動作されております。「保存」しブラウザ上で確認すると、表示動作が確認できなくなります。

    Home


    ※1) こちらすでに設置した「PR バナー カラムメニューフィット_工務店」の上に、新たに「PR バナー カラムメニューフィット_工務店」を設置しました。

    ※2) 管理画面内での表示動作は下記にスクショを添付いたします。

    もし、他にも改善方法ございましたら共有いただけますと幸いです。よろしくお願いいたします。

    #106322

    キャッシュ系のプラグインなどによって装飾の設定などが消されているかもしれません。

    ベクトル製以外のプラグインを停止して、キャッシュを削除したり他のブラウザからページを表示して改善するか確認してください。

    #106323

    田邊翔哉
    参加者

    株式会社ベクトル
    石川様

    定期バックアップのご教示ありがとうございます。
    今回もバックアップデータは残してありますので、戻すことは可能になります。

    ただ、毎回wordpressバージョンアップされた際に戻すとなると手間がかかってしまいます。
    また、wordpressバージョンアップしないとセキュリティのリスクや、最新機能の利用不能、サイトの表示速度の低下などのデメリットが生じることがございます。

    今回はwordpress6.2.0 → wordpress6.6.2 へ自動でwordpressバージョンアップされました。

    それ以外の機能に関しましては大変満足しております。もし、他に改善対策案ございましたら共有いただけますと幸いです。
    よろしくお願いいたします。

    #106324

    田邊翔哉
    参加者

    株式会社ベクトル
    石川様

    早急にご回答ありがとうございます。
    「ベクトル製以外のプラグインを停止して、キャッシュを削除したり他のブラウザからページを表示して改善するか確認してください。」
    → こちらも試してみましたがやはり改善されませんでした。

    #106325

    この部分はCTAや固定ページ本文ブロックを経由して出力していますか?

    新規の固定ページに該当のパターンだけ貼り付けても消えますか?

    #106326

    田邊翔哉
    参加者

    こちらは、固定ページ本文ブロックに直接貼り付け(出力)しております。

    他ページでしたら、通常に表示動作されました。

    サービス案内

    #106327

    固定ページ本文ブロックや Call CTA ブロックから呼び出しても手元の環境では該当の症状が確認できませんでした。

    以下の手順をお試しください。

    1. トップページの固定ページの内容を新規固定ページにペースト
    2. カラムバナーの部分を削除して、パターンから貼り付けなおし
    3. その固定ページでホバーアニメーションが正常に動作するか確認
    4. 設定 > 表示設定 でトップページに指定する固定ページを2で作成したページに変更
    5. 公開画面でホバーアニメーションが正常に動作するか確認

    #106329

    田邊翔哉
    参加者

    現状お見せしているサイトは制作中のテスト環境になります。
    上記の方法で改善できたとしても、今後運用中のサイト(お客様環境など)で固定ページ変更するのは手間とリスクがかかってくるかと思われます。

    根本的な原因を把握して対策をとりたいところではありますが、石川様の環境では症状が確認できないので原因を把握しようがない状況にあたりますよね。もし、可能でしたらwordpressバージョンを手動でwordpress6.6.2へアップデートし確認していただけることは可能でしょうか?
    ちなみに使用している環境はxサーバーになります。

    どうぞよろしくお願いいたします。

    #106330

    > 現状お見せしているサイトは制作中のテスト環境になります。
    > 上記の方法で改善できたとしても、今後運用中のサイト(お客様環境など)で固定ページ変更するのは手間とリスクがかか> ってくるかと思われます。

    > 根本的な原因を把握して対策をとりたいところではありますが

    1. トップページの固定ページの内容を新規固定ページにペースト
    2. カラムバナーの部分を削除して、パターンから貼り付けなおし
    3. その固定ページでホバーアニメーションが正常に動作するか確認

    これをする事によって、トップページに指定している固定ページの内容に問題があるのか、それともトップページの外側の要素に問題があるのかの原因を探るためにお願いしています。

    #106331

    ちなみに私の環境では WordPress 6.7.2 でも 6.6.2 でも問題なく動作するので WordPress コアのバージョンの問題ではないと考えられます。

    #106332

    また、途中 6.2.0 との表記がありましたが、弊社製品の動作保証は最新バージョン -2 まで(現在は 6.7 までが最新なので 6.5まで) となります。
    6.2 にパターンライブラリからパターンを貼り付けても正常に動作するとは限りませんので、WordPressをアップデートの上ご確認のほどよろしくお願いいたします。

    #106333

    田邊翔哉
    参加者

    諸々承知いたしました。

    「1. トップページの固定ページの内容を新規固定ページにペースト
    2. カラムバナーの部分を削除して、パターンから貼り付けなおし
    3. その固定ページでホバーアニメーションが正常に動作するか確認
    4. 設定 > 表示設定 でトップページに指定する固定ページを2で作成したページに変更
    5. 公開画面でホバーアニメーションが正常に動作するか確認 」

    やはりこちらの施策をとっても改善はされませんでした。
    他いろいろ自分で試してみます。
    ひとまず、ご対応ありがとうございました。

15件の投稿を表示中 - 1 - 15件目 (全20件中)
  • このトピックに返信するにはログインが必要です。