cocoonの記事一覧で表示されるページ送り（ページネーション）をカスタマイズだ！

2021.04.04
Web/blog
cocoonカスタマイズ

今回は、cocoonの記事一覧にあるページ送りボタン（ページネーション）のカスタマイズです。

初期のページ送りボタンはシンプルな表示となっているので、いくつかデザインを作ってみました。cocoonのテーマを使用している場合はCSSをそのままコピペして使うことができるので、色や大きさなどは好きなように変更してください。

 

初期のデザイン

デフォルト画像

カスタマイズはスタイルシートにCSSを追加していきます。

 

カスタマイズ方法

    • ダッシュボード→外観→カスタマイズ→追加CSS
    • ダッシュボード→外観→テーマエディター→スタイルシート（style.css）に追加

どちらでもCSSの追加をすることが出来ますが、追加CSSの方が動作を確認しながらカスタマイズすることができるので簡単です。

 

スポンサーリンク

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

 

背景色や文字色を変える

ページネーションの背景色や文字色を変える

ボタンの色（背景色）や文字色を変えただけのものです。
.pagination-next-linkのカラーコードを変更すると『次のページ』ボタンの背景色や文字色を変えることが出来ます。
.page-numbers のカラーコードを変えるとボタンの色が変わります。
.pagination .currentは現在選択しているページです。


/*ページネーション*/ 
.pagination-next-link{
background-color:#442727;
color:#eae7d9;
}
.pagination-next-link:hover { 
background-color:#d2c6b2;
color:#442727;
}
.page-numbers { 
background-color:#442727;
color:#eae7d9;
} 
.pagination .current { 
background-color:#d2c6b2;
color:#442727;
} 
.pagination a:hover { 
background-color:#d2c6b2;
color:#442727;
}

 

二重にする

 

borderで二重枠を付け足しました。
ホバー時は背景色が白に変わります。


