【コピペ3選】CSSでSTORK(ストーク)のページネーションをカスタマイズ

スポンサードリンク

こんにちは~かめりさですっ!
今回は、有料WordPressテーマSTORK(ストーク)の「ページネーション」をカスタマイズする方法をご紹介します♡

機械音痴で、CSSなどの細かいコードを扱うのが苦手な私でも、簡単にカスタマイズすることができました 🙂

ブログの雰囲気を変えたいって人におすすめです

「ページネーション」って?

ページ番号とは、記事一覧の下にでてくるものです。

デフォルトのままにすると四角であんまり可愛くないし、お堅いイメージがついてしまう、、、、。

カスタマイズする方法

パソコン

いまからご紹介するCSSコードを、追加CSSにコピペするだけでできちゃいます!

コピペ先

・「外観→カスタマイズ→追加CSS」の一番下の新しい欄にコピペ!!

CSS

丸いタイプ

ページ番号

.pagination a, .pagination span{
padding: 8px 14px;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}
@media only screen and (max-width: 767px){
.pagination a, .pagination span{
padding: 9px 14px;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}
}

端が丸い四角のタイプ①


.pagination a, .pagination span{
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

端が丸い四角のタイプ②


.pagination a, .pagination span{
border-radius: 20px;
-webkit-border-radius: 5px;
-moz-border-radius: 10px;
}

いかがでしたでしょうか?

上記の灰色のところに表示されているコードを、CSSにコピペするだけで簡単にカスタマイズできてしまいます!!

私自身、こんなに簡単だとは思っていませんでした 😛

今後も初心者でもできるカスタマイズ方法をご紹介していくので、是非参考にてくださいね♡

 

 

 

スポンサードリンク

この記事をシェア♡

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です