【Cocoon】ページネーションの設定とデザイン変更・CSSカスタマイズ

ヒビラボでは、Cocoonをカスタマイズする方法やCSSコード（コピペ可）をまとめています。

ページネーションとは？

検索窓（検索フォーム）は、ページ内でユーザーが特定の情報を探すための入力エリアです。

検索フォームの役割は次のとおりです。

• 効率的な情報探し
• ユーザーエクスペリエンスの向上
• 訪問者のニーズ把握

１ページに表示する記事の数を変える

１ページに表示する記事の数を変える場合は、【設定】→【表示設定】→【１ページに表示する最大投稿数】で数を変更できます。

このブログのページネーションカスタマイズ

このブログのページネーションカスタマイズは以下のとおりです。

• 【次のページボタン】→消去
• 【ページ番号ボタン】→丸型にして変更、通常時の色とホバー時の色を変更

カスタマイズのCSSを追加する場所

カスタマイズでCSSコードを使用するときは、以下の場所にコードをコピペしてください。

CSSを追加する場所

【外観】→【カスタマイズ】→【追加CSS】に以下のコードを記述する。

次ページボタンデザインを無くす

次ページボタンデザインを無くすCSSは以下のとおりです。

/*次ページボタンを無くす*/
.pagination-next-link {
  display: none;
}

ページネーションの番号ボタンを丸くする方法

ページネーションの番号ボタンを丸くする方法CSSは以下のとおりです。

/*ページネーションの番号ボタンを丸くする*/
.page-numbers{
	border-radius: 50%; /*角丸*/
}

ページネーションをホバーしたときのデザインを変える

ページネーションをホバーしたときのデザインを変えるCSSは以下のとおりです。

/*ページネーションの番号ボタンをの色を変える*/
.page-numbers{
  color:#a8bcc8;  /*文字色*/
  font-weight: bold;  /*太文字にする*/
  border-color: #a8bcc8;  /*ボタンの境界線の色*/
}
/*ホバー時の背景色・文字色を変える*/
.pagination a:hover { 
  background: #f6f7f7;  /*背景色*/
  color:#a8bcc8;  /*文字色*/
}

まとめ：ページネーションをサイトカラーにあわせてみよう

ページネーションは細かい部分ですが、サイトカラーにあわせて馴染ませると違和感がなくなります。

ぜひページネーションを変えてみましょう。