【Cocoon】ボタンのカスタマイズ　簡単におしゃれなボタンにしよう

トップの記事一覧ページの下部にあるボタン初期状態だとちょっと味気ないですよね。

コピペしておしゃれにカスタマイズしてみましょう。

今回は以下のようにボタンを変更してみます。

123

Cocoonのボタンのデザイン変更するコードはコレ！
Cocoonのボタン「次のページ」も変更してみる
おわり

Cocoonのボタンのデザイン変更するコードはコレ！

以下のCSSをテーマエディターに張り付けてください。

.pagination .current{
	background-color: #20d6a2;/*ボタンの色を変更*/
	
}
.page-numbers{
	background-color: #20d6a2;/*ボタンの色を変更*/
	border-radius: 90px;
	font-weight: bold;
	color: #fff;
	border:none;
	box-shadow:2px 1px #006e54;
}

「background-color: #数字」のところの「数字」に好きなカラーコードを入れると自分の好きな色にできます。

Cocoonのボタン「次のページ」も変更してみる

同じく「外観」>「テーマエディター」へ進みCSSに張り付けてください。

同じく「background-color」の後のカラーコードを変更することでボタンの色の変更が出来ます。

.pagination-next-link{
	background-color: #20d6a2;
	font-weight: bold;
	color: #fff;
	width: 75%;
	margin: 0 auto;
	border-radius: 45px;
	border:none;
	box-shadow:3px 2px #006e54;
}