【コピペOK】CSSでページネーションのデザインをカスタマイズ【Cocoon】

今回は、CocoonでCSSをコピペしてページネーションのデザインをカスタマイズする方法について初心者にもわかりやすく解説します。

ちなみに僕がCocoonを使ってた時のページネーションのデザインはこんな感じですね。👇

このページネーションのデザインはパクってもOKです。
（※現在はCocoonからAFFINGER6に移行したので、デザインが変わっています。）

ページ送りナビについて

ページ送りナビは、本文下に前のページと次のページを表示できます。ページ送りナビについては、以下の記事で解説しています。

参考：ページ送りナビのデザインをカスタマイズ

CSSでページネーションのデザインをカスタマイズ

Cocoonのデフォルトだと、このように表示されます。👆
このページネーションのデザインをカスタマイズするCSSを紹介します。

CSSのコピペ場所

まず、CSSコードを追加する場所を表示しましょう。
管理画面から［外観➡︎テーマエディター］を選択。

［編集するテーマを選択］のところがCocoon Child（子テーマ）であることを確認してください。もしなってない場合はCocoon Childに設定しましょう。

style.cssを選択したら、コードを好きなとこに追加してください。
※よくわからない方は一番下にコードをコピペしたらOK。

ページネーションをカスタマイズ

それでは、ページネーションをカスタマイズするCSSを紹介します。
紹介するのは以下の5つのデザインです。

• ①：背景色
• ②：文字
• ③：枠線
• ④：影をつける
• ⑤：現在地・ホバー時のデザイン
• ⑥：形を丸くする

それでは順番に解説していきます。

デザイン①：背景色

まず、背景色を変える方法です。
以下のCSSコードをコピペしましょう。

.pagination-next {/*ページネーション（次のページ）*/
background-color: aliceblue;/*背景色*/
}

.page-numbers {/*ページネーション（番号）*/
background-color: aliceblue;/*背景色*/
}

おそらく以下のように表示されると思います。

薄い青色を選びしました。
スッキリした雰囲気になりましたね。

デザイン②：文字

続いては、文字のデザインです。
CSSコードは以下の通りです。

.pagination-next-link {/*ページネーション（次のページ）*/
color: #666;/*文字色*/
font-size: 20px;/*文字の大きさ*/
font-weight: bold;/*文字の太さ*/
font-family: Arial;/*フォントの種類*/
}

.page-numbers {/*ページネーション（番号）*/
color: #666;/*文字色*/
font-size: 20px;/*文字の大きさ*/
font-weight: bold;/*文字の太さ*/
font-family: Arial;/*フォントの種類*/
}

以下のように表示されます。

フォントによっては太さを調整できないものもあるので気をつけいてください。

デザイン③：枠線

次は、枠線のカスタマイズです。
CSSは以下の通り。

.pagination-next-link {/*ページネーション（次のページ）*/
border: 1px solid #369;/*太さ、スタイル、色*/
}

.page-numbers {/*ページネーション（番号）*/
border: 1px solid #369;/*太さ、スタイル、色*/
}

こんな感じのデザインになります。
枠線を非表示にする場合は以下のコードをコピペしましょう。

.page-numbers {/*ページネーション（番号）*/
　　border: none;/*枠線非表示*/
}

.pagination-next-link {/*ページネーション（次のページ）*/
　　border: none;/*枠線非表示*/
}

以下のように表示されます。

これだと違和感があるので、背景色や影をつけるといいですね。

デザイン④：影をつける

以下のコードで、影をつけることもできます。

.pagination-next-link {/*ページネーション（次のページ）*/
  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .5);/*影*/
}

.page-numbers {
box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .5);/*影*/
}

こんなデザインです。

ぼかさない影

このように、あえて影をぼかさないデザインもあります。
CSSコードはこちら。👇

.page-numbers {/*ページネーション（番号）*/
  box-shadow: 10px 15px 0px 0 rgb(224, 237, 255);/*影*/
}

.pagination-next-link {/*ページネーション（次のページ）*/
　box-shadow: 10px 15px 0px 0 rgb(224, 237, 255);/*影*/
}

こちらもスッキリした雰囲気ですね。

デザイン⑤：現在地・ホバー時のデザイン

続いて、現在地とホバー時のデザインについてです。
順番に解説します。

現在地のデザイン

Cocoonのデフォルトだとこのようなデザインです。
現在地のデザインは、以下のコードでカスタマイズしましょう。

.pagination .current { /*現在のページ*/
　background-color: #039; /*背景色*/
　color: #fff;/*文字色*/
　font-size: 20px;/*文字の大きさ*/
　font-weight: bold;/*文字の太さ*/
　border: 1px solid #369;/*枠線の太さ、スタイル、色*/
}

どれか必要なところだけコピペしてください。

ホバー時のデザイン

ホバー時のデザインは以下のCSSをコピペしましょう。

.pagination a:hover {/*ホバー時のページネーション（番号）*/
background-color: #039; /*背景色*/
　color: #fff;/*文字色*/
　font-size: 20px;/*文字の大きさ*/
　font-weight: bold;/*文字の太さ*/
　border: 1px solid #369;/*枠線の太さ、スタイル、色*/
}

.pagination-next-link:hover{/*ホバー時のページネーション（次のページ）*/
　background-color: #039; /*背景色*/
　color: #fff;/*文字色*/
　font-size: 20px;/*文字の大きさ*/
　font-weight: bold;/*文字の太さ*/
　border: 1px solid #369;/*枠線の太さ、スタイル*/
}

こちらも、先ほどと同じように必要なところだけコピペしてください。

デザイン⑥：形を丸くする&非表示にする

最後に、形を丸くする&非表示にする方法を解説します。

形を丸くする

Cocoonのデフォルトは、このような四角形のデザインです。

.page-numbers {/*ページネーション（番号）*/
  border-radius: 30px;/*半径*/
}

.pagination-next-link {/*ページネーション（次のページ）*/
  border-radius: 30px;/*半径*/
}

上記のCSSをコピペすると、以下のように丸い形にすることができます。

青いマーカーのところを書き換えて、半径を調整しましょう。

非表示にする

続いて、ページネーションを非表示にする方法です。

.pagination { /*ページネーション（番号）*/
display: none;/*非表示*/
}

.pagination-next {/*ページネーション（次のページ）*/
display: none;/*非表示*/
}

上記のコードを両方、もしくはどちらかをコピペしましょう。

全コードまとめ

今回は、ページネーションのデザインをカスタマイズできるCSSを以下の5つに分けて紹介しました。

すべてのコードまとめ

※一部省略しています。

「カスタマイズが難しい…」という方へ

Cocoonはカスタマイズが必要なので、エラーの対処やCSSの学習しなければいけません。「Cocoonでは収益化は難しいな…」という印象です。

僕もCocoonのWEBデザインに3ヶ月ほどかかってしまい、収益化まで遠回りしてしまいました。

そこで、「カスタマイズが難しい…」という方はAFFINGER6の導入がオススメです。僕もAFFINGER6でサイトを運営しており、13歳で月収5桁を達成しました。

AFFINGER6は、それなりに稼ぐアフィリエイターから大人気のテーマなので、詳しくチェックしておきましょう。

参考：CocoonとAFFINGER6を比較

【比較】なぜCocoonよりAFFINGER6の方が収益化しやすいの？【移行すべき理由】

続きを見る

「収益化するにはCocoonでいいの？」という方は、以下の記事で「僕が有料テーマをオススメする理由」をすべて解説しているので、参考にしてください。

参考：Cocoonで収益化できない理由

【事実】Cocoonで収益化できない本当の理由【解決策あり】

続きを見る