【コピペだけ!】STORK(ストーク)のページャーをカスタマイズしよう!

【コピペだけ!】STORK(ストーク)のページネーションをカスタマイズ

ここあです。

 

WordPressテーマSTORK(ストーク)は

カスタマイズしようと思えば

いろいろな部分がカスタマイズできます。

 

フォントを変えたり、見出しを変えたり…

 

今回は「STORK」ユーザーが

あまりしていないと思われる

ページャーのカスタマイズ方法をご紹介します。

 

せっかくオシャレなテーマ「STORK」を手に入れたんだし

とことんこだわってカスタマイズしたい!

という方にはおすすめ。

 

私もやっています^^
(こだわりも大事…)

 

コピペだけで簡単にできるので

ぜひ試してみてくださいね。

 

そもそもページャーとは?

ブログのタイトルを見て

ページャーをカスタマイズしよう!

と言われても…

 

ページャー」って何?ってなりますよね^^;

 

ページャーとはズバリ…

トップページの一番下にあるアレです。

 

↓ そう、これです。

ストーク:ページネーション

 

STORKのデフォルト(標準)のページャーは

角がカッチリした縦長の四角になっていますよね。

 

落ち着いた色調で

カチっとしたサイトデザインにしている人には

これで全然問題はないでしょう。

 

しかし、パステル系の雰囲気で

柔らかい雰囲気にしたいと思う方には

少し不満があるのではと思います。

 

なので、もう少し柔らかくできないものかと

調べてみました。

 

  • ページャーの角を丸くする方法
  • ページャーを円形にする方法

2通りご紹介しますので

 

あなたのサイトの雰囲気に合わせて

調整してみてくださいね。

 

ページャーのカスタマイズ方法

CSSコードを以下の場所記載してください。

 

ダッシュボードメニューから「外観」→「カスタマイズ

ダッシュボードメニュー

 

追加CSS」をクリックし、CSSコードを入力。

dropshadow

 

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コードです。

 

.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」(ストーク)は画面右下にある

トップへ戻るボタン」のカタチも丸いので

 

ページャーのカタチを変更すると

統一感が出て良いかもしれませんね。

 

サイトのイメージをかわいくしたい方

ぜひ変更してみてくださいね。

 

その他のカスタマイズ方法は

こちらの記事に記載しています。

ぜひ参考にしてみてください^^

 

最後までお読みいただきありがとうございました!

 

設定でよく分からないことがあれば

気軽にご相談くださいね!

「ここあ」に問い合わせをする

 

合わせて読みたい!

 

【コピペだけ!】STORK(ストーク)のページネーションをカスタマイズ

「自分らしく」夢に向かって楽しい人生を生きるために


未来の自分を想像しよう
「副業であなたは変わる」

会社に縛られず
「自由な生き方を選べる」ように
副業で稼ぐ方法をご紹介します。


ABOUTこの記事をかいた人

ここあ

グラフィックデザイナー歴20年。2017年アフィリエイトを始めて独立。デザイナーのスキルも生かし、アフィリエイトでストレスフリーな生活を楽しみながら、ネットビジネスの素晴らしさを一人でも多くの方に伝えたくこのブログを立ち上げました。