モバイルメニューの「アコーディオン(デフォルト)」で表示されるメニューの背景色、各項目の位置を変更したい。

Simplicityの特徴 フォーラム テーマファイルのカスタマイズに関する質問など モバイルメニューの「アコーディオン(デフォルト)」で表示されるメニューの背景色、各項目の位置を変更したい。

  • このトピックには9件の返信、2人の参加者があり、最後に匿名により7年、 2ヶ月前に更新されました。
9件の返信スレッドを表示中
  • 投稿者
    投稿
    • #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にあったものです。

      確認の際には自分のスマホのブラウザを使用し、シークレットモードで確認をしていました。

      記述するところが違うのか、記述内容が違うのか・・・。ありとあらゆるサイトを見たり、サポートフォーラムを検索しても該当するような質問がなかったため、質問させて頂きました。

      ということで、「アコーディオン(デフォルト)」でのメニューの背景色を変更し、ついでに各項目の位置も変更するためにはどうすればいいでしょうか。回答よろしくお願いします。

    • #49298
      匿名
      ゲスト

      二つ目のコードを訂正します。

      #mobile-menu{
      background-color:#045363;
      border-color:#045363;
      }

      変更部分を太文字にしたかっただけです。失礼しました。

    • #49305
      アバター画像わいひら
      キーマスター

      mobile.cssに書き込む場合は、設定によっては読み込まれない可能性があります。
      よかったら設定状態を見たいので、カスタマイズ対象サイトのURLを貼り付けていただいてよろしいでしょうか。

    • #49309
      みき
      ゲスト

      わいひらさんのレスを見て思い出したのですが
      完全レスポンシブが入っていると
      変わりにレスポンシブ.css(英語忘れたのですみません 笑)が読み込まれたはずです
      なので完全レスポンシブを切るかほかのcssで行うと出来るかもしれません

    • #49310
      匿名
      ゲスト

      完全レスポンシブは常にオフにしています。

      対象サイトはこちらhttp://oshiro-046.comです。

      他のCSSという話があったので、試しに子テーマ内のeditor-style.cssに上記のコードを記述してみましたが案の定ダメでした。

      もしかして親テーマをいじる必要があるのでしょうか・・・。あまり気が進みませんが・・・。

    • #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;
      }
    • #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も外そうとも思いましたがそれは流石に違うと思ったため、現状このコードを記述したところで止まっています。

      ほんのちょっと書き加えるだけで、あと少しだと思うのですが・・・。よろしくお願いします。

    • #49360
      アバター画像わいひら
      キーマスター

      以下のコードでちゃんと中央ぞろえで表示されていますよ。

      #navi ul li {
          text-align: center;
      }


      おそらく、古いブラウザキャッシュが残っているとかかもしれないので、キャッシュを削除してみてください。

    • #49361
      アバター画像わいひら
      キーマスター

      どうしても、表示されなかったら、以下などでもセンタリングされると思います。

      #navi ul {
          text-align: center;
      }
    • #49363
      匿名
      ゲスト

      わいひらさんの画像にてキレイに中央揃えされていてビックリしました。

      わいひらさんのおっしゃった通りキャッシュが残っていたのか、シークレットモードを一旦閉じて再確認してみたところ、私のスマホでもちゃんと中央揃えで表示されるようになりました。

      自分の記述したコードが合っていたという嬉しさと、キャッシュを消さずに確認していたことの愚かさが合わさって、なんだか複雑な気持ちです・・・。

      ですが、これでようやくメニューの背景色を変更し、要素を中央揃えにすることができました。心のモヤモヤを晴らすことができて嬉しいです。

      わいひらさん、みきさん、本当にありがとうございました。

9件の返信スレッドを表示中
  • トピック「モバイルメニューの「アコーディオン(デフォルト)」で表示されるメニューの背景色、各項目の位置を変更したい。」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)