Cocoon ページネーションをおしゃれにカスタマイズ

ワードプレスのテーマ「Cocoon」のカスタマイズにどっぷりハマっているタロです。

この記事ではCocoonのページネーションを丸く・可愛く・スマートにおしゃれカスタマイズしてみたので紹介します。

ぜひ、真似してくれたら嬉しいです♩

完成イメージ

下記の画像のようなページネーションを作ります。

数字にホバーした際はうっすらと背景色を出すようにしてみました。

↓数字の上にホバーしたとき！

ページネーションのカスタマイズ手順

カスタマイズ手順は以下の通り。

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 カスタマイズを一挙公開中

このブログでも実装しているCocoonカスタマイズを大公開！！

デザインには正解がないためやればやるほど沼にハマってしまいます。

ですので、Cocoon ユーザーは絶対に読まないでください。

【初心者でもできる！】Cocoonカスタマイズまとめ！コピペで簡単開発

たろ当ブログのカスタマイズを一挙大公開中！！このブログはわいひらさんという方が作られたCocoonというワードプレスのテーマを使ってサイトを作っています。もし同じCocoonを使っている方はこれから紹介する記事の通りにカスタマイズすることで...

tarovlog.com

2021.02.20