WordPressCocoon

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

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

WordPressテーマ Cocoon

このMASAa.netは、WordPressテーマ Cocoonを使って構築しています。

MASAa.net | WordPressのカスタマイズとPCのある生活を楽しむ情報発信サイト
このMASAa.netは、WordPressテーマのカスタマイズ、自作PC、ソフトウェア、ハードウェア、Windows、パソコンなどのあらゆるPC関連に関する情報を掲載しています。

今回は、WordPressテーマ Cocoonでの「次のページ/ページ送り/戻りボタン」のカスタマイズについてまとめてみました。

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

以前にもWordPressテーマ Cocoonでの「次のページ/ページ送り/戻りボタン」についてはカスタマイズを行ってきました。

【Cocoon】ページ送りボタン/戻りボタンをカスタマイズする
WordPressテーマ Cocoonの「ページ送りボタン/戻りボタン」のカスタマイズについてまとめてみました。カスタマイズの内容は「ページ送りボタン/戻りボタン」の強調やシャドー(影)、角丸コーナーに変更してみました。

現在の「次のページ/ページ送り/戻りボタン」のスタイルは下記の通りとなっており、このスタイルのカスタマイズはエントリー記事として掲載していません。

特に問題の無い「次のページ/ページ送り/戻りボタン」なのですが、もう少し存在感のあるスタイルにするカスタマズを行ってみたいと思います。

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

WordPressテーマ Cocoonでの「次のページ/ページ送り/戻りボタン」のカスタマイズを行います。

カスタマイズ内容

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

「スタイルシート(style.css)」を開き、下記のカスタマイズ内容を以前カスタマイズを行った「次のページボタンカスタマイズ」「ページ送りボタン/戻りボタンのカスタマイズ」に上書きします。

以前「次のページ/ページ送り/戻りボタン」に関するカスタマイズを行っていない場合には、「スタイルシート(style.css)」を開き、今回のカスタマイズ内容を追記します。

/************************************
** ●次のページボタンカスタマイズ
************************************/
.pagination-next,
.pager-prev-next { /*次のページ*/
  margin-top: 38px; /*上マージン*/
  border: solid 2px #fe619a; /*枠線*/
  border-radius: 6px; /*角丸コーナー*/
  background-color: #fff;
  box-shadow: 3px 3px 2px 0 rgba(0,0,0,0.3); /*シャドー(影)*/
}
.pagination-next-link { /*次のページ*/
  font-size: 20px; /*フォントサイズ*/
  letter-spacing: 10px; /*文字間隔*/
  font-weight: bold; /*文字強調*/
  color: #f32469; /*フォントカラー*/
  padding: 6px; /*余白*/
  transition: all 0.6s ease; /*アニメーション*/
  border: none;
}
.pagination-next-link:hover {
  color: #fff; /*フォントカラー*/
  background-color: #fe619a; /*背景色*/
  transition: all 0.6s ease; /*アニメーション*/
}

/************************************
** ●ページ送りボタン/戻りボタンのカスタマイズ
************************************/
.page-numbers { /*現ページ以外のページ番号*/
  background-color: #fff; /*背景色*/
  border: solid 2px #fe619a; /*枠線*/
  border-radius: 24px; /*角丸コーナー*/
  font-family: sans-serif; /*フォントゴシック指定*/
  font-size: 16px; /*フォントサイズ*/
  font-style: oblique; /*斜体フォント*/
  color: #fe619a; /*文字色*/
  font-weight: bold; /*文字強調*/
  box-shadow: 3px 3px 2px 0 rgba(0,0,0,0.3); /*シャドー(影)*/
  transition: all 0.6s ease; /*アニメーション*/
  font-family: Lato,"ヒラギノ角ゴシック Pro","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Arial,sans-serif;
}
  @media screen and (max-width: 1030px) { /*スマホ表示設定*/
  .page-numbers {
    font-size: 18px; /*フォントサイズ*/
    line-height: 44px; /*高さ調整*/
  }
}
.pagination a.page-numbers:hover { /*現ページ以外のページ番号のホバー時*/
  background-color: #fe619a!important; /*マウスオーバー時の背景色*/
  color: #fff!important; /*マウスオーバー時の文字色*/
  transition: all 0.6s ease; /*アニメーション*/
}
.pagination .current { /*現ページ番号*/
  background-color: #fe619a; /*背景色ffddee*/
  border: solid 2px #fe619a; /*枠線fe619a*/
  border-radius: 24px; /*角丸コーナー*/
  font-family: sans-serif; /*フォントゴシック指定*/
  font-size: 16px; /*フォントサイズ*/
  font-style: oblique; /*斜体フォント*/
  color: #fff; /*文字色*/
  font-weight: bold; /*文字強調*/
  box-shadow: 3px 3px 2px 0 rgba(0,0,0,0.3); /*シャドー(影)*/
  font-family: Lato,"ヒラギノ角ゴシック Pro","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Arial,sans-serif;
}
.page-numbers.dots { /*ページ番号ドット*/
  background-color: transparent; /*背景*/
  border: none; /*枠線*/
  color: #f32469; /*文字色*/
  font-size: 28px; /*フォントサイズ*/
  font-weight: 900; /*文字強調*/
  font-style: normal; /*通常フォント*/
  box-shadow: none; /*シャドー(影)無し*/
  opacity: 1.0; /*不透明度無し*/
}
  @media screen and (max-width: 1030px) { /*スマホ表示設定*/
  .page-numbers.dots {
    line-height: 36px; /*高さ調整*/
  }
}

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

今回のカスタマイズによって、「次のページ/ページ送り/戻りボタン」は次の様になりました。

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

マウスカーソルを次のページボタンにホバーしたときのスタイルは次の様になりました。

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

マウスカーソルをページ送り/戻りボタンにホバーしたとのスタイ有るは次の様になりました。

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

今回のカスタマイズでは、

  • 次のページボタンの背景色設定(白)
  • 次のページボタンにシャドー(影)設定
  • 次のページボタンに上マージン設定
  • 次のページに文字間隔設定
  • …の表示をボタンと区別化
  • スマートフォン/タブレット表示の場合の調整

などについて行いました。

最後に

次のページボタンとページ送り/戻りボタンのスタイルが共通となり、見た目が綺麗になり若干操作性が向上したと思います。

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

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

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



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

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

MASAa.net

コメント

  1. フックン より:

    初めましてふっくんと申します。
    ブログを初めて間もない者ですが、こちらのサイトに来て、すごくデザインが綺麗ので参考にさせて頂いてます。
    1, カテゴリーの記事なので一瞬ピカッと光るものがあります。
    それは真似をしても反映されませんでした。
    次のページの123の番号の位置がスマートフォンではずれるのですが、 教えていただくことは可能でしょうか・また次のページのホバーした時の色の位置もかっこから少しずれてしまいます。 またサイドバーのタイトルのアレンジもスマートフォンでは色が反映されませんでした。
    それとホームが私の場合固定ページなのですが、アレンジしたページの画面になり、 MASA さんのデザインを参考にさせて頂いてるのですがリンクで飛ばしているカテゴリのところは全部 CSS が反映されているのですが、ホームだけだが、記事が装飾されないのですが、それも併せて教えていただけますでしょうか。
    長々と失礼いたしました。
    もしよろしければ、 勝手ながら、お返事いただけるとすごく助かります。

    • masaa masaa より:

      初めまして
      この度は当サイトをご覧頂きましてありがとうございます。
      ご質問の件についてですが、長くなりそうなのと幾つか不明点も有ったので直接メールにてご回答させて頂きました。
      メールをご確認頂きますようお願い致します。