テーマ「Twenty Twelve」にも慣れてきた今日この頃です。

さて、今回は Twenty Twelve で定番プラグイン WP-PageNavi を使う時の css についてです。

WP-PageNavi は定番中の定番プラグインで、ページネーションを表示してくれます。

投稿多めのサイトなどには必ずと言ってよいほど必要です。

そして、Twenty Twelve はレスポンシブなのでスマホにも対応したテーマなのですが、

WP-PageNavi をそのまま使うとスマホでは・・・

Twenty Twelve で WP-PageNavi を使う時のcss 1

ハミ出ました。

これは困ったな、ということで設定をイジくります。

まず、プラグインの設定で

「pagenavi-css.css を使用」のチェックを外します。

Twenty Twelve で WP-PageNavi を使う時のcss 2

つぎにテーマのcssに下記を追加

ちなみに、WP-PageNavi を表示させるには

wppn は WP-PageNavi の全体の配置を調整する為に使ってますが、必要なければ削除して構いません。

↓ こちらが修正後のスクリーンショット

Twenty Twelve で WP-PageNavi を使う時のcss 3

ハミ出ずに折り返して表示してくれました。

スマホでタッチしやすいように間隔もそれなりに確保した方が良いかと思います。