そんな疑問を解決する記事を書きました。
ElementorのPostsウィジェットを使っていて、どうしてもページネーション部分のデザインをカスタマイズしたかったので、CSSを使って実現してみました。
今回はその忘備録もかねて、方法を共有したいと思います。
タップできる目次
【Elementor】postsウィジェットのページネーションデザインのカスタマイズ方法
ElementorのPostsウィジェットってかなりシンプルで、自由にデザインをカスタマイズできません。
シンプルなサイトならいいのですが、サイトのデザインによってはページネーションのデザインもカスタマイズしたいと思いますよね。
ちなみに、ぼくは今回こんな感じのデザインにしてみました。
アクティブになっているページネーションは背景色がついています。
簡単なCSSですので、アレンジして使ってみてください！
使うプラグイン
今回、使うプラグインは次の3つです。
- Elementor pro
- Code Snippets
簡単に確認してきます！
Elementor Pro
Elementorの有料版です。
無料版にはPostsウィジェットがありませんので、Elementor Proが必要になります。
Code Snippets
CSSを記述するためのプラグインです。
テーマを編集する必要がないので、いつもこちらのプラグインを使っています。
ページネーションのカスタマイズ方法
では、さっそくページネーションのカスタマイズ方法を見ていきましょう。
Code SnippetsにCSSを適用
Code Snippetsをインストールしたら、Snippets＞All Snippets＞Example CSS snippet ＞Editと進んで、Code Snippetsの編集画面にやってきます。
そして/* write your CSS code here */の下に次のCSSを記述します。
/* ページネーション */
.elementor-pagination .page-numbers {
border: 1px #ddd solid;
margin: 0 2px;
padding: 0;
display: inline-block;
width: 50px;
height: 50px;
line-height: 45px;
}
.elementor-pagination .current {
background: #00A6CE;
}「.elementor-pagination .page-numbers」でElementorのページネーションに四角い枠を追加します。
「.elementor-pagination .current」でアクティブなページネーションに背景色を追加しています。
つまり、「background: #00A6CE;」のカラーコードを変更すれば、好きな色の背景色にカスタマイズ可能です。
文字色などを調整
ページネーションの文字色やコンテンツとの余白は、Elementorの編集機能を使った方が簡単にカスタマイズできるので、微調整をしてください！
ページを更新して確認
最後にページを更新して完了です。
もし、CSSが上手く適用されない場合は、スーパーリロードをしてみましょう。
まとめ
最後にもう一度コードを載せておきます。
/* ページネーション */
.elementor-pagination .page-numbers {
border: 1px #ddd solid;
margin: 0 2px;
padding: 0;
display: inline-block;
width: 50px;
height: 50px;
line-height: 45px;
}
.elementor-pagination .current {
background: #00A6CE;
}たぶん難しいのって「ElementorのページネーションにCSSを適用するときクラス名は何？」ってところだと思うんです。
ですので、このコードをもとにアレンジしてみてください！
また、ぼくの公式LINE限定で未経験から最速でWebスキルを身につける5日間の講座を配信しています。本気で月5万円目指したい方はぜひ受講してください！
Elementorのページネーションのデザインをカスタマイズしたい！どうやってCSSを適用させたらいい？