Cocoonのページ送りナビ(ページネーション)のカスタマイズ方法を紹介します。
ページネーションとは、記事一覧画面の1番下にある、各ページへのリンクを並べてアクセスしやすくするためのものです。

こんな見た目になります

どんなデザインにも合わせやすい、すっきりとシンプルなデザインにしました。
ハバーすると下線が現れ、文字の色が変わるアニメーション付きです。
Cocoonのページ送りナビをカスタマイズする手順
カスタマイズ用CSSコードを「追加CSS」にコピペします。
追加CSSは、「管理画面→カスタマイズ→追加CSS」で編集できます。
カスタマイズ用CSS
ページ送りナビ(ページネーション)のカスタマイズ
/* ページネーション *
.page-numbers{
color: #6a859c;
border-radius: 0;
border-bottom: 2px solid;
border-color: transparent;/* ページネーションの枠線を消す */
}
/* 色を変更 */
.pagination .current{
background: none;
border-bottom: 2px solid #f564a9; /* 枠線の色 */
color: #f564a9; /* 文字の色 */
}
.pagination a:hover{
background: none;
border-bottom: 2px solid #f564a9; /* 枠線の色 */
color: #f564a9; /* 文字の色 */
}
.page-numbers.dots{
background-color: #fff;}
ボタンのカスタマイズ
.pagination-next-link {
display: inline-block;
line-height: 1;
color: #fff;
background: #f58694;
padding: 12px 20px;
border-radius: 3px;
opacity: 80%;
margin: 10px;
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.2);
-webkit-tap-highlight-color: transparent;
transition: .3s ease-out;
}
.pagination-next-link:hover {
color: #fff;
background: #f58694;
box-shadow: 0 13px 20px -3px rgba(0, 0, 0, 0.24);
}
丸系のページネーションデザイン

/* ページネーション *
.page-numbers{
color: #6a859c;
border-radius: 50%; /* 角を丸く */
border-color: transparent;/* ページネーションの枠線を消す */
}
/* 色を変更 */
.pagination .current{
background: #71d9f5;/* 背景色 */
color: #fff; /* 文字の色 */
}
.pagination a:hover{
background: #71d9f5;/* 背景色 */
color: #fff; /* 文字の色 */
}
.page-numbers.dots{
background-color: #fff;}
四角系のページネーションデザイン

.page-numbers{
color: #6a859c;
border-radius: 0;
border-color: #f564a9;
margin: 0;
width: 56px;
}
.pagination .current, .pagination a:hover{
background: #f564a9; /* 背景色 */
color: #fff; /* 文字の色 */
}
.page-numbers.dots{
background-color: #fff;
}
フラットなボタンデザイン

.pagination-next-link {
display: inline-block;
line-height: 1;
color: #fff; /* 文字色 */
background: #faa2c1; /* 背景色 */
padding: 12px 20px;
border-radius: 3px;
border: 2px solid #faa2c1;
margin: 10px;
transition: .3s ease-out;
}
.pagination-next-link:hover {
color: #faa2c1;
background: #fff;
}