スポンサーリンク

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

Cocoon
スポンサーリンク
本ページにはプロモーションが含まれています。

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

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

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

スポンサーリンク

完成イメージ

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

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

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

実際の動きを確認されたい場合はトップページへアクセスし確認してください。

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

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

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

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

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

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

タイトルとURLをコピーしました