カラーミーショップでスマホのとき商品画像を2回タップしないとページ遷移しない問題

サトナカウェブショップではカラーミーの有料テンプレート「MONO」を使っています。

以前から直さないといけないなーと思っていたことがあり、本日それに手をつけました。

それはタイトルのまま「スマホのとき商品画像を2回タップしないとページ遷移しない問題」です。

PCでは商品画像にマウスカーソルをあわせた瞬間に商品画像の2枚目が表示されます。

これは分かりやすく、ページ遷移をしなくても2枚目の画像が見られるので便利なのですが、スマホだと…1回タップ→画像が切り替わる→もう1回タップ→やっとリンク遷移という動きになるわけです。

バグなんじゃないの～～？と思って調べたところ、やっぱりiOS側の不具合らしく。

色々なページに書いてあるようにCSSやらHTMLやらイジってみたんですが、どうにも上手くいかなかったので、今回は荒業で対応しました。荒業とは…

全商品2枚目の画像をnullにする

こうすることで、<if>で2枚目の画像があれば機能する挙動をすべて無視できるわけです。
つまりマウスオーバーしても画像は切り替わらないし、スマホのタップも1回でいける。
さらに、商品ページで見た時nullは表示されないので、きちんと3枚目が2枚目として処理される。

これは完全に閃きましたね。うまい。

挙動はこちらから確認できます → サトナカウェブショップ

PCの方には2枚目の画像が見えなくなって少しご不便をおかけしますが、スマホからの利用者さんのほうが多いので、これで少しばかり快適になったのではないでしょうか。

カラーミーテンプレート「MONO」を使っていて、この現象に困っている方、いらっしゃいましたらぜひ参考にしてくださいませ。期待してる解決策じゃないかもしれませんが…