こんにちは、コーダーのオッコです。
直しちゃったので参考になる画像がないのですが、スマホ実機でリンクがついた画像をタップすると、タップした領域がデフォルトで青くなる現象に遭遇したので修正方法をメモがてら残します。
結論
こうする。
- -webkit-touch-callout: none;
- -webkit-tap-highlight-color: transparent;
- cursor: pointer;
- display: block;
これを、aタグに追加します。（※aタグの子要素にimgタグを入れている前提です。）
下記参考サイトたちの合わせ技です。
CSSのtap-highlight-colorが効かない時の対処法
display:blockは、よくある、aタグの領域を要素全体に広げてあげるための措置です。
tap-highlight-colorが効かないところで悩んだのですが、全部つめこんだら解消しました。
※-tap-highlight-color：リンクがタップされている間に表示される強調色を設定するcss標準外のプロパティ。
標準外機能なので、mozillaでは推奨されてないことも留意してください。一応手元のiPhone/Androidでは問題なかったです。
関連記事紹介
システム開発はアピステクノロジーへ
アピステクノロジーでは、システム開発をはじめ、システムパッケージの販売にも力を入れています。
「IT TOOL」をご存じですか？
既に標準の機能が実装されているシステムパッケージを、貴社用にデザインカスタマイズし提供します。
さらに、IT導入補助金の利用で価格を大きく抑えることも可能です。
実績多数、低価格で本格的なサイトができると好評いただいております。
詳しくは弊社HPをご覧ください。
アピステクノロジーの実績紹介はこちら↓
ITツール紹介ページはこちら↓
