【Elementor】postsウィジェットのページネーションのカスタマイズ方法

そんな疑問を解決する記事を書きました。

ElementorのPostsウィジェットを使っていて、どうしてもページネーション部分のデザインをカスタマイズしたかったので、CSSを使って実現してみました。

今回はその忘備録もかねて、方法を共有したいと思います。

【Elementor】postsウィジェットのページネーションのカスタマイズ方法

ElementorのPostsウィジェットってかなりシンプルで、自由にデザインをカスタマイズできません。

シンプルなサイトならいいのですが、サイトのデザインによってはページネーションのデザインもカスタマイズしたいと思いますよね。

ちなみに、今回こんな感じのデザインにしてみました。

アクティブになっているページネーションは背景色がついています。

簡単なCSSですので、ぜひアレンジして使ってみてください。

使うプラグイン

今回、使うプラグインは次の3つです。

簡単に確認してきます。

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万円稼ぐロードマップを公開しています。

気になる方はチェックしてみてください。