[read]

【お使いの 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

いいねをした人: 居ません

[キタジマ タカシ]

こちらの環境では、一応下記の 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

いいねをした人:

[read]

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

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

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

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

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

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

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

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

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

♥ 1

いいねをした人:

[read]

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

♥ 1

いいねをした人:

[投稿者]

投稿