WordPressCocoon

【WordPress】ページ送りボタン/戻りボタンをカスタマイズする

アイキャッチ画像 Cocoon
スポンサーリンク

ページ送りボタン/戻りボタン

WordPressテーマ Cocoonで使われている「ページ送りボタン/戻りボタン」のカスタマイズについてまとめてみました。

テーマCocoonのページ送りボタン/戻りボタン

「ページ送りボタン/戻りボタン」とは、エントリー記事数が多くなるとインデックスページが1ページに収まりきらないので複数ページにまたがります。

(※インデックスページに表示するエントリー記事数の設定有り)

その複数ページに対し「ページ送り」または「ページ戻り」を行うためのボタンです。

WordPressテーマ Cocoonで使われている「ページ送りボタン/戻りボタン」は、次の様になっています。

【WordPress】ページ送りボタン/戻りボタンをカスタマイズする

非常にシンプルなものとなっています。

この「ページ送りボタン/戻りボタン」に対して自分好みにカスタマイズしていきます。

ページ送りボタン/戻りボタンのカスタマイズ

今回のカスタマイズ内容は、

  • ボタンの枠線を強調する
  • ボタンのフォントを強調する
  • ボタンにシャドー(影)を付ける
  • ボタンを角丸コーナーにする

となります。

カスタマイズ内容

「ページ送りボタン/戻りボタン」のカスタマイズは、下記の通りです。

このカスタマイズ内容を「スタイルシート(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); /*シャドー(影)*/
}

カスタマイズ後のページ送りボタン/戻りボタン

今回のカスタマイズによって「ページ送りボタン/戻りボタン」は、このようなブログのカラースタイルに沿ったデザインとなり、かなり強調される形となりました。

【WordPress】ページ送りボタン/戻りボタンをカスタマイズする

最後に

「ページ送りボタン/戻りボタン」が強調されたことにより、ブログを見に来られた方が他のページを見られる可能性が高まったと思います。

また、「ページ送りボタン/戻りボタン」のデザインもブログと統一感が出来たので、違和感の無い「ページ送りボタン/戻りボタン」に仕上がりました。

コメント