サトナカウェブショップではカラーミーの有料テンプレート「MONO」を使っています。
以前から直さないといけないなーと思っていたことがあり、本日それに手をつけました。
それはタイトルのまま「スマホのとき商品画像を2回タップしないとページ遷移しない問題」です。
PCでは商品画像にマウスカーソルをあわせた瞬間に商品画像の2枚目が表示されます。
これは分かりやすく、ページ遷移をしなくても2枚目の画像が見られるので便利なのですが、スマホだと…1回タップ→画像が切り替わる→もう1回タップ→やっとリンク遷移という動きになるわけです。
バグなんじゃないの～～？と思って調べたところ、やっぱりiOS側の不具合らしく。
色々なページに書いてあるようにCSSやらHTMLやらイジってみたんですが、どうにも上手くいかなかったので、今回は荒業で対応しました。荒業とは…
全商品2枚目の画像をnullにする
こうすることで、<if>で2枚目の画像があれば機能する挙動をすべて無視できるわけです。
つまりマウスオーバーしても画像は切り替わらないし、スマホのタップも1回でいける。
さらに、商品ページで見た時nullは表示されないので、きちんと3枚目が2枚目として処理される。
これは完全に閃きましたね。うまい。
挙動はこちらから確認できます → サトナカウェブショップ
PCの方には2枚目の画像が見えなくなって少しご不便をおかけしますが、スマホからの利用者さんのほうが多いので、これで少しばかり快適になったのではないでしょうか。
カラーミーテンプレート「MONO」を使っていて、この現象に困っている方、いらっしゃいましたらぜひ参考にしてくださいませ。期待してる解決策じゃないかもしれませんが…
これ以外のカラーミーショップの仕様についての記事はこちら
