
今回は、
WordPressテーマ「ストーク」の
ページネーションのカスタマイズをご紹介します。
目次
ページネーション(ページャー)とは。
ページネーション(ページャー)とは、
ページ送り機能のこと。
ページングと呼んだりする方もいるそうです。
- [次のページ][前のページ]
- [<<][<][>][>>]
クリックすると、
クリックしたページに移動します。
STORK(ストーク)のページネーション
「ストーク」のデフォルトのページネーションは正方形。

これはこれでかわいいのですが、

このサイトには、
ちょっとカチッとしすぎかな。
と思いました。

もう少し柔らかい雰囲気が出るようにしたいな♡
ということで、
カスタマイズすることにしました。
コピペでできるページネーションのカスタマイズ4種。

これから4種類のページネーションのCSSコードをご紹介するのですが、
まず最初に、
「CSSコードをコピペする場所」からお知らせしますね。
CSSとは、ウェブページのスタイルを指定するための言語です。
「Cascading Style Sheets」(カスケーディング・スタイル・シート)
の頭文字をとってCSS(シーエスエス)、
スタイルシートとも呼ばれています。
カスタマイズの中にある「追加CSS」にコピペします。
ダッシュボードから外観を選んで、カスタマイズをクリックします。

カスタマイズの一番下に追加CSSがあるので、
ここにお好みのCSSコード(後述)をペーストします。

ペーストすると、
追加CSSの右側の画面に、
ペーストしたCSSが反映されるので、
イメージ通りか確認してみてくださいね。
イメージ通りであれば、
公開ボタンをクリックすると確定されます。
もし、好みと違った場合は、
別のCSSに置き換えて公開ボタンをクリックします。
また、何もせず終わりにする場合は、
×ボタンをクリックで終了します。

ページネーション丸①

まんまるバージョンのCSSコードはこちらです。

わたしはコレを使っています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/* ページネーション丸① */ .pagination a, .pagination span{ padding: 9px 14px; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; } @media only screen and (max-width: 767px){ .pagination a, .pagination span{ padding: 8px 14px; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; } } |
ページネーション丸②

オーバルバージョンのCSSコードです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/* ページネーション丸② */ .pagination a, .pagination span{ padding: 7px 14px; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; } @media only screen and (max-width: 767px){ .pagination a, .pagination span{ padding: 7px 14px; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; } } |
ページネーション角丸①

丸みのある四角バージョンのCSSコードはこちらです。
1 2 3 4 5 6 7 |
/* ページネーション角丸① */ .pagination a, .pagination span{ padding: 8px 14px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; } |
ページネーション角丸②

わずかに丸みのある四角バージョンのCSSコードはこちらです。
1 2 3 4 5 6 7 |
/* ページネーション角丸② */ .pagination a, .pagination span{ padding: 8px 14px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } |
「素敵ブログにしたい」人にかわいいページネーションはおすすめです。
いかがでしたでしょうか。
とっても簡単にカスタマイズできるので、
ぜひ試してみてくださいね。
「もっといろいろカスタマイズして素敵にしたい」
「ストークのデフォルトのままは嫌だな」
「コレじゃない感」を満たすために、
あなたのブログがますます素敵になるよう、
初心者でも簡単にできるカスタマイズ法を
これからもお伝えしていきたいと思います。
ぜひ参考にされてみてくださいね。

こんにちは。元No.1風俗嬢ゆーきです。