コンテンツスライダーブロックで要素全体にリンクを貼るとクリックが効かなくなる

0
いいねをした人: 居ません
  • このトピックには4件の返信、2人の参加者があり、最後にreadにより1ヶ月、 2週前に更新されました。
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • 投稿者
    投稿
  • #141893
    read
    参加者
    16

    【お使いの Snow Monkey のバージョン】 27.2.2
    【お使いの Snow Monkey Blocks のバージョン】22.1.0
    【お使いの Snow Monkey Editor のバージョン】10.0.4
    【お使いの PHP のバージョン】8.0.30
    【お使いのブラウザ】Chrome
    【当該サイトのURL】

    お世話になっております。
    コンテンツスライダーブロックについて質問させて下さい。

    コンテンツスライダーブロックで、要素(1スライド)全体がリンクになるようcssを適用しています。
    しかし、2回クリックしないとリンクが開きません。
    多分、スライダーの機能と相性が悪いように思います。

    1回クリックでリンクが開く方法がございましたらご教授いただければ幸いです。

    検証したこと

    – 矢印を表示:2回クリックしないとリンクが開きません
    – ドットを表示:2回クリックしないとリンクが開きません
    – 何もせず何回かリロードしたりすると何かのタイミングで1回でリンクが開くこともあります。

    「コンテンツスライダー」の「スライド」の中身

    – グループ(文章と画像を記載)
    – 段落(リンクを記載。cssのクラスは contents-slider-link-url

    「コンテンツスライダー」の「スライド」に適用しているCSS

    cssのクラスは「contents-slider-link

    .contents-slider-link{
      position: relative!important;
    }
    
    .contents-slider-link p.contents-slider-link-url {
      position: absolute!important;
      top:0!important;
      left: 0!important;
      width: 100%!important;
      height: 100%!important;
      z-index:999!important;
    }
    
    .contents-slider-link a {
      position: absolute!important;
      top:0!important;
      left: 0!important;
      width: 100%!important;
      height: 100%!important;
      z-index:999!important;
      text-indent: 100%;
      white-space: nowrap;
      overflow: hidden;
    }

    ※上記cssは編集画面には適用されないようにしています。

    0
    いいねをした人: 居ません
    #141929
    アバター画像キタジマ タカシ
    参加者
    2421

    こちらの環境では、一応下記の CSS でクリックできることを確認しました。(Mac Chrome)

    .contents-slider-link {
      position: relative!important;
    }
    
    .contents-slider-link * { /* セレクタは要調整 */
        position: static;
    }
    
    .contents-slider-link p.contents-slider-link-url {
      position: absolute!important;
      top:0!important;
      left: 0!important;
      width: 100%!important;
      height: 100%!important;
      z-index:999!important;
    }
    
    .contents-slider-link a {
      background: red; /* リンクが広がっているか確認しやすくするため用 */
      position: absolute!important;
      top:0!important;
      left: 0!important;
      width: 100%!important;
      height: 100%!important;
      z-index:999!important;
      text-indent: 100%;
      white-space: nowrap;
      overflow: hidden;
    }
    1
    いいねをした人:
    #141933
    read
    参加者
    16

    お忙しいところご返信いただきましてありがとうございます!

    早速いただいたコードで試してみましたが、同様にリンクが開かない場合がありました。

    Macで、ChromeとSafariで試しています。

    ・スマホでは開くことができることの方が多いが、たまにタップしてもリンクが開かない場合がある
    ・パソコンではMagic Mouseを使っているが、有線マウスに変えたところ、「リンクが開かない」の頻度が下がった

    何度も検証した結果、「クリックしながら少しでも横スクロールさせてしまうとリンクが開かない」ということがわかりました。意識して「さっ」とクリックした場合は100%開きません。
    要素の上でマウスを静止して、2秒ほど数えてからクリックするとリンクが開きます。
    スマホでのタップも、画面を静止してから真上からポンと押すと確実にリンクが開きます。

    MagicMouseの場合、繊細な動作を読み取るので、自分のクリックの仕方が悪いのか、普通にクリックしているつもりでも90%くらい1回目のクリックで開かずストレスを感じていました。
    普通の有線マウスの場合は、20%ぐらいの確率で開きません。

    CSSのみで横スクロールをさせているコンテンツでは問題なくリンクが開くのですが、Snowmonkeyのコンテンツスライダーのみこの現象が起こってしまいます。
    これは仕様上仕方がないでしょうか?

    0
    いいねをした人: 居ません
    #141936
    アバター画像キタジマ タカシ
    参加者
    2421

    なるほどです。Snow Monkey Blocks のスライダーはドラッグでスライドやフェードするようになっているので、それと干渉しているのかもしれません。CSS ではなくて JavaScript でリンクの処理をしたりすればなんとかなるかもしれませんが、無駄に複雑になる気がするので、別なスライダー系プラグインの使用を検討したほうが良いかもしれません…。

    1
    いいねをした人:
    #142085
    read
    参加者
    16

    ご返信いただきましてありがとうございます。お礼が遅くなりまして申し訳ありません。
    リンクが効きやすくなる方法を検討&検証してみます。ありがとうございました。

    1
    いいねをした人:
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • トピック「コンテンツスライダーブロックで要素全体にリンクを貼るとクリックが効かなくなる」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。