Luxeritas(ルクセリタス)でページネーションをカスタマイズする

記事の一覧が複数ページにまたがる時、一覧下にはページを移動するためのボタンが表示されます。
今日はこちらを少しカスタマイズしてみたいと思います！

ページネーションをカスタマイズする

デフォルトのページネーションはこんな感じ

これを、こんな感じにカスタマイズしたいと思います。

CSSに以下のコードを追加するだけでOKです！

/* ページネーション */
.pagination > li > a, .pagination > li > span {
	background-color: #eee;
	border:1px solid #ccc;
}
.pagination > li {
	padding:0 3px;
}
.pagination > li:last-child > a, .pagination > li:last-child > span, .pagination > .not-allow:first-child > span:hover{
	border:1px solid #ccc;
}

記事一覧に表示する記事数の変更

記事一覧に表示する記事数はダッシュボードの「設定」「表示設定」から変更できます。

SNSシェアボタンの非表示

ページャーの下のSNSシェアボタンはカスタマイザーで非表示にできます。

開く「SNSシェアボタン(1)」 □ トップページリスト下にSNSボタン表示をOFF

さらにアレンジする

囲みを円にしたい場合は

CSSの5行目を追加します。

/* ページネーション */
.pagination > li > a, .pagination > li > span {
	background-color: #eee;
	border:1px solid #ccc;
	border-radius:50px; /* これを追加する */
}
.pagination > li {
	padding:0 3px;
}
.pagination > li:last-child > a, .pagination > li:last-child > span, .pagination > .not-allow:first-child > span:hover{
	border:1px solid #ccc;
}

以上で完成です！
よかったらお好きなように色を変えて使ってみてくださいね^^