「スライダー」の検索結果

VWSとは フォーラム 検索 「スライダー」の検索結果

15件の結果を表示中 - 1 - 15件目 (全341件中)
  • 投稿者
    検索結果
  • CMS 大和
    参加者

    ■ WordPress のバージョン
    6.8.2

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

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

    ■ テーマのバージョン
    15.30.1

    ■ Pro Unit のバージョン
    0.29.5

    ■ スキンの種類
    Origin III

    ■ プラグインの種類・バージョン
    VK Blocks Pro ver.1.109.2.0

    ■ 期待する動作
    投稿リストスライダーを使用しています。
    表示タイプ:カード(線なし)
    表示要素:画像、画像右上分類名、日付、新着表示

    ここから、画像右上に表示されている分類名(class=”vk_post_imgOuter_singleTermLabel”)
    をしたの日付とタイトルが表示されている範囲(class=”vk_post_body card-body”)の中にいれて
    タイトルの上に分類名を表示させたいです。

    ■ 自分で試した事
    CSSでの調整→レスポンシブで調整が難しい
    テンプレートファイルの検索→見つかりませんでした

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

    ■ 実際の症状
    上記の通り

    対馬 俊彦
    参加者

    ■ WordPress のバージョン
    6.8.2

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

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

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

    ■ テーマのバージョン
    15.30.0

    ■ Pro Unit のバージョン
    0.29.4

    ■ スキンの種類
    Origin III

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

    ■ プラグインの種類・バージョン
    VK Blocks Pro 1.107.0.0

    ■ 期待する動作
    表示時間を 0 に設定して一定速度でスライダーを滑らかに動かしたい。

    ■ 自分で試した事
    とりあえず表示時間を 1 に設定して対策してあります。

    ■ 症状が発生するブラウザ
    ブラウザに依存しない

    ■ 実際の症状
    表示時間を 0 にしてもスライドが一時停止してしまう。

    https://patterns.vektor-inc.co.jp/vk-patterns/infinite-loop-slider/ のパターンを VK Blocks Pro 1.107.0.0 のサイトに貼り付けると現象を再現できます。

    VK パターンライブラリ は VK Blocks Pro 1.104.0.0 になっているので、期待通りの動作をしています。

    今日・明日あたりにリリース予定、とのことでしたので、VK Blocks 1.107.0.2 にアップデートした時点での感想を書かせていただきます。

    仕様と動作がわかりづらい点が気になりました。

    具体的には、以下の操作を行いました。

    1. EFECT を「スライド」に設定して、アイテムの複数表示設定を行う。
    2. ズームアニメーションを有効にする。
    3. EFECT が「フェード」に切り替わり、アイテムの複数表示設定の部分が非表示になる。
    4. EFECT を「スライド」に戻すと、アイテムの複数表示設定がまた表示される。

    ということで、仕様としてはズームアニメーションが「フェード」「スライド」の両方に使えてアイテムの複数表示にも対応しているのに、ズームアニメーションを有効にすると「フェード」に切り替わるのは違和感がありますし、戸惑うユーザーがいると思います。(私は戸惑いました)

    私としては「フェード」に切り替わらない方がいいように感じました。

    それから、アイテムの複数表示+ズームアニメーションの組み合わせが可能なので、ユーザーの中にはパターンライブラリの ↓ このパターンの「スライダーアイテムの中心が拡大」のような動きを期待(希望)する方が出てくるだろうと思いました。

    スライダー_中心にフォーカス

    mk
    モデレーター

    日頃より、VK Bloxks Proをご利用いただきありがとうございます。

    拡大アニメーション機能を使用する際に「アイテムの複数表示設定」が消える現象について、こちらは仕様による動作でした。
    ただし、ご指摘の通りわかりづらい部分であり、改善を検討いたしますので今しばらくお待ちいただけますと幸いです。

    ## 原因と理由
    ズームアニメーショントグルをONにした時点でフェードエフェクトに切り替わるようにしておりました。これは、一般的にズームスライダーが使われる場面ではフェードエフェクトが主流であることを見受けられたためです。
    フェードエフェクトでは複数のスライドを同時に表示できないため、「アイテムの複数表示設定」が利用できません。
    そのため、結果的にズームアニメーションをONにした時に「アイテムの複数表示設定」が表示されないようになっておりました。
    なお、エフェクトをスライドに戻すことは可能です。

    ## 改善検討内容
    ズームアニメーションのトグル近くに、エフェクトの設定がフェードに変わることやその影響を説明するメッセージを追加しようと思います。
    https://github.com/vektor-inc/vk-blocks-pro/issues/2649

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

    #110714

    横から失礼します。

    ご自身でできることもまだあるのではないかと思います。

    パッと思いつくものでは、

    スライダーをやめる、
    アニメーションをやめる、
    WebP画像を使用する、
    スマホ用の画像 (ダウンロードされたものをそのままお使いなのでしたら、幅が748pxあります。スマホならもっと小さくても問題ありません) をリサイズする、

    など。

    また、PSIは計測した機器や場所にも依存しますし、多くの方が誤解されています。ページスピードの専門家の方がお書きになった以下の記事が勉強になりますので、ぜひ読んでみてください。

    https://qiita.com/skillsharejp/items/acc51ec062af43aa84c0

    #110712
    石川@Vektor,Inc.
    キーマスター

    > お忙しいところ恐縮ですが、これらの提案について、貴社テーマ・プラグインで対応可能かどうか、または他に推奨されるアプローチがございましたら、ご教示いただけますと幸いです。

    表示速度の改善については前向きに検討させていただきますが、
    スライダーの件や分割読み込みなども、できていないにはできていないなりの理由があって現在の仕様になっています。
    現段階でテーマ・プラグインで対応可能な部分を改めて調査するのにも工数が必要なため、

    前向きに検討・改善したい

    とは思いますが、先述の通り現状溜まっているタスクがありますので、

    今すぐに対応・調査する事もできない

    ので、弊社の対応時期や具体的なアプローチ・回答は現段階ではできません。

    何卒ご理解のほどよろしくお願いいたします。

    #110711
    Satoshi Nakamura
    参加者

    石川様、お世話になっております。

    ご返答いただきありがとうございました。「具体的に弊社テーマ・プラグインでできそうな事がありましたらその旨ご連絡くださいませ」とのお言葉を受け、PageSpeed Insights (PSI) の詳細な診断結果から、貴社テーマ・プラグインに関連すると思われるレンダリングブロックの原因を特定し、いくつかの技術的な改善提案をまとめましたので、ご回答させていただきます。

    【現在の状況の再確認】

    モバイルLCPが約15秒と非常に高く、そのうち「レンダリング遅延」が約10秒を占めています。

    WP Fastest CacheのHTML/CSS/JS縮小・統合、Gzip、Delay JSなど、可能な限りの最適化は全て有効にしております。

    LightningテーマのCSS最適化は無効化しています。

    【PSIレポートで特定された貴社テーマ・プラグイン関連の主なレンダリングブロックリソース】
    PSIの「レンダリングを妨げるリソースの除外」セクションにて、以下のファイルが継続的に指摘されており、これらがLCPのレンダリング遅延の主要因であると判断しております。

    https://minnano-piano.org/wp-content/plugins/lightning-g3-pro-unit/inc/vk-blocks/build/js/7nvqvyhk/h5x5.js

    https://minnano-piano.org/wp-content/plugins/lightning-g3-pro-unit/inc/vk-blocks/build/js/e32cca8d/h5x4.js

    https://minnano-piano.org/wp-content/plugins/lightning-g3-pro-unit/inc/vk-blocks/build/js/emjs.js (または類似のファイル名)

    https://minnano-piano.org/wp-content/plugins/lightning-g3-pro-unit/inc/vk-blocks/build/css/k9y8cwde/h5x4.css

    その他、vk-blocks/build/パスに含まれる複数の.jsおよび.cssファイル

    これらのファイルは、スライダーがあるページだけでなく、スライダーがないページでも共通してレンダリングをブロックしており、サイト全体のモバイルLCPに悪影響を与えていると推測されます。

    【ユーザーとSEOへの影響(LCPの重要性)】
    現在のモバイルLCP約15秒という数値は、ユーザーにとって非常に長い待ち時間となり、ページの離脱率を高めるなど、ユーザー体験を著しく損ねる状況です。

    また、Googleは2021年以降、このLCPを含むCore Web Vitals(コアウェブバイタル)を検索ランキングの重要な要因の一つとしています。 LCPが基準値(2.5秒)を大きく超えることで、たとえ他のSEO対策が優れていても、検索順位において不利になる可能性があり、結果として潜在的なユーザーへのリーチが阻害されるという不利益を被っております。

    これらの貴社テーマ・プラグインに関連するファイルがレンダリングをブロックし続けることは、私だけに留まらず、貴社製品を利用の全てのユーザー様が、ユーザー様の顧客体験の悪化とSEO上の深刻な不利益を直接的に被ることを意味し、貴社製品の品質に対する信頼にも関わる問題であると認識しております。

    【貴社テーマ・プラグインで検討可能な具体的な改善提案】
    WP Fastest Cacheのような外部最適化プラグインでは対応しきれない部分があるため、貴社テーマ・プラグインの内部ロジックで対応可能な以下の点について、ご検討いただけないでしょうか。

    クリティカルCSSの最適化:

    ページの初期描画(ファーストペイント)に必要なCSS(クリティカルCSS)のみを自動的に抽出し、HTMLの<head>内にインラインで埋め込む機能、またはそのための仕組みを提供すること。これにより、外部CSSファイルの読み込みを待たずに、ページの主要部分がすぐに表示されるようになります。

    残りのCSSは非同期で遅延読み込みさせることで、レンダリングブロックを大幅に削減できます。

    JavaScript/CSSの条件付き読み込みの強化(Tree Shaking/Code Splitting):

    現在開いているページで実際に使用されているVK Blocksのブロックや機能に限定して、必要なJavaScriptとCSSのみを読み込むようにする仕組みを強化すること。

    例えば、スライダーブロックが使われていないページではスライダー関連のJS/CSSを読み込まない、といった厳密な条件付き読み込みです。

    また、大きなJS/CSSファイルを、より小さな機能単位に「コード分割(Code Splitting)」し、必要な時に必要なものだけを読み込むようにすることも有効です。

    JavaScriptのより厳密な非同期/遅延読み込みの制御:

    WP Fastest Cacheのような外部プラグインに依存せず、テーマ・プラグイン側でJavaScriptをenqueueする際に、より確実にasyncまたはdefer属性を付与するロジックを強化すること。

    特に、初期描画に必須ではないJavaScript(例: スクロール時に発動するアニメーションなど)は、徹底的に遅延読み込みさせることで、メインスレッドのブロック時間を短縮できます。

    これらの提案は、貴社テーマ・プラグインの構造を熟知されている開発チームであれば、より効果的に実装できる可能性があると考えております。

    お忙しいところ恐縮ですが、これらの提案について、貴社テーマ・プラグインで対応可能かどうか、または他に推奨されるアプローチがございましたら、ご教示いただけますと幸いです。

    当該貴社製品のすべてのユーザー様の顧客体験の向上とSEOパフォーマンスの改善のため、何卒ご検討のほどよろしくお願い申し上げます。

    #110542
    kiiroitori525
    参加者

    先日ご相談させていただいた件について、無事に問題が解決しましたのでご報告いたします。

    スライダーで読み込んでいる画像のうち、一つだけサイズが大きいものがあったため画像サイズを調整しましたが、ヘッダーのみのページにしても状況が変わらず、その後、クライアントへエックスサーバーの「XPageSpeed設定」で「CSSの最適化」をONにしていただいたところ、気になっておられた症状がすべて解消されたとの連絡をいただきました。

    私自身、「XPageSpeed設定」という機能について今回初めて知ったのですが、実際に大きな改善効果があり、大変勉強になりました。
    石川様、瀬戸内ことり様、お忙しい中、アドバイスいただきありがとうございました。

    mk
    モデレーター

    ベクトルスタッフの松田です。
    日頃よりブロックパターンをご利用いただきありがとうございます。

    本件の症状を確認いたしました。
    お手数をおかけし申し訳ございませんが、先ほどパターンライブラリにて修正を行いましたので、再度コピーいただけますと幸いです。

    なお、もし既に作り込んでいらっしゃる場合は、添付の画像を参考に、スライダーブロックのカスタムCSSでselector .swiper-wrapperpointer-events: none;を追加いただけたらと思います。

    本パターンは公開当初から最近まではご指摘いただいた状態でも問題なく動作しておりましたが、その後のブラウザやWordPressの仕様変更等の影響により、対応版のCSSを明示的に指定しないと同様の挙動にならなくなったようです。
    メジャーアップデートのたびに表示や動作は都度確認しておりますが、今回のケースでは最新環境で仕様が変わった部分を取りこぼしてしまっておりました。

    このたびはご報告いただきありがとうございました。お手数をおかけしますが、ご確認いただけますと幸いです。
    今後ともどうぞよろしくお願いいたします。

    Attachments:
    You must be logged in to view attached files.
    Hiroshi
    参加者

    ■ WordPress のバージョン
    WordPress 6.8.1

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

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

    ■ テーマのバージョン
    15.29.9

    ■ Pro Unit のバージョン
    0.29.4

    ■ スキンの種類
    Origin III

    ■ プラグインの種類・バージョン
    VK All in One Expansion Unit
    バージョン 9.109.0.1

    VK Block Patterns
    バージョン 1.33.2.1

    VK Blocks Pro
    バージョン 1.105.1.1

    ■ 期待する動作
    スプリットスクリーンのデザインを試したくパターンライブラリのポートフォリオ_トップページを利用してみました。
    エディター画面では右側カラム内のボタン・リンク・投稿のアイキャッチなどマウスオーバーでカラーが変わるなど確認しましたが、固定ページを表示しても右カラムのスクロールはしますがマウスオーバーによる変化やボタンをクリックしても動作しません。
    左カラムのリンクはマウスオーバーでカラーが変わりクリックによる動作もします。

    ■ 自分で試した事
    カラム外でボタンを作成し右側カラム内に移動すると同様に動作せず。
    左カラムのスライダー内にボタンを移動すると正常動作します。
    別環境でWordpress新規インストールから再度試しましたが症状変わらず。

    ■ 症状が発生するブラウザ
    Windows:chrome、Edge Mac:safari

    ■ 実際の症状

    ポートフォリオ_トップページ


    上記パターンライブラリのページのサンプルも同様に右側カラム内のボタン等はマウスオーバーしてもクリックしても同様です。

    ■ その他特記事項
    エディター画面内で動作していることがわかるように画像添付いたします。

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

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

    返信が含まれるトピック: スライダーブロック設定方法

    > デモサイト https://demo.dev3.biz/architect/ のように文字を左下側に配置し、

    こっちは、スライダーアイテムを下揃えにして、
    見出しの下にレスポンシブスペーサーを入れればできそうです。

    > 画面幅が狭くなると文字サイズも少しづつ小さくなるようにしたいのです。

    こっちは、CSS を書く必要がありますので、
    デモサイトをデベロッパーツールで調べてみてください。

    石川@Vektor,Inc.
    キーマスター

    > 可能なら3枚でも表示可能な対応をご検討いただければ幸いです。

    これは使用しているスライダーのライブラリの仕様で、
    そういった事情で弊社側での対応は難しいのが実情です。

    ご期待に沿えずすみません…。

    Peace
    参加者
    制作実績

    石川様、迅速なご回答ありがとうございます。
    スライダーアイテムを4枚にするときちんと表示されるようになりました。

    表示する予定のスライダーアイテムは3枚だったので、無理やり同じアイテムを2枚にしていますが、今後、可能なら3枚でも表示可能な対応をご検討いただければ幸いです。

    ありがとうございました。

    Peace
    参加者

    ■ WordPress のバージョン
    6.8.1

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

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

    ■ テーマの種類
    X-T9

    ■ テーマのバージョン
    1.34.0

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

    ■ 期待する動作
    「トップページスライダー_左右が見切れている」を利用して、3つのスライダーアイテムを順に表示しようとしています。

    ■ 自分で試した事
    パターンライブラリからコピーして、最初に高さを変更し、コピーしたスライダーアイテムの一部をコピーして3枚のスライダーアイテムにすると右側にも正常に表示される場合もあります。

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

    ■ 実際の症状
    高さを変更したり、スライダーアイテムを1つ削除したりすると、次に中央に表示されるはずのスライダーアイテムが右側に表示されなくなります。

    #110257
    石川@Vektor,Inc.
    キーマスター

    とりあえずスライダーなどで読み込んでる画像のファイルサイズが大きいので減らしてみてください。
    あとはアニメーションブロックの中にある要素なども外に出してみてください。

    サーバーはどこですか?

15件の結果を表示中 - 1 - 15件目 (全341件中)