このブログのページネーションを、よくあるページ番号が見えるような形式に変更した。

PaperMod > list.htmlの <footer>を以下に書き換え1、合わせてCSSも修正すればOK。Coding Agentでものの数分で実装は完了した。

<footer class="page-footer">
  <nav class="pagination">
    {{- if $paginator.HasPrev }}
    <a class="prev" href="{{ $paginator.Prev.URL | absURL }}">«</a>
    {{- end }}
    
    {{- $start := 1 }}
    {{- $end := $paginator.TotalPages }}
    {{- if gt $paginator.TotalPages 5 }}
      {{- $start = math.Max 1 (sub $paginator.PageNumber 2) }}
      {{- $end = math.Min $paginator.TotalPages (add $paginator.PageNumber 2) }}
    {{- end }}

    {{- if gt $start 1 }}
    <a href="{{ $paginator.First.URL | absURL }}">1</a>
    {{- if gt $start 2 }}<span class="dots">...</span>{{ end }}
    {{- end }}

    {{- range $i := (seq $start $end) }}
    {{- if eq $.Paginator.PageNumber $i }}
    <span class="current">{{ $i }}</span>
    {{- else }}
    <a href="{{ (index $.Paginator.Pagers (sub $i 1)).URL | absURL }}">{{ $i }}</a>
    {{- end }}
    {{- end }}

    {{- if lt $end $paginator.TotalPages }}
    {{- if lt (add $end 1) $paginator.TotalPages }}<span class="dots">...</span>{{ end }}
    <a href="{{ $paginator.Last.URL | absURL }}">{{ $paginator.TotalPages }}</a>
    {{- end }}

    {{- if $paginator.HasNext }}
    <a class="next" href="{{ $paginator.Next.URL | absURL }}">»</a>
    {{- end }}
  </nav>
</footer>

横幅のブレイクポイント

こっからが本題。デスクトップでは特に問題ないが、スマホのような狭い横幅で見た場合、2桁の数字や3点ドットが縦になってしまう。

Coding Agent (Claude Sonnet 3.5)に「スマホだと数字が縦になるのをなんとかせよ」みたいな指示を出すと、CSSに @media screen を追加する。

@media screen and (max-width: 600px) {
  .pagination a,
  .pagination span {
    padding: 0 8px;
    min-width: 36px;
  }
  /* snip */
}

特に何も指定しないと、Coding Agentはレスポンシブ対応のブレイクポイントを600pxと設定したわけだが、ちょっと大き過ぎる気がする。

そこでCopilotにまとめてもらった2。AndroidはCSSピクセルに関する情報が少なくCopilotの裏どりができなかったので表には載せていないが3、概ね360pxとか411pxとかの情報はあった。

モデル名デバイスピクセル（px）CSSピクセル（px）DPR
iPhone 15,15Pro,161179 × 2556393 × 8522.16
iPhone 15 Pro Max1290 × 2796430 × 9322.16
iPhone 16 Pro1206 × 2622402 × 8742.16
iPhone 16 Pro Max1320 × 2868440 × 9562.16

こうした情報をもとにCopilotに相談した結果、ブレイクポイントは480pxにすることとした。

  1. このコードは前後ページへの移動のアイコンが、デプロイ済の実装と異なる ↩︎

  2. iPhone 画面サイズ早見表 -株式会社GENZ - [GENZ, Inc.] にもっと詳しく載っている ↩︎

  3. Android知らない民には各メーカーのシリーズ名とナンバリングが難しかった。特にXperia… ↩︎