ページネーションとは
ページネーションとはページ割りのことです。
１ページで管理する記事の数が多くなってしまうとアイキャッチ画像やスクリプトを複数読み込むことになるため、表示速度が重くなってしまいます。
複数のページで記事を管理することでページの表示速度をスムーズに行えるようにしています。
そのため、ページネーションと呼ばれるナビゲーションを設置します。
Cocoonのデフォルトのページネーションは以下の画像のような表示になっています。
複数のページを「1」「2」「…」と数字で分割することで、１ページに掛かるページの負荷を他ページで分散し、管理することができます。
ページネーションの要素
ページネーションを変更する前にページネーションに使われている要素を見つけます。
上の「次のページ」に使われているセレクタは次の《pagination-next-link》クラスです。
.pagination-next-link {
}
上の番号に使われているセレクタは次の《page-numbers》クラスとなります。
.page-numbers {
}また、現在のページで表示されているページネーションの指定は《pagination》クラスの《current》クラスで行われています。
.pagination .current {
}ページネーションのカスタマイズサンプル
前項目で解説したセレクタを元にページネーションをカスタマイズしていきます。
サンプル「芝生」
一つ目のサンプルは「芝生」です
実際に表示させてみると以下の画像のようになります。
芝生のように緑色に指定しています。
また、現在のページネーションは濃い緑色にすることで区別しやすくしています。
ソースコードは以下の通りです。
.pagination-next-link {
border: solid 2px #008000;
background-color: #3cb371;
color: white;
}
.page-numbers {
border: solid 2px #008000;
background-color: #3cb371;
color: white;
}
.pagination .current {
background-color: #6b8e23;
}サンプル「シンプル・丸型ベース」
二つ目のサンプルは「シンプル・丸型ベース」です。
実際に表示させてみると以下の画像のようになります。
４角に丸みを付けています。
丸みを帯びた方が優しそうで個人的には好きです。
ソースコードは以下の通りです。
.pagination-next-link {
border-radius: 15px;
border: solid 2px #696969;
background-color: #696969;
color: white;
}
.page-numbers {
border-radius: 15px;
border: solid 2px #696969;
background-color: #696969;
color: white;
}
.pagination .current {
background-color: #c0c0c0;
}サンプル「マリアナ・ブルー」
三つ目のサンプルは「マリアナ・ブルー」です。
実際に表示させてみると以下の画像のようになります。
次のページは《display: none;》で見えなくしています。
ページネーションは青色ベースに、また、破線で囲っています。
.pagination-next-link {
display: none;
}
.page-numbers {
border: dashed 2px #1e90ff;
background-color: #1e90ff;
color: white;
}
.pagination .current {
background-color: #87ceeb;
}サンプル「丸型・レッド」
四つ目のサンプルは「丸型・レッド」です。
実際に表示させてみると以下の画像のようになります。
ページネーションは赤色ベースに、また、丸形にしています。
.pagination-next-link {
border-radius: 15px;
border: solid 2px #b22222;
background-color: #b22222;
color: white;
}
.page-numbers {
border-radius: 50px;
background-color: #b22222;
color: white;
}
.pagination .current {
background-color: #cd5c5c;
}サンプル「パープルベース」
五つ目のサンプルは「パープルベース」です。
実際に表示させてみると以下の画像のようになります。
次のページに更に丸みを付けてみました。
また、ページネーションはマウスを乗せた際の囲いを無くしています。
.pagination-next-link {
border-radius: 50px;
border: solid 2px #6a5acd;
background-color: #9370db;
color: white;
}
.page-numbers {
background-color: #9370db;
color: white;
}
.page-numbers:hover{
border: 0px;
}
.pagination .current {
background-color: #dda0dd;
}ページネーションをカスタマイズしてみよう！
ページネーション自体はクリックされることが少ないものの、Cocoonのページネーションはシンプルなのでページネーションをカラフルに装飾することでサイトが少し明るくなります。
もしも、Cocoonのページネーションをカスタマイズしようとお考えの方は、今回紹介したサンプルを元にカスタマイズを行ってみてはいかがでしょうか。
コメント