マウスカーソルを載せたときに要素に変化を加えるのにhoverを使う人は多いと思う。マウスカーソルで変化させるということは正直タッチパネルのタップでもすぐ反応してほしいと思ってる人は多いハズ。

でも実際hoverさせてるだけの要素って少し長押し気味な感じで触らないと変化しない。

その状況は対象のHTML要素にontouchstart 属性を記述することで解決できる。

解説

以下のソースのaタグで作ったボタンは触るとこのページの一番上まで戻る。cssでhoverさせてるだけなので、少し長押し気味に触らないと反応しないはず。てか長押しし過ぎてもaタグなので文章選択とかになっちまって非常に押しづらい。

<style>
    /* ボタンのスタイル */
    .button {
        width: 100%;
        height: 40px;
        border: 1px solid #b97ebb;
        border-radius: 5px;
        text-align: center;
    }
    /* マウスオーバー時のカラー */
    .button:hover {
        background-color: #b97ebb;
    }
    /* リンク領域のスタイル */
    .button-a {
        display: block;
        padding: 7px 0;
        text-align: center;
    }
    /* マウスホバー時のカラー*/
    .button-a:hover {
        color: #fff
    }
</style>
<div class="button" ontouchstart="">
    <a href="#" class="button-a"> ボタン </a>
</div>
Code language: HTML, XML (xml)

以下のようにhoverしてる要素やその親要素(今回はaタグの親であるdiv)に対して「 ontouchstart=””」としてやるだけでタップしたら瞬時に反応するようになった。

<style>
    /* ボタンのスタイル */
    .button {
        width: 100%;
        height: 40px;
        border: 1px solid #b97ebb;
        border-radius: 5px;
        text-align: center;
    }
    /* マウスオーバー時のカラー */
    .button:hover {
        background-color: #b97ebb;
    }
    /* リンク領域のスタイル */
    .button-a {
        display: block;
        padding: 7px 0;
        text-align: center;
    }
    /* マウスホバー時のカラー*/
    .button-a:hover {
        color: #fff
    }
</style>
<div class="button" ontouchstart="">
    <a href="#" class="button-a"> ボタン </a>
</div>Code language: HTML, XML (xml)

WordPressのHTMLタグはどうすの？

俺は他のやり方よくわかんねぇからjavascript(JQuery)で実装することにした。

$('属性を追加したいHTMLの要素').attr({<br> 'ontouchstart':''<br>});
Code language: JavaScript (javascript)

テーマによって違うだろうけど俺が使用しているcocoonってテーマならjavascript.jsに追記したら出来た。他のテーマだと header.php とかに書けば良いんじゃね。