WordPress Number My Post Pages(ページネーション)のCSSデザインをカスタマイズする

   

WordPressで1記事を分割して「<前 1 2 3 次>」と表示する方法を以前ご紹介しましたが、そのままだとボタンも小さく味気ないので今回はそのページネーションのCSSデザインを変更する方法を説明していきます。

前回記事↓

WordPress 記事を分割(ページネーション)表示する必要全手順
記事を書いていると、思いの外長くなってしまって重くなってしまう事があります。そんな時は1記事を分割し
Sponsored Link

Number My Post Pages CSSデザイン完成デザイン

Number My Post の設定画面で “Use default stylesheet”で ”Yes”と選択するとデフォルトのページネーションデザインになるのは、前回の説明を簡単にしました。

これがデフォルトデザイン↓

プラグインを入れない時のデザインよりは使い勝手はいいですが、まだボタンが小さいのと、Webサイトによりデザインが合わない場合も出てくるので今回はその辺を修正していきます。

こちらが今回目指すデザインです。最高!とは言いませんが断然良くなりました。それでは説明していきます。

Number My Post Pages CSSデザイン例

Number My Postの設定画面でCSSをデフォルトにするかどうかは、デフォルトCSSをベースに使っていくので基本どちらでも構いません。そのまま”Yes”で使用可能です。

Number My PostデフォルトデザインCSS

プラグインのファイル内に” number-my-post-pages-plugin/numbermypostpages.css”というファイルがありますが、以下がデフォルトデザインのCSSです。

子テーマ編集が分からない場合はこちらも参考

WPカスタマイズは必ず子テーマで!作成方法全手順【図解】
 今回は、エックスサーバーで子テーマの作成手順に付いて説明していきます。 WordPressで子テ

先ほどのファイルを直接いじるも良し、複製して子テーマ内で編集するのでも良し、お好みで。以下がそのままのコードです。

上を使用してお好きに変更でももちろんOKですが、以下が変更したCSSです。

変更した箇所はハイライトを入れた箇所です。

アクティブページとホバーした際にも色を入れ、白字になるようにしました。アンダーラインもホバー時のみ表示にしてます。colorやbackground-colorは各自のサイトデザインに合う色を。

ボタンサイズ変更は28行目の#wp_page_numbers aのpaddingあたり修正すれば変わります。

ボタンの角が丸いのが嫌いな方は37行目のborderradiusを消してください。また角をもっと増やせば丸いボタンにもする事が可能です。

こんな感じ。参考までにこちらは30pxで設定してます。グラデーションとかをいれればリアルなボタンっぽくもなりますね。

直接動作の確認をしてみたい場合はこちら↓の記事を確認ください。

【保存版】Londoner厳選 UKロックおすすめバンド50
イギリスロンドン(一時期はAbbey Road Studio近くにも)に長い間住んでいた音楽バカが選

 

 - Webデザイン, WordPress, プラグイン