レスポンシブデザインに対応させる為

Twenty Twelveテーマにレスポンシブデザインに対応していたんでしたよね。

そんな訳で、iPhoneから当ページをPCサイト表示で見てみると、WP-PageNavi Plugin部分が枠からはみ出ているではありませんか(笑)

そんな訳で、ザクザクっとやった事のメモ書きですよ。

今使用しているCSSは、WP PageNavi Styleで、お手軽選択しているテーマなので、あまりプラグイン本体を修正したくありませんが、1行追加するだけで対応できるので、簡単にやってみました。

使用しているテーマは、CSS3 BLACK GLOSSYで、3行追加しただけです。

変更前:

.wp-pagenavi { padding: 10px 20px 10px !important; display:block !important; clear:both !important; } .wp-pagenavi a ,.wp-pagenavi span.pages, .wp-pagenavi span.extend { color:#333333 !important; text-shadow:0px 1px #F6F6F6 !important; padding:6px 9px 6px 9px !important; border:solid 1px #B6B6B6 !important; box-shadow:0px 1px #EFEFEF !important; -moz-box-shadow:0px 1px #EFEFEF !important; -webkit-box-shadow:0px 1px #EFEFEF !important; background:#E6E6E6 !important; background:-moz-linear-gradient(top,#FFFFFF 1px,#F3F3F3 1px,#E6E6E6) !important; background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FFFFFF),color-stop(0.02,#F3F3F3),color-stop(1,#E6E6E6)) !important; font-size:12px !important; margin-right:3px !important; text-decoration:none !important; } .wp-pagenavi a:hover { color:#fff !important; text-shadow:0px 1px #3C3C3C !important; border-color:#202020 !important; background:#525252 !important; background:-moz-linear-gradient(top,#9F9F9F 1px,#6C6C6C 1px,#525252) !important; background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#9F9F9F),color-stop(0.02,#6C6C6C),color-stop(1,#525252)) !important; color:#FFFFFF !important; box-shadow:0px 1px #E7E7E7 !important; -moz-box-shadow:0px 1px #E7E7E7 !important; -webkit-box-shadow:0px 1px #E7E7E7 !important; } .wp-pagenavi span.current{ padding:6px 9px 6px 9px !important; border:solid 1px #DCDCDC !important; color:#fff !important; box-shadow:0px 1px #E7E7E7 !important; -moz-box-shadow:0px 1px #E7E7E7 !important; -webkit-box-shadow:0px 1px #E7E7E7 !important; margin-right:3px !important; text-shadow:0px 1px #3C3C3C !important; border-color:#202020 !important; background:#525252 !important; background:-moz-linear-gradient(top,#9F9F9F 1px,#6C6C6C 1px,#525252) !important; background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#9F9F9F),color-stop(0.02,#6C6C6C),color-stop(1,#525252)) !important; } 

 変更後:

.wp-pagenavi { padding: 10px 20px 10px !important; display:block !important; clear:both !important; } .wp-pagenavi a ,.wp-pagenavi span.pages, .wp-pagenavi span.extend { display: inline-block; color:#333333 !important; text-shadow:0px 1px #F6F6F6 !important; padding:6px 9px 6px 9px !important; border:solid 1px #B6B6B6 !important; box-shadow:0px 1px #EFEFEF !important; -moz-box-shadow:0px 1px #EFEFEF !important; -webkit-box-shadow:0px 1px #EFEFEF !important; background:#E6E6E6 !important; background:-moz-linear-gradient(top,#FFFFFF 1px,#F3F3F3 1px,#E6E6E6) !important; background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FFFFFF),color-stop(0.02,#F3F3F3),color-stop(1,#E6E6E6)) !important; font-size:12px !important; margin-right:3px !important; text-decoration:none !important; } .wp-pagenavi a:hover { display: inline-block; color:#fff !important; text-shadow:0px 1px #3C3C3C !important; border-color:#202020 !important; background:#525252 !important; background:-moz-linear-gradient(top,#9F9F9F 1px,#6C6C6C 1px,#525252) !important; background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#9F9F9F),color-stop(0.02,#6C6C6C),color-stop(1,#525252)) !important; color:#FFFFFF !important; box-shadow:0px 1px #E7E7E7 !important; -moz-box-shadow:0px 1px #E7E7E7 !important; -webkit-box-shadow:0px 1px #E7E7E7 !important; } .wp-pagenavi span.current{ display: inline-block; padding:6px 9px 6px 9px !important; border:solid 1px #DCDCDC !important; color:#fff !important; box-shadow:0px 1px #E7E7E7 !important; -moz-box-shadow:0px 1px #E7E7E7 !important; -webkit-box-shadow:0px 1px #E7E7E7 !important; margin-right:3px !important; text-shadow:0px 1px #3C3C3C !important; border-color:#202020 !important; background:#525252 !important; background:-moz-linear-gradient(top,#9F9F9F 1px,#6C6C6C 1px,#525252) !important; background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#9F9F9F),color-stop(0.02,#6C6C6C),color-stop(1,#525252)) !important; } 

1つ目を除いて、それぞれの要素に

display: inline-block;

を追加するのがポイントですね。

これで、画面幅の狭いスマホ表示でもPageNaviをはみ出さずに改行して表示してくれます。
この修正は簡単でしたね。

スポンサーリンク
レクタングル広告(大)
レクタングル広告(大)
スポンサーリンク
レクタングル広告(大)