投稿一覧に「次のページ」「前のページ」を設置する方法
ページネーションについて
一つのページにコンテンツ量が多いと「ページが見にくい」「読み込みが遅い」「スクロールが多い」ことから「可読性」、「利便性」の減少に繋がり、利用者に悪印象を与えてしまいます。
そのため「投稿ページ一覧」「フォトギャラリー」といった情報量や読み込みが多いページは「ページ割り」をする必要があります。
Webサイトでは「ページ割り」のことを「ページネーション（Pagination）」と呼ぶことが多いです。
代表的なページネーションは検索エンジン(googleやsafariなど)で多くの人が何度も見たことがあるのではないでしょうか。
必要な機能
ページネーションに求められる機能は以下になります。
- 前後のページ移動
- 現在のページが何ページ目か
- 初めと終わりのページへの移動
- 指定したページへの移動
ページネーションに求められる機能で最も必要なものが前後のページへの移動です。
分割するページが少ない場合は前後の移動だけでも十分ですが、ページ数が多い場合は「現在のページが何ページ目か」「始め・終わりのページに移動」「指定したページに移動」「合計ページ数の表記」などの機能があると良いでしょう。
ページネーションを実際に作ってみる
See the Pen ページネーション by コココット (@cococodog) on CodePen.
htmlでは「<」を記載するとタグであると認識するため大なり記号を使いたい場合「<」と記載しなければ入れません。
この程度のページ数の場合「始めのページ」「終わりのページ」への移動はいらないですが一応記載しておきました。
ページの関連性について
ページネーションを利用する場合、<link rel="next">と<link rel="prev">タグを使って、そのサイトの一つ前のサイトと一つ後のサイトの関連性を上げた方が良いです。
- 「ページ1」は次の「ページ2」について
- 「ページ2」は前の「ページ1」と「次のページ3」について
- 「最後のページ」は前の「最後からひとつ前のページ」について
実際に書く場合はheadタグ内に
<link rel=“prev” href=“http://mae” />
<link rel=“next” href=“http://tugi” />
を記載しますが、前のページがない1ページ目は当然<link rel="prev">を書く必要はないです。またパスは相対パスではなく絶対パスで書くようにしてください。