2012
12
03
WordPressプラグインWP-PageNaviをスマホで押しやすいレイアウトに

WordPressのページナビにWP-PageNaviというプラグインを使っているのですが、PC版とモバイル版でCSSを書き換えて使いやすくしてみました。


レイアウト崩れが発覚

このブログはWPtap Mobile Detectorというプラグインを使って、ユーザーエージェントによってWPテーマを切り替えることでスマホ対応しているんですが、数字が二桁になったときに表示がおかしいよー、と、twitterで教えて頂きました。自分では気づかなかったです、ありがとうございます!

それと同時にそんな古い記事まで読んでくれるなんて…!という驚きと感動で震えましたw

121203-1

実際検証してみたらこのように…。。PCと同じCSSを使っているので、がっつりはみ出してますね…!

はみ出してるだけじゃなくて、非常にタップしづらいということも気になりました。せっかくプラグインでPC版とモバイル版のCSSを変えられるんだから、もっと使いやすいレイアウトになるように改造することにしました。

WPtap Mobile Detectorによるスマホ対応の記事はこちらです。

共通設定

121203-2

プラグイン設定のページはこのようにしてみました。

121203-3

pagenavi-css.cssのチェックを外します。これを外して、自前テーマのcssに書いていきます。

CSS

モバイル版

121203-4

widthとheightを指定して等間隔にし、シャドウを使ってボタンっぽくしてみました。

いかがでしょうか…前よりは大分使いやすくなったと思うのですが。。お気づきの点がありましたら、ご連絡頂けると嬉しいです!

PC版

121203-5

こんな感じ。角丸やシャドウはモダンブラウザのみの対応です。

23~28行目はモバイル版と同じ、外側の右と下のシャドウなんですが、私はないほうが好きだなと思って外してしまいました。実装する際はお好みでどうぞ!

思うところがあって、更に変更してしまいました。続きの記事はこちらです。
  • このエントリーをはてなブックマークに追加
  • follow us in feedly 618
  • RSSを登録

公開日:2012/12/03


コメントを残す




*印は必須項目です。コメントは承認制ですので、反映までしばらくお待ち下さい。(稀にですがスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。)


back to top