ページ送りボタン／戻りボタン
WordPressテーマ Cocoonで使われている「ページ送りボタン／戻りボタン」のカスタマイズについてまとめてみました。
テーマCocoonのページ送りボタン／戻りボタン
「ページ送りボタン／戻りボタン」とは、エントリー記事数が多くなるとインデックスページが1ページに収まりきらないので複数ページにまたがります。
（※インデックスページに表示するエントリー記事数の設定有り）
その複数ページに対し「ページ送り」または「ページ戻り」を行うためのボタンです。
WordPressテーマ Cocoonで使われている「ページ送りボタン／戻りボタン」は、次の様になっています。
非常にシンプルなものとなっています。
この「ページ送りボタン／戻りボタン」に対して自分好みにカスタマイズしていきます。
ページ送りボタン／戻りボタンのカスタマイズ
今回のカスタマイズ内容は、
- ボタンの枠線を強調する
- ボタンのフォントを強調する
- ボタンにシャドー（影）を付ける
- ボタンを角丸コーナーにする
となります。
カスタマイズ内容
「ページ送りボタン／戻りボタン」のカスタマイズは、下記の通りです。
このカスタマイズ内容を「スタイルシート(style.css)」に追記します。
/************************************
** ■ページ送りボタン／戻りボタンのカスタマイズ
************************************/
.pagination-next,
.pager-prev-next{ /*次のページ*/
border: solid 1px #fe619a; /*枠線*/
border-radius: 6px; /*角丸コーナー*/
transition: all 0.8s ease; /*アニメーション*/
}
.page-numbers{ /*現ページ以外のページ番号*/
background-color: #ffffff; /*背景色*/
border: solid 2px #fe619a; /*枠線*/
border-radius: 6px; /*角丸コーナー*/
font-family: sans-serif; /*フォントゴシック指定*/
font-size: 120%; /*フォントサイズ*/
color: #fe619a; /*文字色*/
font-weight: bold; /*文字強調*/
box-shadow: 3px 3px 2px 0 rgba(0,0,0,0.3); /*シャドー（影）*/
transition: all 0.8s ease; /*アニメーション*/
}
.pagination a.page-numbers: hover { /*現ページ以外のページ番号のホバー時*/
background-color: #fe619a; /*マウスオーバー時の背景色*/
color: #ffffff; /*マウスオーバー時の文字色*/
}
.pagination .current { /*現ページ番号*/
background-color: #ffddee; /*背景色*/
border: solid 2px #fe619a; /*枠線*/
border-radius: 6px; /*角丸コーナー*/
font-family: sans-serif; /*フォントゴシック指定*/
font-size: 120%; /*フォントサイズ*/
color: #fe619a; /*文字色*/
font-weight: bold; /*文字強調*/
box-shadow: 3px 3px 2px 0 rgba(0,0,0,0.3); /*シャドー（影）*/
}
カスタマイズ後のページ送りボタン／戻りボタン
今回のカスタマイズによって「ページ送りボタン／戻りボタン」は、このようなブログのカラースタイルに沿ったデザインとなり、かなり強調される形となりました。
最後に
「ページ送りボタン／戻りボタン」が強調されたことにより、ブログを見に来られた方が他のページを見られる可能性が高まったと思います。
また、「ページ送りボタン／戻りボタン」のデザインもブログと統一感が出来たので、違和感の無い「ページ送りボタン／戻りボタン」に仕上がりました。
コメント