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

CSS

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

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

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

ルクセリタスのページャー デフォルト

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

ルクセリタスのページャー カスタマイズ後

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シェアボタンの非表示

ルクセリタスのページャー カスタマイズ後2

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

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

さらにアレンジする

囲みを円にしたい場合は

ルクセリタスのページャー カスタマイズ後 円

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;
}

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

0

カスタマイズ

Posted by どらみ