
Elementorのページネーションのデザインをカスタマイズしたい。どうやってCSSを適用させたらいい?
そんな疑問を解決する記事を書きました。
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】postsウィジェットのページネーションのカスタマイズ方法のまとめ
最後にもう一度コードを載せておきます。
/* ページネーション */
.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を適用するときクラス名は何?」ってところだと思うんです。
ですので、このコードをもとにアレンジしてみてください。
また、Elementorを使って月5万円稼ぐロードマップを公開しています。
気になる方はチェックしてみてください。

