はてなブログ／スマホなどタッチデバイスの :hover イベント対応
映画のレビューを書いている別ブログ「そんなには褒めないよ。映画評」のデザインを変更しようとしているのですが、スマホの UI で停滞しています。
トップページは、「一覧形式」を利用して画像主体のデザインにしようとしているのですが、映画のタイトルなどのテキストをどう表示するかで悩んでいます。
01デスクトップ向けの UI
デスクトップでは、下のデモのように画像の :hover にアニメーションをつけてテキストをスライドアップしています。
（注）この下に Codepen のサンプルが表示されますが、読み込みに時間がかかる場合があります。
See the Pen for Hatena-blog-hover1 by ausnichts (@ausnichts) on CodePen.
これをスマホなどタッチデバイスで表示しますと、:hover がありませんので、画像にタッチしますとそのままリンク先へ飛んでしまいます。
02タッチデバイス向けの UI
これをどうしようかという話題です。
現在（いつまで現在かは不明）の「そんなには褒めないよ。映画評」では、タッチするとテキストをオーバレイで表示し、その中に記事へのリンクボタンを表示しています。ただ、実際にスマホでこのページをスクロールしますと、タッチするたびにオーバレイしてかなり鬱陶しいです（笑）。
正直なところ、イベントをやめて、素直にテキストすべてを表示しておくことが一番ユーザーフレンドリーじゃないかとは思うのですが、どうしても何か手を加えたいという誘惑を払いのけることができず、（かなり）いろいろ試した結果、現在のところ下のデモの方法になりました。
デモですので実装とは異なりますが、画像のリンクは残したまま、（仮に）左下にテキスト表示のボタンをつくり、クリックしますとデスクトップと同じようにスライドアップし、ボタン以外は記事リンクとし、ボタンはテキストのスライドダウンになります。
（注）この下に Codepen のサンプルが表示されますが、読み込みに時間がかかる場合があります。
See the Pen for Hatena-blog-hover2 by ausnichts (@ausnichts) on CodePen.
もちろんタッチデバイスじゃないと確認できませんので、スマホで見ていただくか、右上の Codepen のアイコンを右クリックして別ウィンドウで開くなりし、ChangeView をクリックして DetailsView を Chrome のスマホエミュレータにすればタッチイベントも拾うはずです。
ボタンはアイコンフォントをロードするのも面倒ですのでボックスのまま色を変えるようにしてあります。
この方法なら、タッチしてスクロールしても鬱陶しくありませんし、どの状態でも記事ページへ飛べますし、テキストを表示するアイコンを直感的なものにすればいいのではないかと思います。
ところで、これを試す間にタッチデバイスのことが少しわかってきました。機会があれば記事にしようと思います。