IDOL×IDOL STORY! 感想レビュー
ナツメグチャンネル
Luxeritas カスタマイズ サムネイル 05
【Luxeritas】記事一覧カスタマイズ【カード型】 サムネイル
【Luxeritas】ヘッダー下に画像リンク4つ並び【再利用ブロック】 サムネイル 02

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

2024/06/13Luxeritas

【Luxeritas】ページネーションのカスタマイズ サムネイル 02
ナツメグチャンネル

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

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

ページネーション
ナツメグチャンネル

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

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

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

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

【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は
何も選択されていない部分ですね。

白を指定。

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

ページネーション カスタマイズ モバイル
ナツメグチャンネル

@media screen and (max-width: 575px)の
.pagination>li> a,
.pagination>li> spanに
line-height: 8px;と書き込みました。

ページネーション カスタマイズ モバイル 02
ナツメグチャンネル

スマホも正方形に表示されました。

今回参考にさせていただいたのはこちら。

メープルの国のアリスさま

ありがとうございました。

今回は以上です。

もうダサくしないカスタマイズ

【Luxeritas】もうダサくしないカスタマイズ
【Luxeritas】サムネイルは正方形か長方形か!?
【Luxeritas】サムネイルを長方形に統一
【Luxeritas】メタ情報のカテゴリーのカスタマイズ
【Luxeritas】記事一覧カスタマイズ【カード型】
【Luxeritas】文字の色はどうしよう!?【文字リンク】
【Luxeritas】SNSシェアボタンを消します
【Luxeritas】ブログカードのカスタマイズ
【Luxeritas】デベロッパーツールの使い方【Google Chrome】
【Luxeritas】ヘッダー下に画像リンク4つ並び【再利用ブロック】
【Luxeritas】カルーセルスライダーのカスタマイズ【JIN風】
【Luxeritas】メニュー(グローバルナビ)とフッターの色を揃える
【Luxeritas】ヘッダー上の帯メニューのカスタマイズ
【Luxeritas】記事内のカスタマイズ【Snow Monkey Editor】
【Luxeritas】目次のカスタマイズ
【Luxeritas】サイドバーカテゴリーのカスタマイズ【AFFINGER風】
【Luxeritas】サイドバーカテゴリーのカスタマイズ【JIN風】
【Luxeritas】サイドバープロフィールのカスタマイズ
【Luxeritas】カテゴリーと記事一覧にタイトルを付ける
【Luxeritas】新着記事のカスタマイズ
【Luxeritas】グローバルナビのメニューにアイコンを付ける

Luxeritas