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

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

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

あわせて読みたい
ノーコードWeb制作で月5万円稼ぐロードマップ【副業初心者OK】 Web制作で副業を始めたいけどどうしたらいいんだろう?情報がたくさんありあすぎてどうやって始めればいいのか分からない…。Web制作で月5万円稼ぐまでの方法を誰か教え...

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

マーケティングとコードと筋トレが好きです。
都内のITベンチャー企業でデータ分析やABテストをしてバリバリのマーケターとして働きながら、副業でブログやWeb制作メンターをしている24歳です。このブログではビジネスマンのための、副業方法やビジネススキルを発信しています。

詳細なプロフィールはこちらの記事にまとめています
YUTAROUのプロフィール

クリックできる目次
閉じる