Lognote

ネット集客に強い整体院サイトを制作

stinger8-pager-css-customize-thumbnail

STINGER8のページネーションを少しおしゃれにするCSSデザイン例

公開日:2017-07-18
最終更新日:

WordPressの記事が増えてくると、ページネーションのデザインも気になってきます。

ページネーションというのは、記事一覧ページの最下部にあるページ移動ボタンのことですが、STINGER8のページネーションのデザインはデフォルトだと以下のようになっています。

stinger8-pager-css-customize-01

これだと、現在のページのボタンとほかのページへのリンクボタンのデザインがほとんど同じためユーザビリティー的にあまりよくありません。

今回の記事では、このページネーションの見た目をCSSで視覚的にわかりやすくするカスタマイズをおこないます。

最終完成イメージ

カスタマイズ完成イメージです。

stinger8-pager-css-customize-02

現在見ているページははっきりとした青色にし、ほかのクリックできるボタンとしっかり区別しています。

CSSコード

ページネーションのデザインを変更するには、以下のCSSを追加してください。

/*--------------------------------
ページネーション
---------------------------------*/
.st-pagelink .page-numbers { /* ボタン全てのボーダー */
	border: 1px solid rgba(4, 137, 177, 0.9);
}
.st-pagelink .page-numbers { /* 現在のページ以外のボタン */
	color: #3498db;
	background: #fff;
}
.st-pagelink a.page-numbers:hover { /* マウスホバーしたときのボタン */
	text-decoration: none;
	color: #fff;
	background: #3498db;
	transition: all .5s ease;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	opacity: 1.0;
}
.st-pagelink .page-numbers.current { /* 現在のページのボタン */
	color: #fff;
	background: #3498db;
	opacity: 1.0;
}
.st-pagelink .page-numbers.dots { /* 端折られたページのドット */
	color: #3498db;
	background: #fff;
	border: none;
	opacity: 1.0;
}

個人的にマウスオーバーでふわっと色の変わるところも気に入っています。

CSS内のコメントを参考に、色やボーダーのデザインも変更してみてください。

以上、「STINGER8のページネーションを少しおしゃれにするCSSデザイン例」という記事をお届けしました。

-STINGER

この記事のタイトルとURLをコピーする

オススメ商品はこちら!

STINGER8のページネーションを少しおしゃれにするCSSデザイン例
この記事はいかがでしたでしょうか。
是非Lognoteの最新ニュース情報を、
いいねしてチェックしてください!

関連記事

affinger4-breadcrumb-careless

【AFFINGER4】年月別アーカイブのパンくずリストリンクの修正方法

AFFINGER4の年月別アーカイブのパンくずリストで明らかにおかしい点を発見。 AFFINGER4だけでなく …

stinger8-footer-3column-customize-thumbnail

STINGER8のフッターに3カラムウィジェットを設置するカスタマイズ方法

STINGER8のフッターに3カラムウィジェットを設置する方法を紹介します。 STINGER7をご利用の方はこ …

sns-follow-button-thumbnail

STINGER8の記事下にサムネ付きでフォロー誘導ボックスを設置する方法

STINGER8の記事下にいいねボタンやフォロワー誘導ボックスをサムネ付きで設置する方法を紹介します。

page-top-button-link-change-thumbnail

STINGER7の「ページトップへ戻るボタン」が一番上まで戻らなくなったときの修正方法

ヘッダーの横幅をこちらのサイトを参考に画面いっぱいに広げるカスタマイズをしました。  WebCraf …

device-thumbnail-size-thumbnail

STINGER8の一覧サムネイルサイズをデバイス毎に変更する方法

STINGER8の記事一覧のサムネイルサイズは、デフォルトだと150pxの画像を100px四方の正方形に縮小して表...

コメントを入力

日本語が含まれない投稿は無視されます。(スパム対策)

トラックバックURL

管理人のヤマカワです
山形在住、整体院「癒眠」院長
3級ウェブデザイン技能士


Lognote
2017/9/12
ご報告いただきありがとうございます! それは知りませんでした! メーカーの違いとかもあるのでしょう...
通りすがり
2017/9/12
比較的新しいカメラではサムネイル見れないらしいですよ。 うちもコーデック入れましたが2016年発売カ...
Lognote
2017/9/05
>> 堀田様 お役に立てて何よりです! 他に良い予約プラグインが出てくれればいいんですけ...
堀田
2017/9/05
ありがとうございました。 PHPを7 にしたらエラー吐き出して、有料版は PHP7 対応なんで有料...
Lognote
2017/8/16
>> たろ様 子テーマのコピー方法を省略しておりました。 解説記事を書きましたので、よろ...
たろ
2017/7/31
子テーマにコピーするの所がわかりにくい