/*ページネーション*/
.pagination-next-link{ background-color: #79a3b1; 
color: #fff; 
border: double 6px #fff;
} 
.pagination-next-link:hover{ 
background-color: #fff; 
color: #79a3b1; 
border: double 6px #79a3b1;
}
.page-numbers { 
background-color: #79a3b1; 
color: #fff; 
border: double 6px #fff;
}
.pagination .current { 
background-color: #fff; color: #79a3b1;
border: double 6px #79a3b1;
} 
.pagination a:hover { background-color: #fff; color: #79a3b1;
border: double 6px #79a3b1; }

 

ページ送りの数字を丸くする

ボタンなどの角を丸くしました。
少し可愛らしい印象になります。

/*ページネーション*/
 .pagination-next-link { 
border: 1px solid #79a3b1;
border-radius: 30px;
background-color: #fff; 
color: #79a3b1; 
}
 .pagination-next-link:hover {
 background-color: #79a3b1; 
color: #fcf8ec; 
}
 .page-numbers { 
border-radius: 50%; 
border: 1px solid #79a3b1; 
color: #79a3b1; 
} 
.pagination .current { 
background-color: #79a3b1; 
color: #fff; 
} 
.pagination a:hover { 
background-color: #79a3b1; 
color: #fff;  
}

 

破線の枠を付ける

破線の枠を付けてます。
ホバー時は白の背景色に枠が付きます。


/*ページネーション*/ 
.pagination-next-link { 
border: dashed 1px #fff; 
border-radius: 10px; 
background-color: #79a3b1; 
color: #fff; 
box-shadow: 0px 0px 0px 3px #79a3b1;
} 
.pagination-next-link:hover { 
background-color: #fff; 
color: #79a3b1; 
}
.page-numbers { 
 border: dashed 1px white; 
border-radius: 50%; 
background-color:#79a3b1;
color: #fff; 
box-shadow: 0px 0px 0px 3px #79a3b1;
} 
.pagination .current { 
background-color: #fff; 
color: #79a3b1; 
} 
.pagination a:hover { 
background-color: #fff; 
color: #79a3b1; 
>

 

影を付ける

box-shadowで影を付けてます。


/*ページネーション*/
.pagination-next-link{
box-shadow: 0px 10px 14px -7px #276873;
background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
background-color:#599bb3;
border-radius:8px;
color:#fff;
text-shadow:0px 1px 0px #599bb3;
}
.pagination-next-link:hover { background:linear-gradient(to bottom, #5da8b3 5%, #edfaff 100%);
background-color:#5da8b3;}
.page-numbers { 
box-shadow: 0px 10px 14px -7px #276873;
background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
background-color:#599bb3;
color:#fff;
font-weight:bold;
text-shadow:0px 1px 0px #3d768a;
border-radius:50%;
} 
.pagination .current { 
background:linear-gradient(to bottom, #5da8b3 5%, #edfaff 100%);
background-color:#5da8b3;
} 
.pagination a:hover { 
background:linear-gradient(to bottom, #5da8b3 5%, #edfaff 100%);
background-color:#5da8b3;}

 

影&グラデーション

グラデーションで背景色をぼんやりさせてます。


/*ページネーション*/
.pagination-next-link { 
box-shadow: 3px 4px 0px 0px #1564ad;
border-radius:5px;
border:1px solid #619bd4;
background:linear-gradient(to bottom, #dbecfc 5%, #61a9f2 100%);
background-color:#dbecfc;
color:#fff;
font-weight:bold;
text-shadow:0px 1px 0px #528ecc;
} 
.pagination-next-link:hover { 
background:linear-gradient(to bottom, #61a9f2 5%, #dbecfc 100%);
background-color:#61a9f2; 
}
.page-numbers { 
box-shadow: 3px 4px 0px 0px #1564ad;
border-radius:5px;
border:1px solid #619bd4;
background:linear-gradient(to bottom, #dbecfc 5%, #61a9f2 100%);
background-color:#dbecfc;
color:#fff;
font-size:17px;
font-weight:bold;
text-shadow:0px 1px 0px #528ecc;
border-radius:50%;
} 
.pagination .current { 
background:linear-gradient(to bottom, #61a9f2 5%, #dbecfc 100%);
background-color:#61a9f2;
} 
.pagination a:hover { 
background:linear-gradient(to bottom, #61a9f2 5%, #dbecfc 100%);
background-color:#61a9f2; 
}

 

 

太めの下線

太めの下線

下線に太い線を置いてみました。
シンプルですが、ページ数が増えれば見た目のボリュームも出るはずです。（全部か）


/*ページネーション*/
.pagination-next-link{
border:none;
background: linear-gradient(transparent 70%, #d2c6b2 70%);
color:#442727;
}
.pagination-next-link:hover { 
background-color:#d2c6b2;
color:#442727;
}
.page-numbers { 
background-color:#442727;
color:#eae7d9;
} 
.pagination .current { 
background-color:#d2c6b2;
color:#442727;
} 
.pagination a:hover { 
background-color:#d2c6b2;
color:#442727;
}

 

 

幅を短く

短い幅

『次のページ』は全体幅で表示されるので幅を短くしてみました。
width:40%;で幅の長さを調整することができます。


/*ページネーション*/
.pagination-next-link{
position: relative;
width:40%;
background-color:#442727;
color:#d2c6b2;
top: 0;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}
.pagination-next-link:hover { 
background-color:#d2c6b2;
color:#442727;
} 
.page-numbers { 
background-color:#442727;
color:#eae7d9;
} 
.pagination .current { 
background-color:#d2c6b2;
color:#442727;
} 
.pagination a:hover { 
background-color:#d2c6b2;
color:#442727;
}

 

 

次のページの文字を消して番号だけにする

.pagination-next-link{display:none;}

で、『次のページ』のリンクを非表示にします。

ページナンバーに背景色や文字色

ページナンバーの背景色と文字色を変更しただけの簡単なものですが、シンプルで見やすくなりました。


/*ページネーション*/
.pagination-next-link{
display:none;
}
.page-numbers { 
background-color:#442727;
color:#eae7d9;
} 
.pagination .current { 
background-color:#d2c6b2;
color:#442727;
} 
.pagination a:hover { 
background-color:#d2c6b2;
color:#442727;
}

 

 

現ページと選択時の背景にドット

ホバー時の背景にドットを入れてみましたが、
見にくいですね(笑)


/*ページネーション*/
.pagination-next-link{
display:none;
}
.page-numbers {
background-color:#442727;
color:#eae7d9;
}
.pagination .current{
background-color : #ffffff;
background-image : radial-gradient(#cccccc 17%, transparent 19%),radial-gradient(#cccccc 17%, transparent 19%);
background-position: 0 0, 5px 5px;
background-size : 10px 10px;
color:#442727;
}
.page-numbers {
background-color:#d2c6b2;
color:#442727;
}
.pagination a:hover {
background-color : #ffffff;
background-image : radial-gradient(#cccccc 17%, transparent 19%),radial-gradient(#cccccc 17%, transparent 19%);
background-position: 0 0, 5px 5px;
background-size : 10px 10px;
color:#442727;
}

 

ホバー時に点線

丸に点線

丸くしました。ホバーしたときに点線が浮かびます。


/*ページネーション*/
.pagination-next-link{
display:none;
}
.page-numbers {
border-radius:50%;
background-color:#d2c6b2;
color:#442727;
}
.pagination .current{
border: dotted 2px #d2c6b2;
border-radius:50%;
background-color:#fff;
color:#442727;
}
.pagination a:hover {
border: dotted 2px #d2c6b2;
background-color:#fff;
color:#442727;
}

 

 

 

さいごにひとこと

余白や文字の大きさなどはデフォルトのままでちょうど良さそうなので変更しておりません。

今回はページネーションのカスタマイズをいくつか作ってみました。が、、
似たりよったりな感じになってしまったので随時バリエーションを増やして更新していきたいと思います(^^;

 

スポンサーリンク
タイトルとURLをコピーしました