WordPressテーマ【Cocoon】カスタマイズ！ページネーションと「次のページ」ボタン

2021.08.12

こんにちは。おまめです。

このブログはワードプレステーマCocoonで書いています。

とっても使いやすくて気に入っています♪

 

が、ちょっと見た目を変更したいところがあったので今日CSSをいじっていました。

それがページネーション。これがデフォルトです。↓

実際にはこんな感じに変更しました↓

ホバー時はこんな感じになります。押せる感じです。↓

 

前提のスキン：[Child]スキンテンプレート

Cocoonは色々なスキンが選べる中で、私はわいひらさんが作った[Child]スキンテンプレートを使っています。（シンプルだしカスタマイズしやすそうなので好きです。）

今回のCSSは全て追加CSSに書いています。

 

補足：追加CSSの開き方

追加CSSってどこにあるのという方に。

WordPress管理画面の「サイトをカスタマイズ」＞＞追加CSS＞＞追加CSS記入箇所にCSSを記入します。

 

実際に書いた追加CSSのコード

実際に書いた追加CSSのコードです。

もともとボタンのクラスに「pagination-next-link」、ページネーションに「pagination」「current」「page-numbers」がついているのでそれを変更します。

コピペして使ってもOK。

  1. /* 「次のページ」ボタン */
  2. .pagination-next-link{
  3.     background-color:#fff;
  4.     border: 2px solid #4D4644;
  5.     color: #4D4644;
  6.     display: block;
  7.     font-size: 1.2em;
  8.     text-decoration: none;
  9.     width: calc(100% – 8px);
  10.     height:60px;
  11.     text-align: center;
  12.     padding: 10px;
  13.     display: block;
  14.     position:relative;
  15.     transition-duration:0.2s;
  16. }
  18. /* ボタンホバー時 */
  19. .pagination-next-link:hover{
  20.     transform:translate(8px,8px);
  21.     background-color:#E9C46A;
  22.     transition-duration:0.2s;
  23. }
  25. /* ボタンの影のライン */
  26. .pagination-next-link::after{
  27.     display:block;
  28.     position:absolute;
  29.     content:””;
  30.     border-right: 2px solid #4D4644;
  31.     border-bottom: 2px solid #4D4644;
  32.     right: -8px;
  33.     bottom:-8px;
  34.     width:100%;
  35.     height:58px;
  36.     opacity:1;
  37.     transition-duration:0.2s;
  38. }
  40. /* ボタンの影のラインホバー時 */
  41. .pagination-next-link:hover::after{
  42.     transform:translate(-6px,-6px);
  43.     transition-duration:0.2s;
  44.     opacity:0;
  45. }
  47. /* ページネーション現在のページの表示 */
  48. .pagination .current {
  49.     background-color: #4D4644;
  50.     color:#fff;
  51. }
  53. /* ページネーション現在のページ以外の表示 */
  54. .page-numbers {
  55.     color: #333;
  56.     text-decoration: none;
  57.     display: inline-block;
  58.     height: 46px;
  59.     width: 46px;
  60.     border: 2px solid #4D4644;
  61.     margin: 0 4px;
  62.     line-height: 43px;/* 数字の表示を真ん中に持ってくるために微調整しました。 */
  63.     text-align: center;
  64.     border-radius: 0;
  65. }
  67. /* ページネーションホバーを離して元に戻る時間を指定 */
  68. .pagination a{
  69.    transition-duration:0.2s;
  70. }
  72. /* ページネーションホバー時 */
  73. .pagination a:hover{
  74.    background-color:#E9C46A;
  75.    transition-duration:0.2s;
  76.    color:#4D4644;
  77. }

 

それぞれのコードを見ていきます。

大きい「次のページ」ボタン部分

  1. /* 「次のページ」ボタン */
  2. .pagination-next-link{
  3.     background-color:#fff;
  4.     border: 2px solid #4D4644;
  5.     color: #4D4644;
  6.     display: block;
  7.     font-size: 1.2em;
  8.     text-decoration: none;
  9.     width: calc(100% – 8px);
  10.     height:60px;
  11.     text-align: center;
  12.     padding: 10px;
  13.     display: block;
  14.     position:relative;
  15.     transition-duration:0.2s;
  16. }
  18. /* ボタンホバー時 */
  19. .pagination-next-link:hover{
  20.     transform:translate(8px,8px);
  21.     background-color:#E9C46A;
  22.     transition-duration:0.2s;
  23. }
  25. /* ボタンの影のライン */
  26. .pagination-next-link::after{
  27.     display:block;
  28.     position:absolute;
  29.     content:””;
  30.     border-right: 2px solid #4D4644;
  31.     border-bottom: 2px solid #4D4644;
  32.     right: -8px;
  33.     bottom:-8px;
  34.     width:100%;
  35.     height:58px;
  36.     opacity:1;
  37.     transition-duration:0.2s;
  38. }
  40. /* ボタンの影のラインホバー時 */
  41. .pagination-next-link:hover::after{
  42.     transform:translate(-6px,-6px);
  43.     transition-duration:0.2s;
  44.     opacity:0;
  45. }

 

ボタンのポイント

  • ボタンの右と下にラインがある（影部分がラインになっている）デザインなので、ボタン幅が100%だと後ろのラインが見えないのでcalc()を使って100%-8pxの大きさにする。
  • 右と下のラインを::afterで作る。
  • ボタン自体をposition:relativeにして::afterをposition:absoluteにする。

ボタンホバー時のポイント

  • ボタン自体にtransform:transrate(8px,8px)を付けてボタンを押す動きを実装する。
  • 影ラインは何も書かないとボタンと一緒に右下に動くので、transform:translate(-6px,-6px)で逆に動く動きを付ける。また、押し終わった時にはなくなって欲しいのでopacity:0を記述。
  • transition-duration:0.2sを付けて動きの時間を0.2秒に設定。
おまめ
おまめ

※ボタンのホバーをはずした時も0.2秒で戻って欲しいので、:hoverのところだけでなく、元々の要素にもtransition-duration:0.2sをつけてあります。

 

ページネーションとカレント（現在ページを示す）処理

  1. /* ページネーション現在のページの表示 */
  2. .pagination .current {
  3.     background-color: #4D4644;
  4.     color:#fff;
  5. }
  7. /* ページネーション現在のページ以外の表示 */
  8. .page-numbers {
  9.     color: #333;
  10.     text-decoration: none;
  11.     display: inline-block;
  12.     height: 46px;
  13.     width: 46px;
  14.     border: 2px solid #4D4644;
  15.     margin: 0 4px;
  16.     line-height: 43px;/* 数字の表示を真ん中に持ってくるために微調整しました。 */
  17.     text-align: center;
  18.     border-radius: 0;
  19. }
  21. /* ページネーションホバーを離して元に戻る時間を指定 */
  22. .pagination a{
  23.    transition-duration:0.2s;
  24. }
  26. /* ページネーションホバー時 */
  27. .pagination a:hover{
  28.    background-color:#E9C46A;
  29.    transition-duration:0.2s;
  30.    color:#4D4644;
  31. }

 

ページネーションのポイント

  • 現在のページは背景を黒&テキストを白に。
  • 現在のページ以外はホバーしたら黄色に変化

 

こんな感じで実装しました。

実際の動きはトップページの下へ行くと確認できますよ！

 

以上、コード解説でした。

 

おまめ
おまめ

ちょこちょここれからもサイトをいじっていくと思います～

楽しい♪

 

 

コメント

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