【注意】このMASAa.netはWordPressテーマ Cocoonを使用しており、THE THORはZMASAa.blogで使用中です。クリックするとZMASAa.blogを開きます。
WordPressCocoon

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

アイキャッチ画像 Cocoon
この記事は約4分で読めます。
スポンサーリンク

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

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】ページ送りボタン/戻りボタンをカスタマイズする

最後に

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

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

MASAa.netをご覧頂きありがとうございます!
もしMASAa.netの記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

……… THE THOR(ザ・トール)購入について ………
下記バナーからTHE THOR(ザ・トール)をご購入の方には、
当掲載のカスタマイズについて優先的にサポートさせて頂きます。

下記バナー経由でTHE THOR(ザ・トール)を購入した日付と時刻
を合わせてお問い合わせフォームからご連絡下さい。



気軽にプレイできるPC向けウェブブラウザ対応ゲーム!
邪神ちゃんドロップキック
精霊幻想記アナザーテイル
空島クロニクル
ラストラグナロク
ビビッドアーミー
城姫クエスト 極
下記バナーからスマホゲームのインストールお願いします!
MU:アークエンジェル
Cave Shooter
イース6オンライン
ザ・アンツ
リネージュ2M
クッキーランキングダム
ドラゴンとガールズ交響曲
魔剣伝説
パズにゃん
ブレイドエクスロード

おすすめWordPressテーマ!
WordPressテーマ WING(AFFINGER6)
WordPressテーマ THE THOR(ザ・トール)
WordPressテーマ Diver

MASAa.net

コメント