今回はPagination【ページ送る/戻る】ボタンのカスタムをしていきたいと思います！
記事数が増えてきたら表示されるページ数も増えてきますよね？そんな時に『サイトの現在地表示を見やすくする』という点と『デザイン』的な視点でカスタムしてみましょう！
サイトを見てくれている方にとって少しでもメリットがある情報かなと思います
カスタムする前には必ずデータのバックアップを取っておくようにしましょうね！
たしかにデザイン的にはしまって見えるやん笑
カスタマイズ手順
とページ番号・に分けて作業をしていきます
Step1:『次のページ』
『次のページ』箇所に関しては.pagination-next-linkと.key-btnの要素にCSSを効かせていきます。
私はCocoonを利用しているので.pagination-next-linkと.key-btnというセレクタに対してプロパティを指定していますがCocoon以外のテーマを利用されている方は念のためディベロッパーモードで.pagination-next-linkと.key-btnに該当するセレクタを確認してくださいね！
.pagination-next-link{
border:none;/*枠線なし---ありの場合はpx等設定します*/
color:#fff;/*文字色*/
transition: .3s;/*状態間の変化時間*/
}
.pagination-next-link:hover{/*以下ホバー時の動き*/
color:#fff;/*文字色*/
background-color:#808080;/*背景色*/
}
.key-btn {
background-color: #333;
border-radius:99px;/*ボーダーの丸み*/
}Step2:『ページ番号』
『ページ番号』に関しては.page-numbersと.pagination・.current・a:hoverの要素にCSSを効かせていきます。
この『ページ番号』に対してのプロパティもテーマによってセレクタが変わると思いますので必ずディベロッパーモードで確認をお願いします。
.page-numbers{/*ページ表示箇所＋*/
border-radius: 10px;
border: 2px;
}
.pagination .current{/*今見ているページ表示を変える*/
background-color: #333;
color:#fff;
}
.pagination a:hover{/*今見ているページ以外のpagenumberのhover時表示を変える*/
color: #fff;
background-color: #333;
}
カスタマイズ用のCSSコードを入力したらまずは『Cocoon Child: スタイルシート (style.css)』でファイルの更新ボタンで入力情報の保存をします。
カスタマイズの確認
ブラウザ別スーパーリロード方法
ブラウザに残っているキャッシュをスルーして、最新ページの情報を読み込む方法です！
【Microsoft Edge】
- 『Ctrl』+『F5』
- 『Shift』+『F5』
- 『Ctrl』+『Shift』+『R』
- 『Ctrl』+『』
- 『Shift』+『』
- 『Shift』+『』
- 『Ctrl』+『R』
- 『Ctrl』+『F5』
- 『Ctrl』+『Shift』+『R』
- 『Shift』+『』
ブラウザ別キャッシュクリアの方法
ブラウザに残っているキャッシュを削除して、Webサイトのサーバーから新しいデータを取り込む方法です
- ブラウザ右上の設定メニュー（・が縦に3つ並んでいるボタン）をクリックして「設定」を選ぶ
- ページ下の方にある「詳細設定」をクリック
- 「プライバシーとセキュリティー」をクリックして、「閲覧履歴データの削除」をクリック
- 「キャッシュされた画像とファイル」にチェックを入れる
- 「データ消去」をクリックする
- 「キャッシュされた画像とファイル」にチェックを入れる
- 「データ消去」をクリックする
- 画面右下の・が3つ並んだアイコンをクリック
- 「設定」をクリック
- 「プライバシー、検索、サービス」をクリック
- 「クリアするデータの選択」を押す
- 「キャッシュされた画像とファイル」にチェックを入れる
- 「今すぐクリア」を押す
さいごに
pagination要素は非常に重要な役割を果たしていますのでぜひ参考にしていただけると嬉しいです。カスタムは自己責任でやりましょうね！
コメント