WordPressテーマ Cocoon
このMASAa.netは、WordPressテーマ Cocoonを使って構築しています。
今回は、WordPressテーマ Cocoonでの「次のページ／ページ送り／戻りボタン」のカスタマイズについてまとめてみました。
WordPressテーマ 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; /*高さ調整*/
}
}
カスタマイズ後の次のページ／ページ送り／戻りボタン
今回のカスタマイズによって、「次のページ／ページ送り／戻りボタン」は次の様になりました。
マウスカーソルを次のページボタンにホバーしたときのスタイルは次の様になりました。
マウスカーソルをページ送り／戻りボタンにホバーしたとのスタイ有るは次の様になりました。
今回のカスタマイズでは、
- 次のページボタンの背景色設定（白）
- 次のページボタンにシャドー（影）設定
- 次のページボタンに上マージン設定
- 次のページに文字間隔設定
- …の表示をボタンと区別化
- スマートフォン／タブレット表示の場合の調整
などについて行いました。
最後に
次のページボタンとページ送り／戻りボタンのスタイルが共通となり、見た目が綺麗になり若干操作性が向上したと思います。
コメント
初めましてふっくんと申します。
ブログを初めて間もない者ですが、こちらのサイトに来て、すごくデザインが綺麗ので参考にさせて頂いてます。
１， カテゴリーの記事なので一瞬ピカッと光るものがあります。
それは真似をしても反映されませんでした。
次のページの123の番号の位置がスマートフォンではずれるのですが、 教えていただくことは可能でしょうか・また次のページのホバーした時の色の位置もかっこから少しずれてしまいます。 またサイドバーのタイトルのアレンジもスマートフォンでは色が反映されませんでした。
それとホームが私の場合固定ページなのですが、アレンジしたページの画面になり、 MASA さんのデザインを参考にさせて頂いてるのですがリンクで飛ばしているカテゴリのところは全部 CSS が反映されているのですが、ホームだけだが、記事が装飾されないのですが、それも併せて教えていただけますでしょうか。
長々と失礼いたしました。
もしよろしければ、 勝手ながら、お返事いただけるとすごく助かります。
初めまして
この度は当サイトをご覧頂きましてありがとうございます。
ご質問の件についてですが、長くなりそうなのと幾つか不明点も有ったので直接メールにてご回答させて頂きました。
メールをご確認頂きますようお願い致します。