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

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-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万円目指したい方はぜひ受講してください!