カスタマイズ|グローバルメニューをスマホ対応に

久しぶりにカスタマイズ系の記事です!

今日はグローバルメニューをスマホ対応にする方法です。

xeoryをお使いの方は、もうすでにメニューはスマホ対応になってます。
なってますが、強引なカスタマイズをしてしまうと、スマホのメニューが表示されなかったり、表示がおかしくなったりします。

スポンサーリンク


スマホでメニューが見れなくなってた

 

自分のサイトをスマホで見ることってほとんどなかったので気付かなかったんですが、私もグローバルメニューをけっこう強引にカスタマイズしていたので、トグルボタンは出ていたものの、トグルをタップしてもメニューが表示されませんでした。

あまり頭を使いたくなかった私は、ネットで「スマホ対応 メニュー」とググって、出てきたプラグインをまたもや強引に組み込もうとしました。

 

強引なカスタマイズはよくない

しかし、案の定です。
もともとレスポンシブ対応されてるので、双方の構文が反発しあってるのか、思うように表示してくれません。

menu01
文字が縦に~~!

どこをどうしてもこんな感じになってしまうので、いったん白紙に戻そうじゃないかと、あとから組み込んだプラグインは消しました。

そしてもともとのメニューの形をきれいにすればいいだけだということに気付き、形を整えました。

 

メニューを縦並びにする

css編集もしくはstyleseetにこれを付け加えるだけです。

 
こんなふうになります。
menu03
要は、list-style: none; で縦並びにリスト表示するってことです。
noneというのは縦並びを表示しないということではなく、noneと指定しなければデフォルトで「●」がメニューの先頭についてしまうんです。
それをnone と言ってるだけ。
list-style と記述しておけば、縦並びになります。

 

内側に影をつける

あと、box-shadow で内側に影をつけてみました。
insert と指示することで、影が内側に付きます。

 

これもお好みで調整してください。つけなくてもいいし。

その他スタイルは表示を見ながら、好きな感じに変更してください。

 

@media screen and (max-width: 767px) の{ }内で、#gnavに変更箇所を付け加えるだけです。
いろいろ試してみてください!

 

トグルボタンにちょっとひと手間

あと、トグルボタンって知らない人から見たらよく分からないボタンなので、わかりやすくメニューという文字を入れました。
menu02
もともとスマホで見たら上部にメニューが表示されるようになってるんですが、ページ移動すると消えるので、これで滞在率が少しは上がるはずです。

 

変更するのはheader.phpのこの部分です。

 
トグルボタンの前にメニューと付け加えるだけです。

 
あとはcssで整えます。
先ほどと同じように、css編集かstylesheetの最後に付け加えます。

 
文字の大きさを変えるだけではなんとなく物足りないので、ボタン風にしてみました。

その他、色やサイズなどは、お好みで・・・

 

今回は、私の忘備録として書いたので、ほとんどの人が関係ない記事だと思います。

次回、メニューのスマホ対応について一般的な方法を書きますのでご勘弁を・・・

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

りりちこです。福岡在住の主婦で、2児の母です♪ webデザインやネットビジネスでお小遣い稼ぎをしており、稼ぎたい方のサポートもしてます。 詳しいプロフィールはこちらから!