相互リンク詳細へ

簡単!Luxeritasルクセリタスのページャーリンクをカスタマイズ

2019-05-07カスタマイズ

 

ページャーリンクって?

ホームページに投稿記事を表示している場合のトップページや、カテゴリー別記事一覧、アーカイブページなどの記事一覧の下に出る「その他のページへのリンク」の事です。

 

↓ 赤枠部分

6795_11

 

 

ルクセリタスのページャーデザインは、デフォルトで以下のような感じです。

6795_01

カレント(現在の表示)ページに色が付き、カーソルが載ったリンクにも同じ色が付きます。

これを少しカスタマイズしていく方法について書いてみます。

 

バージョンと初期デザインについて

 

当サイトで使用中のバージョンは以下です。(記事作成時)

Luxeritas Child Themeバージョン: 3.0.0
Luxeritasバージョン: 3.5.9

ダウンロードはこちら

 

ページャーの表示・非表示は以下から行えます。
 「外観」→「全体レイアウト」

6795_05

 

 

囲み枠の線を消す

 

6795_12

囲み枠を消すには以下のコードで可能です。

#bottom-area{border:none;}

 

 

リンク色の変更

 

使用クラス名 .pagination

 

子テーマのスタイルシートにCSSを追記します。

child_style01 child_style02

 

リンクホバー色とカレントページ色

現在のページと、マウスが載ったリンクの色を変更します。

6795_06

.pagination > .active > span,
.pagination > li > a:hover {
background: #fb8a8a;
}

 

ホバー時の文字色

6795_07

薄い色を使う場合で、文字が白くならないようにする際は、以下のように文字色も追記します。

.pagination > .active > span,
.pagination > li > a:hover {
background: #ffffe0;
color: #000;
}

 

 

スタイルの変更

 

使用クラス名 .pagination

以下、簡単な3パターンの例です。

 

枠なし角丸め

6795_08

.pagination > li > a,
.pagination > li > span {
border:none;
border-radius: 30%;
}

 

 

枠を円に

6795_09

.pagination > li > a,
.pagination > li > span {
border-radius: 50%;
line-height: 25px
}

 

 

正方形・角丸め

6795_10

.pagination > li > a,
.pagination > li > span {
border-radius: 30%;
line-height: 25px
}

 

 

カラー変更には以下もご利用下さい。

マカロンビビッドパステル和色セーフ色名 配色パターンサンプル

 

ルクセリタスのその他カスタマイズは以下もご覧ください。