【Luxeritas】ページネーションのカスタマイズ

2023/07/072024/09/04Luxeritas

ナツメグ

ナツメグです

もうダサくしないカスタマイズ第13回。

Luxeritas（ルクセリタス）を使った
ブログ『ナツメグチャンネル』の記事が
10記事を超えたので
ページネーションが表示されるようになりました。

ページネーションというのは
記事一覧の下にある
ページを切り替える
スイッチです。

ページャーとも言うようです。

このページネーションの色が
例によって
軽薄な赤なので
カスタマイズして行きます。

四角の形は正方形にしたいので形も変えます。

Contents

1. 【Luxeritas】ページネーションのカスタマイズ
- 1.1. CSSの解説

【Luxeritas】ページネーションのカスタマイズ

スタイルシートにCSSを書き込みます。

/*ページネーション*/
.pagination>li{
	color:#333;
	padding: 0 3px;
}

.pagination>li>a,
.pagination>li>span,
.pagination>li:last-child>a,
.pagination>li:last-child>span,
.pagination>.not-allow:first-child>span:hover{
	border: 1px solid #c5e0dc;
}

.pagination>.active>span.current{
	background-color: #555e7b;
}

.pagination>.active>span, .pagination>li>a:hover{
	background-color: #99b2b7;
}

.pagination>li span, .pagination>li>a{
	background-color: #fff;
}

@media screen and (max-width: 575px){
.pagination>li> a,
.pagination>li> span{
	line-height: 8px;
	}
}

こうなりました。

1ページ目がカレントで
現在表示されているページの色。

2ページ目の色はマウスオーバーで
色が変わるようにしました。

CSSの解説

例によって参考にしたサイトの
CSSをコピペしていじって行くスタイルなので
分かってないところもありますが
解説して行きます。

.pagination>liは四角の間隔を空ける指示ですね。

padding: 0 3px;で
上下に0px、左右に3pxずつ余白を入れました。

.pagination>li>a,
.pagination>li>span,
.pagination>li:last-child>a,
.pagination>li:last-child>span,
.pagination>.not-allow:first-child>span:hoverは
四角の枠の色です。

薄い水色の#c5e0dcを指定。

.pagination>.active>span.currentはカレントです。

現在表示されているページの色を
紺色#555e7bに指定。

.pagination>.active>span, .pagination>li>a:hoverは
マウスオーバーした時の色。

青っぽいグレー#99b2b7を指定。

.pagination>li span, .pagination>li>aは
何も選択されていない部分ですね。

白を指定。

このままだとスマホ表示で
四角が縦長になってしまいます。