ワードプレスのテーマ「Cocoon」のカスタマイズにどっぷりハマっているタロです。
この記事ではCocoonのページネーションを丸く・可愛く・スマートにおしゃれカスタマイズしてみたので紹介します。
ぜひ、真似してくれたら嬉しいです♩
完成イメージ
下記の画像のようなページネーションを作ります。
![](https://tarovlog.com/wp-content/uploads/2021/02/cocoon_pagination-1024x520.png)
数字にホバーした際はうっすらと背景色を出すようにしてみました。
↓数字の上にホバーしたとき!
![](https://tarovlog.com/wp-content/uploads/2021/02/cocoon_pagination_hover-1024x511.png)
ページネーションのカスタマイズ手順
カスタマイズ手順は以下の通り。
STEP01
CSSのコピペstyle.css にコードをコピペ
CSSを style.css にペタッ!と貼り付けるだけ♩
style.css にコードをコピペ
下記のCSSを style.css にコピペします。
/* ページネーション
-------------------------------------------------- */
#main .pagination .page-numbers {
display: inline-block;
width: 46px;
height: 46px;
border-radius: 50%;
background: #fff;
font-size: 17.5px;
font-weight: bold;
text-decoration: none;
line-height: 46px;
border: unset;
}
#main .pagination .current {
color: #fff;
background-color: #ff9f67; /* 背景色 */
}
#main .pagination a:hover {
background-color: #efefef; /* ホバー時の背景色 */
}
CSSを貼り付けた後はページネーションのカスタマイズがうまくいっているか確認してみてください。
読むな危険!Cocoon カスタマイズを一挙公開中
![](https://tarovlog.com/wp-content/uploads/2021/02/cocoon-customize-summary_top-1024x576.png)
このブログでも実装しているCocoonカスタマイズを大公開!!
デザインには正解がないためやればやるほど沼にハマってしまいます。
ですので、Cocoon ユーザーは絶対に読まないでください。
コメント
[…] Cocoon ページネーションをおしゃれにカスタマイズワードプレスのテーマ「… […]