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

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

このトピックには9件の返信が含まれ、2人の参加者がいます。8 ヶ月、 2 週間前 匿名 さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #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

    匿名

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

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

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

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

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

トピック「モバイルメニューの「アコーディオン(デフォルト)」で表示されるメニューの背景色、各項目の位置を変更したい。」への新規返信追加は締め切られています。

スポンサーリンク
アドセンス(大)
アドセンス(大)