【プチカスタマイズ】人気WordPressテーマ「Diver」のページネーションの形を変える方法

「ページネーション」とは画面下にある、2ページ目や３ページ目へ移動するためのこれらのボタンのことです。

Diverには下の写真のように少し角が丸くなったボタンがデフォルトで設定されていますね。

今回はこのボタンの形を変更するためのプチカスタマイズです。

ページネーションを真四角に変更

Diverは他の人気テーマ「SANGO」や「JIN」に比べて、シャキッとしたテーマなので、丸みをとって、真四角に変更してみました。

コードは次のようになります。

/*現在のページ*/
.pagination .current{
    border-radius:0;
}

/*その他のページ*/
a.page-numbers{
    border-radius:0;
}

カスタマイズ適用手順

まず、下のようなテーマのカスタマイズ画面を開いてください。

画面を開いたら、メニューの中から「追加CSS」をクリックしてください。

追加CSSを開いたら、先ほどのコードを貼り付けて「公開」ボタンをクリックします。

以上で作業は完了です。

実際に画面を確認してページネーションのボタンの形が変わっていることを確認しましょう。

他の形に変えたい場合は

先ほどのコードの「border-radius:0;」の数字の0を「10px」や「50%」のように数字を変えて上げることで、自由にボタンの形を変更することが可能です。

気になる方は色々試してみてください。

最後に

今回は、「Diver」でページネーションの形を変更するカスタマイズ方法について紹介しました。

ページネーションのデザインを変更したい方は、参考にしてみてください。

また、他にも「Diverでこんなカスタマイズしたいんだけど、どうやったらできるの？」といった質問があれば、コメント欄に是非コメントしてください。

できそうな内容でしたら、まずは自分のサイトで試しにカスタマイズを行い、その方法を別途公開します。