ちこカスタマイズ|グローバルメニューをスマホ対応にツイートシェアはてブGoogle+Pocket久しぶりにカスタマイズ系の記事です!今日はグローバルメニューをスマホ対応にする方法です。xeoryをお使いの方は、もうすでにメニューはスマホ対応になってます。なってますが、強引なカスタマイズをしてしまうと、スマホのメニューが表示されなかったり、表示がおかしくなったりします。こちらの記事もおすすめですスマホでメニューが見れなくなってた自分のサイトをスマホで見ることってほとんどなかったので気付かなかったんですが、私もグローバルメニューをけっこう強引にカスタマイズしていたので、トグルボタンは出ていたものの、トグルをタップしてもメニューが表示されませんでした。メニュー」とググって、出てきたプラグインをまたもや強引に組み込もうとしました。強引なカスタマイズはよくないしかし、案の定です。レスポンシブ対応されてるので、双方の構文が反発しあってるのか、思うように表示してくれません。文字が縦に~~!どこをどうしてもこんな感じになってしまうので、いったん白紙に戻そうじゃないかと、あとから組み込んだプラグインは消しました。メニューの形をきれいにすればいいだけだということに気付き、形を整えました。メニューを縦並びにするcss編集もしくはstyleseetにこれを付け加えるだけです。#8593A9;}}こんなふうになります。縦並びにリスト表示するってことです。noneというのは縦並びを表示しないということではなく、noneと指定しなければデフォルトで「●」がメニューの先頭についてしまうんです。記述しておけば、縦並びになります。内側に影をつけてみました。指示することで、影が内側に付きます。これもお好みで調整してください。その他スタイルは表示を見ながら、好きな感じに変更してください。}内で、#gnavに変更箇所を付け加えるだけです。試してみてください!トグルボタンにちょっとひと手間あと、トグルボタンって知らない人から見たらよく分からないボタンなので、わかりやすくメニューという文字を入れました。スマホで見たら上部にメニューが表示されるようになってるんですが、ページ移動すると消えるので、これで滞在率が少しは上がるはずです。変更するのはheader.phpのこの部分です。}?>トグルボタンの前にメニューと付け加えるだけです。}?>あとはcssで整えます。先ほどと同じように、css編集かstylesheetの最後に付け加えます。10px;}文字の大きさを変えるだけではなんとなく物足りないので、ボタン風にしてみました。今回は、私の忘備録として書いたので、ほとんどの人が関係ない記事だと思います。次回、メニューのスマホ対応について一般的な方法を書きますのでご勘弁を・・・スポンサーリンクこちらの記事もおすすめですXeoryカスタマイズ!ヘッダー下のナビゲーションメニュー編storkカスタマイズ|ナビゲーションメニューにCSSでアニメーションつけたXeoryカスタマイズ!サイドバーのタイトルに背景色を入れる編Xeoryをカスタマイズしてみよう!ヘッダー編(追記アリ)カスタマイズこの記事が気に入ったらいいねしよう!最新記事をお届けします。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。アクセスできません」ときたときの対処法RECOMMENDこちらの記事も人気です。カスタマイズ2015.2.13Xeoryをカスタマイズしてみよう!ヘッダー編(追記アリ)カスタマイズ2015.2.19Xeoryカスタマイズ!記事中の小見出しをわかりやすくカスタマイズ2015.10.15WPカスタマイズの必需品!chromeのデベロッパーツールカスタマイズ2016.3.12Xeoryをカスタマイズしてみよう!フッター編カスタマイズ2015.2.14Xeoryをカスタマイズしよう!新着記事にサムネイルを入れる編カスタマイズ2015.2.16Xeoryカスタマイズ!サイドバーのタイトルに背景色を入れる編カスタマイズ2015.3.6Wordpressをローカル環境でカスタマイズする方法(Windowsの...カスタマイズ2017.3.23Xeoryカスタマイズ|ヘッダーをスライダーに(フルワイドにもできるよ)ABOUTこの記事をかいた人りりちこりりちこです。web制作をしてます。webデザインで仕事をしたい方のサポートもしてます。目まぐるしく変化していくWebの世界で生き残っていくために、日々インプットアウトプットを繰り返しています。POSTこのライターの最新記事webデザイン講座2020.1.11良質コンテンツは無料化へ。福岡国際会議場で「集客し続けるホームページを作る勉強会」を開催しました。福岡商工会議所で「あなたのホームページを成果を出せるホームページにする勉強会」を開催しました。10/7グロースハックキャンプを開催しました。12/1前田高志デザイントークイベントを開催しました。大卒後からWeb関係の仕事に従事。サイト制作、office、adobeソフトの講師を務める。剣道2段の息子の試合を見てるうちに剣道好きになる。イエモン、真心、エレカシ、ユニコーン日本のロックが好き。※掲載の記事・写真・イラスト等のすべてのコンテンツの無断複写・転載を禁じます。良質コンテンツは無料化へ。仕事としてずっとやっていけるのか不安・・・このメルマガでは、ほんとに稼げるWebデザイナーになるための役立つ情報を配信しています。