Simplicityの特徴 › フォーラム › テーマファイルのカスタマイズに関する質問など › モバイルメニューの「アコーディオン(デフォルト)」で表示されるメニューの背景色、各項目の位置を変更したい。
- このトピックには9件の返信、2人の参加者があり、最後に匿名により7年、 2ヶ月前に更新されました。
-
投稿者投稿
-
-
2017年1月7日 1:03 PM #49297匿名ゲスト
こんにちは。いつもお世話になっております。
今回の質問内容は上記の通りで、「アコーディオン(デフォルト)」でのメニューの背景色、各項目の位置(中央揃え)のカスタマイズ方法を教えて頂きたいです。最終的にはこのブログhttp://www.hitode-festival.com/archiveのようなメニュー表示にしたいと思っています。
私は初めに、とりあえず背景色だけ変更してみようと、クロームのデベロッパーツールを使いながらmobile.cssに以下のコードを記述しました。
#navi ul{ background-color:#045363; border-color:#045363; }
ですが変化はなく、次に以下のように変更しました。
<strong>#mobile-menu</strong>{ background-color:#045363; border-color:#045363; }
しかしこれでも変化はありませんでした。#mobile-menuは親テーマのstyle.cssにあったものです。
確認の際には自分のスマホのブラウザを使用し、シークレットモードで確認をしていました。
記述するところが違うのか、記述内容が違うのか・・・。ありとあらゆるサイトを見たり、サポートフォーラムを検索しても該当するような質問がなかったため、質問させて頂きました。
ということで、「アコーディオン(デフォルト)」でのメニューの背景色を変更し、ついでに各項目の位置も変更するためにはどうすればいいでしょうか。回答よろしくお願いします。
-
2017年1月7日 1:08 PM #49298匿名ゲスト
二つ目のコードを訂正します。
#mobile-menu{ background-color:#045363; border-color:#045363; }
変更部分を太文字にしたかっただけです。失礼しました。
-
2017年1月7日 6:27 PM #49305わいひらキーマスター
mobile.cssに書き込む場合は、設定によっては読み込まれない可能性があります。
よかったら設定状態を見たいので、カスタマイズ対象サイトのURLを貼り付けていただいてよろしいでしょうか。 -
2017年1月7日 8:36 PM #49309みきゲスト
わいひらさんのレスを見て思い出したのですが
完全レスポンシブが入っていると
変わりにレスポンシブ.css(英語忘れたのですみません 笑)が読み込まれたはずです
なので完全レスポンシブを切るかほかのcssで行うと出来るかもしれません -
2017年1月7日 9:55 PM #49310匿名ゲスト
完全レスポンシブは常にオフにしています。
対象サイトはこちらhttp://oshiro-046.comです。
他のCSSという話があったので、試しに子テーマ内のeditor-style.cssに上記のコードを記述してみましたが案の定ダメでした。
もしかして親テーマをいじる必要があるのでしょうか・・・。あまり気が進みませんが・・・。
-
2017年1月9日 2:21 PM #49344わいひらキーマスター
以下、のコードが子テーマのmobile.cssに書かれていないようですけど。
http://oshiro-046.com/wp-content/themes/simplicity2-child/mobile.css#navi ul{ background-color:#045363; border-color:#045363; }
というより、メニューの背景色を変更するのであれば、以下のように書く必要があるかもしれません。
#navi ul li a { background-color: #045363; }
-
2017年1月9日 3:47 PM #49358匿名ゲスト
#navi ul の箇所をそのまま #mobile-menu に書き換えたため元のコードは残っていません。コメントアウトで残すべきでしたね・・・。
それと報告です。わいひらさんの提示してくださった
#navi ul li a { background-color: #045363; }
こちらのコードをmobie.cssに書き込んだところ、無事にメニューの背景色を変更することができました!本当にありがとうございます。
あとは中央揃えなんですが、text-align: center;をこれに追記し
#navi ul li a { background-color: #045363; text-align: center; }
としてみましたが変化がありませんでした。そこで、aを外して新しく
#navi ul li{ text-align: center; }
を記述しましたが、これもまた変化なし。liも外そうとも思いましたがそれは流石に違うと思ったため、現状このコードを記述したところで止まっています。
ほんのちょっと書き加えるだけで、あと少しだと思うのですが・・・。よろしくお願いします。
-
2017年1月9日 3:53 PM #49360わいひらキーマスター
以下のコードでちゃんと中央ぞろえで表示されていますよ。
#navi ul li { text-align: center; }
おそらく、古いブラウザキャッシュが残っているとかかもしれないので、キャッシュを削除してみてください。 -
2017年1月9日 3:56 PM #49361わいひらキーマスター
どうしても、表示されなかったら、以下などでもセンタリングされると思います。
#navi ul { text-align: center; }
-
2017年1月9日 4:15 PM #49363匿名ゲスト
わいひらさんの画像にてキレイに中央揃えされていてビックリしました。
わいひらさんのおっしゃった通りキャッシュが残っていたのか、シークレットモードを一旦閉じて再確認してみたところ、私のスマホでもちゃんと中央揃えで表示されるようになりました。
自分の記述したコードが合っていたという嬉しさと、キャッシュを消さずに確認していたことの愚かさが合わさって、なんだか複雑な気持ちです・・・。
ですが、これでようやくメニューの背景色を変更し、要素を中央揃えにすることができました。心のモヤモヤを晴らすことができて嬉しいです。
わいひらさん、みきさん、本当にありがとうございました。
-
-
投稿者投稿
- トピック「モバイルメニューの「アコーディオン(デフォルト)」で表示されるメニューの背景色、各項目の位置を変更したい。」には新しい返信をつけることはできません。