Cocoonの使い方やカスタマイズとオリジナルスキン

Cocoonの記事一覧下ページ送り(ページネーション)をカスタマイズ

スポンサーリンク
カスタマイズ

Cocoonの記事一覧ページでページの下に出るページ送りボタン(ページネーション)のデザインがあっさりしているので、少しカスタマイズしてみます。

スポンサーリンク

カスタマイズサンプル

Before

初期デザインは、キーカラーで指定した色で1pxの四角い枠になっていて、カーソルが載った際も変わりはありません

 

Cocoonページネーション

 

※キーカラーの設定は以下です。

Cocoon設定全体タブ

キーカラーの設定

After

  • 「次ページ」の枠に背景色を付け、文字を太字に
  • ページネーション(1.2.>)を丸枠に
  • カーソルが載った際は色を変える

表示

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

カーソルON時

次ページは初期値が背景色あり、カーソルONで白抜き

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

ページネーションはカーソルONで背景色

 

カスタマイズ方法

簡単なCSS追記のみです。

CSS追記は以下のいずれかから行って下さい。

外観→カスタマイズ追加CSS

外観→テーマエディターstyle.css

 

「次ページ」ボタンデザイン

以下のCSSを追記します。

.pagination-next-link{
background: #839b5c; /*背景色*/
color:#fff; /*文字色*/
font-weight: bold; /*太字*/
}
.pagination-next-link a:hover{ /*オンマウス時*/
background: #fff;
color:#839b5c;
}

 

ボタンの角を丸める場合

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

.pagination-next-link{border-radius: 8px;}

 

ページネーションデザイン

以下のCSSを追記します。

.page-numbers{
border-radius: 50%; /*角丸*/
color:#839b5c; /*文字色*/
font-weight: bold; /*太字*/
}
.pagination a:hover { /*オンマウス時*/
background: #839b5c;
color:#fff;
}

 

カラーの変更

お好きなカラー設定には以下もご利用下さい。

マカロンビビッドパステル伝統色和色セーフ色名

 

ページネーション用CSS初期設定は

ちなみにCocoonのスタイルシート内で記述されているページネーション用のデザインは以下のようになっています。

/*ページネーション*/
.key-btn {
	border:0;
	border-radius:4px;
	background-color: #FF847C;
	color:#fff;
}
.key-btn:hover {
	background-color: #ffeeed;
	color:#999;
}
.page-numbers {
	color: #333435;
	background-color: #fff;
	text-decoration: none;
	display: inline-block;
	height: 40px;
	width: 40px;
	border: 2px solid #cccdce;
	margin-left: 3px;
 	line-height: 37px;
	text-align: center;
	border-radius: 6px;
}
.pagination .current {
	background-color: #fff;
	border: 2px solid #eb6988;
}

 

コメント

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