スマートフォン用サイトってページがどうしても長くなってしまって、デザインするのが難しいですね。
僕が特に悩んだのがヘッダー部分。
ロゴは小さくしたとしてもメニューとか色々な物を表示しているので、どうしても頭でっかちな印象になってしまいました。
「これはいかんぞ・・・見辛い！」
と思い、いい方法無いかな？とネットを探していたらPageSlideというjqueryを発見！
ボタンをタッチすると、左or右から「ガラッ！」とメニュー画面が出てくるのです。
Facebookで使われているあれの様なものですね。
イメージ出来ない方はDEMOサイトがあるのでそちらで確認してください。
やり方を書きます！
まずは公式からPageSlideをダウンロード。
そしてダウンロードした物から
jquery.pageslide.css
jquery.pageslide.js
jquery.pageslide.min.js
をWordpressの使用しているテーマの「CSS」と「JS」フォルダに入れてあげる。
そしてCSSをちょっとだけいじりました。
#modalをdisplay：none;で非表示にしています。
そしてヘッダー部分でCSSとjquery本体だけ！読み込んで上げて下さい。
例えば。
こんな感じです。
そしてここからはbody
を記載
へぇ！body内でjquery読むんだね！珍しいね！
ちなみに僕の場合最初実装したときウンともスンとも言いませんでした。
試行錯誤して解ったのはWordpressにあるjquery本体と競合していた様です。
Googleだけで読みたかったので
で「Wordpressのjqueryは出てくんじゃねぇ！！」と命令したらあっさり実装できましたとさ。
これでヘッダーの「場所ねぇわ！」問題はPageSlideにて解決できました。
みなさんもスペースに悩んでいるなら実装してみては？
参考にしたサイト
スマホサイトにおすすめ。jQueryプラグイン『PageSlide』を使ってFacebook風メニューを再現してみました
コメント