IMUZA.com

Xserver<<WordPress(ConoHa)<<はてなブログ

ホーム / CSS / はてなブログ/スマホなどタッチデバイスの :hover イベント対応

はてなブログ/スマホなどタッチデバイスの :hover イベント対応

2018/03/30 CSS, javascript, はてなブログ

はてなブログ/スマホなどタッチデバイスの :hover イベント対応

映画のレビューを書いている別ブログ「そんなには褒めないよ。映画評」のデザインを変更しようとしているのですが、スマホの UI で停滞しています。

トップページは、「一覧形式」を利用して画像主体のデザインにしようとしているのですが、映画のタイトルなどのテキストをどう表示するかで悩んでいます。

  • デスクトップ向けの UI
  • タッチデバイス向けの UI

デスクトップ向けの UI

デスクトップでは、下のデモのように画像の :hover にアニメーションをつけてテキストをスライドアップしています。

(注)この下に Codepen のサンプルが表示されますが、読み込みに時間がかかる場合があります。

See the Pen for Hatena-blog-hover1 by ausnichts (@ausnichts) on CodePen.

これをスマホなどタッチデバイスで表示しますと、:hover がありませんので、画像にタッチしますとそのままリンク先へ飛んでしまいます。

タッチデバイス向けの UI

これをどうしようかという話題です。

現在(いつまで現在かは不明)の「そんなには褒めないよ。映画評」では、タッチするとテキストをオーバレイで表示し、その中に記事へのリンクボタンを表示しています。ただ、実際にスマホでこのページをスクロールしますと、タッチするたびにオーバレイしてかなり鬱陶しいです(笑)。

正直なところ、イベントをやめて、素直にテキストすべてを表示しておくことが一番ユーザーフレンドリーじゃないかとは思うのですが、どうしても何か手を加えたいという誘惑を払いのけることができず、(かなり)いろいろ試した結果、現在のところ下のデモの方法になりました。

デモですので実装とは異なりますが、画像のリンクは残したまま、(仮に)左下にテキスト表示のボタンをつくり、クリックしますとデスクトップと同じようにスライドアップし、ボタン以外は記事リンクとし、ボタンはテキストのスライドダウンになります。

(注)この下に Codepen のサンプルが表示されますが、読み込みに時間がかかる場合があります。

See the Pen for Hatena-blog-hover2 by ausnichts (@ausnichts) on CodePen.

もちろんタッチデバイスじゃないと確認できませんので、スマホで見ていただくか、右上の Codepen のアイコンを右クリックして別ウィンドウで開くなりし、ChangeView をクリックして DetailsView を Chrome のスマホエミュレータにすればタッチイベントも拾うはずです。

ボタンはアイコンフォントをロードするのも面倒ですのでボックスのまま色を変えるようにしてあります。

この方法なら、タッチしてスクロールしても鬱陶しくありませんし、どの状態でも記事ページへ飛べますし、テキストを表示するアイコンを直感的なものにすればいいのではないかと思います。

ところで、これを試す間にタッチデバイスのことが少しわかってきました。機会があれば記事にしようと思います。

はてなブログ「一覧形式」の画像を美しく並べる
(はてな)ブログのブレイクポイントはひとつでいいのではないかという話
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/03/21

WordPress:メール送信にGmailのSMTPを使う(プラグインなし)

2023/03/10

WordPress:サムネイル付き次の記事/前の記事

2023/02/28

Twitterシェアリンクはintent/tweetを使おう

2023/02/21

GoogleタグマネージャーとアナリティクスGA4

2023/02/8

WordPress:人気記事を直近の期間指定で表示する

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ214
  • WebTips109
  • javascript98
  • Joomla!88
  • Windows68
  • Wordpress65
  • CSS63
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Google34
  • Plamo33
  • はてなプラグイン25
  • php22
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • ConoHa WING6
  • Git入門6
  • genesis6
  • Python5
  • Android5
  • PC全般4
  • Facebook4
  • スマートフォン4
  • 静的サイトジェネレーター3
  • Firefox3
  • SSD3
  • Blankslate3
  • Docker3
  • Twitter2
  • GitHub2
  • Mactype2
  • はてなブクマ1
  • 映画1
  • youtube1
  • rails入門1
  • Xserver1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Related Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2023 · IMUZA.com