トップ > はてなブログ: レスポンシブテーマでも、スマホで一覧全体をタップできるようにする

はてなブログ: レスポンシブテーマでも、スマホで一覧全体をタップできるようにする

はてなブログでレスポンシブテーマを使っていると、スマホで見たときに、一覧ページでタイトルの文字しかタップできなかったので、CSS をカスタマイズしてみた。

何もしないとこうなっている

カスタマイズ前の状態がこちら。Minimalism テーマを適用し、トップページの表示形式を「一覧形式」に変更している。

f:id:sardine:20181022153648p:plain

このブログで使っている Minimalism テーマの場合、記事ひとつ分の枠には、日付と記事タイトルが表示される。画像があればサムネイルも表示され、ない場合はその部分は何もない状態になる。

f:id:sardine:20181022153646p:plain

一見、はてなブログのデフォルト (レスポンシブデザインが無効) と似ているけど、使いやすさの面で違いがある。

この枠内で、記事タイトル (下図で青く塗った部分) をタップしないと、記事本文を読めないのだ。

f:id:sardine:20181022153644p:plain

さらに悪いことに、日付 (赤く塗った部分) をタップすると、記事本文ではなく、その日の記事一覧が表示されてしまう。

一般的には、スマホでこのような一覧から項目を選ぶ場合、項目のどの部分をタップしてもいいことが多い。初めてはてなブログに来た人が、タイトル以外の部分をタップして、「あれ？ おかしいな。もういいや、戻るボタン押そう」と思ってもおかしくない。

こうカスタマイズした

はてなブログの「デザイン」設定で、「デザイン CSS」に以下の内容を追記した。

これは Minimalism テーマの場合なので、他のテーマでは多少調整が必要かもしれない。

@media screen and (max-width: 640px) {
  .page-archive #top-editarea {
    margin-bottom: 0px;
  }
  .page-archive #gnav {
    margin-bottom: 0px;
  }
  .archive-entry {
    position: relative;
  }
  .page-archive .entry-title-link::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
  }
}

以下、記述の意図を書いておく。

スマホのみ対象にする

@media screen and (max-width: 640px) {

}

ここは Minimalism 自体の判定条件に合わせた。

ひと枠全体をリンクにする

  .archive-entry {
    position: relative;
  }
  .page-archive .entry-title-link::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
  }

ここは、Qiita の記事に Simmon さんという方が書かれていたコメントを、ほぼそのまま使わせて頂いた。

qiita.com

ポイントは、::after 擬似要素を使い、タイトル部分のリンクに対応するブロックを生成しているところ。このブロックも a 要素の一部なので、リンクとして選択できる、というのが面白い。そしてこのブロックを、絶対位置指定で左上に持っていき、高さと幅を 100% にすることで、全体にリンクをかぶせてしまう。

ただしそれだけだと、「左上」や「高さと幅を 100%」の基準がページになってしまい、ページ全体をリンクが覆ってしまう。そこで、一覧の項目ひとつ分である .archive-entry に対して position: relative を適用することで、項目内の子要素については、記事ひとつ分の枠を基準にして位置やサイズの基準が決まるようにする。

一覧上部のスキマをなくす

  .page-archive #top-editarea {
    margin-bottom: 0px;
  }
  .page-archive #gnav {
    margin-bottom: 0px;
  }

Minimalism テーマでは、ナビゲーションメニュー (タイトルの下にある、HOME や ABOUT のリンクがある部分) の下側に、マージンが設定されている。

これはぱっと見ではわからない。

f:id:sardine:20181022153642p:plain

実は下図の黄色で塗った部分がマージンで、この部分はタップしても何も起きない。

f:id:sardine:20181022153640p:plain

ただ、このマージンを無条件になくしてしまうと、記事本文のページを見たときに、ナビゲーションメニューとその下のパンくずリストがくっついてしまい、利便性が下がる。

そこで .page-archive を付けることにより、一覧ページだけマージンをなくすようにした。

そしてこうなった

カスタマイズの結果、思惑どおり、一覧全体を選択できるようになった。

www.toyfish.blog

タップできる範囲を緑色で示したのが、次の図。

f:id:sardine:20181022153659p:plain

ここは触らなかった

あまり細かく頑張っても手間に見合わないし、CSS がどんどん重くなっていくので、以下の点は現状のままとした。

ナビゲーションメニュー下のマージン調整

トップページ以外にも、日付別やカテゴリ別の記事一覧ページというものがあって、この記事で触れたのとはまた別のマージンがある。そちらも対処するにはもう少し CSS をいじる必要があるんだけど、利用頻度が少ないと思われるので、今回は手を出さないことにした。

左右のスキマ

先ほどの図をもう一度見てもらうと、緑の領域が左右の端まで届いていないことがわかる。これは、記事本文ページなどと共通のパディングが設定されているため。ただ、端をタップする人は少ないと思われるので、このままでよしとした。

f:id:sardine:20181022153659p:plain

iPhone でのタップ時の視覚フィードバック

スマホでリンクをタップすると、該当箇所が一瞬だけ色が変わる、視覚フィードバックの仕組み。Android の Chrome では記事ひとつ分の枠全体が青く塗られた。一方、iOS の Mobile Safari ではタイトル部分だけ色がついた。タップした部分と反応する部分が違うので違和感があるけど、解決策がわからなかった。

f:id:sardine:20181022165654p:plain