ここあです。
WordPressテーマSTORK（ストーク）は
カスタマイズしようと思えば
いろいろな部分がカスタマイズできます。
フォントを変えたり、見出しを変えたり…
今回はSTORKユーザーが
あまりしていないと思われる
ページャーのカスタマイズ方法をご紹介します。
せっかくオシャレなWordPressテーマSTORKを手に入れたんだし
「とことんこだわってカスタマイズしたい！」
という方にはおすすめです。
私もやっています＾＾
（こだわりも大事…）
ページャーのカスタマイズもコピペだけで
簡単にできるのでぜひ試してみてくださいね。
そもそもページャーとは？
ブログのタイトルを見て
「ページャーをカスタマイズしよう！」
と言われても…
「ページャーって何？」ってなりますよね＾＾；
ページャーとはズバリ…
トップページの一番下にあるアレです。
↓ そう、これです。
STORKのデフォルト（標準）のページャーは
角がカッチリした縦長の四角になっていますよね。
落ち着いた色調で
カチっとしたサイトデザインにしている人には
これで全然問題はないでしょう。
しかし、パステル系の雰囲気で
「柔らかい雰囲気にしたい」と思う方には
少し不満があるのではと思います。
なので、もう少し柔らかくできないものかと
調べてみました。
- ページャーの角を丸くする方法
- ページャーを円形にする方法
2通りご紹介しますので
あなたのサイトの雰囲気に合わせて
調整してみてくださいね。
ページャーのカスタマイズ方法
CSSコードを以下の場所に記載してください。
ダッシュボードメニューから
外観 → カスタマイズをクリック。
追加CSSをクリックし、CSSコードを入力しましょう。
CSSコードをコピーした瞬間に見た目が変わります＾＾
角が丸いページャーのCSS
まずはシンプルに
ページャーの角を落とすCSSです。
- クリックでCSSコードを表示
.pagination a, .pagination span{
padding: 7px 14px;border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
ちなみに調整の仕方は…
10pxと表示されている部分の数字を大きくすると
角丸の大きさが大きくなります（円に近づく）
逆に数字を小さくすると角丸が小さくなります。
角丸の大きさを変えたいときは10pxの部分
3カ所全て数字を揃えてくださいね。
ブラウザによって
見え方が変わる可能性がありますので…＾＾
また、形状は正方形にしてありますが
padding: 7px 14px;の7pxとか14pxの数字を変えると
四角の形状も変えることができます。
丸いページャーのCSS
次に、私と同じく
ページャーを角丸ではなく
円形にするCSSコードです。
- クリックでCSSコードを表示
.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: 8px 14px;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}
}
私と同じであれば、上記CSSコードで
ほぼ正円に見えるはずですが…
微調整したい場合は
padding: 7px 14px;の数字を変えてみてください。
形状が変わります。
STORK（ストーク）のページャーカスタマイズまとめ
このページャーの変更は
ブログのデザインにこだわりたい人のためのCSSコードです。
ページャーの形状を変えることは
さほど大きなことではありませんが
それでもトップページにある
ページャーの形状を変えるだけで
訪問者には少し違った印象を与えられるのではと思います。
STORK（ストーク）は画面右下にある
トップへ戻るボタンのカタチも丸いので
ページャーのカタチを変更すると
統一感が出て良いかもしれませんね。
サイトのイメージをかわいくしたい方は
ぜひ変更してみてくださいね。
その他のカスタマイズ方法は
こちらの記事に記載しています。
ぜひ参考にしてみてください＾＾
最後までお読みいただきありがとうございました！
