グローバルナビのメニューの色がモバイル表示の時だけ異なる。

Simplicityの特徴 フォーラム 不具合報告 グローバルナビのメニューの色がモバイル表示の時だけ異なる。

  • このトピックには3件の返信、1人の参加者があり、最後にHidekichiにより9年、 2ヶ月前に更新されました。
3件の返信スレッドを表示中
  • 投稿者
    投稿
    • #51129
      カイル
      ゲスト

       こんにちは。初めまして。
      simplicty2を使い始めたばかりの初心者です。

      今回はタイトルの通りです。

      ナビメニューの『プロフィール』などの項目を表示する箇所の背景の色が設定した色(ホワイト)ではなく、モバイルの時だけグレーで表示される状態となっておりました。

      解決策を探そうとCSSを調べてみたりしたのですが、結局、自分1人では解決をすることができなかったのでこちらのほうでご質問をさせて頂きました。

      ご回答を頂けると幸いです。

    • #51135
      Hidekichi
      ゲスト

      モバイルで、どのメニューを利用しているのかと、

      > 設定した色(ホワイト)

      はどこに書いてあるのかを書いて下さい。

      確認用に、サイトアドレスを書いてもらうほうが好ましいです。

    • #51137
      カイル
      ゲスト

      迅速なご連絡ありがとうございました。

      simplicity2のテーマを使用しているだけですのでモバイルとパソコンは同じものを使用しております。

      設定した色につきましては、simplicity2-childのカスタマイズの色から行いました。

      http://naopon-blog.com
      こちらがサイトアドレスになります。

      スマホからハンバーガーボタンを押してグローバルナビを開きますとグレーで表示されます。

    • #51138
      Hidekichi
      ゲスト

      モバイル時のアコーディオンメニューの背景色は、ul li aに設定されているので、ulだけに指定しても見た目に見えません。

      そのため、モバイル時にliの中のaタグの背景色を初期化するか、明示的に透過するかを書く必要があります。

      子テーマstyle.cssに書く場合はメディアクエリが必要で、

      @media screen and (max-width: 48em) {
        #navi ul li a {
          background-color: initial;
        }
      }

      などと書きます。initialはtransparentでも良いです。
      本来であれば、#navi li aなどでも指定できるのですが、親テーマで上記のように指定されているため優先度的に負けてしまうかもしれないので、同じセレクタ形式で書く必要があります。

      mobile.cssに書く場合はメディアクエリは必要ありませんが、タブレットなどでも同じように表示されるかも知れないのでここらは別途考える必要があり、必要に応じてメディアクエリを書く必要も出てきます。
      どうせ書くなら面倒なので子テーマstyle.cssに書いとけばよいのではなかろうかと。

      また別件で、bootstrapのcssとjsが読み込めなくてエラーが出ています。cssはアドレスも正しいようですが読み込めていません。更に子テーマにダウンロードしておいたcssなどを読み込むのは問題はないのですが、色々と参照ミスなどがある可能性があるのでCDNを利用するのが良いのではなかろうかと思います。

      参考: bootstrap CDN

      念の為補足ですが、bootstrapはhtmlタグもスタイルされています。simplicityのスタイルの後に読み込んだ場合、simplicityのスタイルを上書きしてしまいますので、simplicityのスタイルの前に読み込むか、後に読み込むかで色々影響が変わります。

      現在は読み込めていないようなのでsimplicityのスタイルが適用されていますが、読み込めるようになった場合ここらを注意して下さい。

      bootstrapではありませんがsimplicityのスタイルの最初に何かしらのスタイルを読み込むのは以下を参照してみてください。

      参考: Simplicityを少し改造してみた 番外編 part.25 既存のテーマcssの先頭にreset.cssをぶち込む

3件の返信スレッドを表示中
  • このトピックに返信するにはログインが必要です。
スポンサーリンク
アドセンス(大)
アドセンス(大)