質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

2280閲覧

スマホページのメニューのカスタマイズ方法

gonda310

総合スコア14

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/02/20 07:08

今回の質問はwordpressのスマホページのメニューをカスタマイズしたいです。
テーマはtwenty twelveです。
使っている人はわかりますが、
引用
結構素っ気ないです笑
これをメニューボタンではなく、pcの時のように横一列に並んだ状態で表示したメニューにしたいです。
例えばこういう感じです。
引用

どうやったらできますか?
私がやりたいのは、スマホメニューを消しpcメニューをスマホに表示される方法です。
ただ、初心者なのでメニューの作り方がわかりません。

css

1.menu-toggle { 2 display: inline-block; 3}

がスマホメニューのcssですよね?
これを

css

1.menu-toggle { 2 display: none; 3}

としてもスマホメニューは消えません。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ちょうど同じテーマを使っていますにゃ。

メニューが入っている要素は div.menu-main-container で、
その子要素として ul#menu-main.nav-menu.toggled-on が入っています。
ですので非表示にしたいなら、一番の親要素である div.menu-main-container に
display:noneをかけるのが効果的だとおもいます。

横並びに変更したいなら、ul#menu-mainにスタイルをつければできると思います。
以下はそのサンプルですにゃ。

CSS

1/* リスト要素をfloatで横に配置する */ 2#menu-main { 3 overflow: hidden; 4} 5#menu-main .menu-item { 6 float: left; 7 margin: 1rem .5rem; 8}

CSS

1/* flexboxを使う(実用にはベンダープレフィックスが必要です) */ 2#menu-main { 3 display: flex; 4 align-items: center; 5 justify-content: center; 6} 7 8#menu-main .menu-item { 9 margin: 1rem .5rem; 10}

floatやflexboxはくせがあるので、使いやすい方をお使いくださいにゃー。

● ● ● メディアクエリの操作上書きについて ● ● ●

メニューのPC/SPのスタイル変更はメディアクエリでやってあるので、そこを上書きすれば変えられますにゃ。
本家のCSSを直で編集するとバージョンアップしたときに消えてしまうため、外観→CSS編集で行って下さい。

CSS

1/* オリジナルで600pxに指定してあるので0pxにする */ 2@media screen and (min-width: 0px) #site-navigation .menu-toggle { 3 display: none; 4}

投稿2017/02/20 07:55

編集2017/02/20 09:10
nyancat

総合スコア132

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

gonda310

2017/02/20 08:04

pc時のナビメニューにしたいんです。出来ますでしょうか? pc時のナビメニューは、 mdnu-navigation { color : #DB7093; } メニューボタンを消してpc時のメニューにしたいんです。
nyancat

2017/02/20 09:11

PCと同じスタイルにしたいということですね。追記しましたにゃ。
gonda310

2017/02/20 09:34

max-width:600px;でも大丈夫ですか?
nyancat

2017/02/20 10:04

意図した表示になるならいいと思いますにゃ。
gonda310

2017/02/20 13:09

あと、すみません。 私はpcのナビメニューのcss はmainnavigationを使っています。 mainnavigationだと駄目でしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問