WordPressプラグイン WP Pagenaviで見栄えを調整する

WP Pagenavi はCSSファイルを持っているのでそのCSSファイルを調整すると

番号付きのナビゲーションの見た目を調整出来ます

プラグインのCSSファイルを開きます

中身はこのようになっています

.wp-pagenavi {
    clear: both;
}

.wp-pagenavi a, .wp-pagenavi span {
    text-decoration: none;
    border: 1px solid #BFBFBF;
    padding: 3px 5px;
    margin: 2px;
}

.wp-pagenavi a:hover, .wp-pagenavi span.current {
    border-color: #000;
}

.wp-pagenavi span.current {
    font-weight: bold;
}

この中で.wp-pagenavi a, .wp-pagenavi spanの中身を調整すれば
番号付きのリンクの大きさ等を調整する事が出来ます

ちなみにこのサイトにも使用しています
このように調整しました

.wp-pagenavi {
    clear: both;
}

.wp-pagenavi a, .wp-pagenavi span {
    text-decoration: none;
    border: 1px solid #BFBFBF;
    padding: 3px 10px;
    margin: 2px;
    color: green;
}

.wp-pagenavi a:hover, .wp-pagenavi span.current {
    border-color: green;
}

.wp-pagenavi span.current {
    font-weight: bold;
}

paddingで横幅を広げて、ページナビゲーションの番号付きのものを正方形に近づけました
あとは、サイトメインカラーに合わせて、一部の色をgreenに変更しました

背景の指定などもすればグラデーションを使ったボタン風なども出来ます

さらに自作テーマを使っているので、このCSSを自作テーマの方に移して
プラグインの管理画面からCSSの指定を外しました