サポート » 使い方全般 » スマホのメニューの色のカスタマイズについて

  • 解決済 WP_manabu

    (@wp_manabu)


    テーマ、Twenty Seventeen(バージョン2.3)について、おうかがいします。

    スマホのメニューの背景色を、以下のスタイルシートにて、赤色に変更しました。

    @media (max-width: 650px){
    	.navigation-top {
    	background: rgba(353, 70, 93, 100); /*背景色 赤色*/
    	border-bottom: 1px solid rgba(353, 70, 93, 100); /*上線の太さと色(赤色)*/
    	border-top: 1px solid rgba(353, 70, 93, 100) ; /*下線の太さと色(赤色)*/
     }
    }

    うまくいった!と思ったのですが…、「メニュー」をタップすると、添付した画像のように、その周りだけ、グレーになってしまいます。対処方法などありましたら、どうぞ、ご教示くださいませ。
    https://github.com/okahijiki/Q_WordPress_Forum/blob/master/FAQ.png

    グレーの部分も、赤色の指定に変更してしまえばクリアできそうな気もしますが…そのグレーの指定がどこに記述してあるのか分からない次第です。

    • このトピックは4ヶ月、 1週前にWP_manabuが編集しました。理由: 成人向けコンテンツにチェックを入れてしまった、貼ったURLが表示されなかった

    ヘルプの必要なページ: [リンクを見るにはログイン]

10件の返信を表示中 - 1 - 10件目 (全10件中)
  • こんにちは

    フォーカスされたボタン(.menu-toggle:focus)のスタイルが適用されているようです。
    下記スタイルで背景と枠線を消すことができます。

    #site-navigation .menu-toggle:focus {
    	background: transparent;
    	outline: none;
    }

    ishitakaさま

    ご回答、ありがとうございます。
    メディアクエリの指定の中に、ご教示いただいたスタイルシートを記述しましたが、
    うまく反映されないようです汗

    お手数をおかけします。間違いなど、どうぞ、ご指摘くださませ。

    @media (max-width: 650px){
    	.menu-toggle:focus {
    	background: transparent;
    	outline: none;
    }
    	.navigation-top {
    	background: rgba(353, 70, 93, 100); /*背景色 きんあか*/
    	border-bottom: 1px solid rgba(353, 70, 93, 100); /*上線の太さと色*/
    	border-top: 1px solid rgba(353, 70, 93, 100) ; /*下線の太さと色*/
     }
    }

    なお、スタイルシートを記述したあと、WordPressのキャッシュはクリアにしております。

    .menu-toggle:focus {
    	background: transparent;
    	outline: none;
    }

    の優先順位の問題だと思います。

    セレクタに #site-navigation を追加や !important を付けてみてください。

    #site-navigation .menu-toggle:focus {
    	background: transparent;
    	outline: none;
    }

    または、

    .menu-toggle:focus {
    	background: transparent !important;
    	outline: none;
    }
    • この返信は4ヶ月、 1週前にishitakaが編集しました。

    ishitakaさま

    お手数をおかけしております。
    ご教示いただいたスタイルシート2つとも試させていただきました…がしかし反映されません。すみません汗

    @media (max-width: 650px){
    	#site-navigation .menu-toggle:focus {
    	background: transparent;
    	outline: none;
    }
    	.navigation-top {
    	background: rgba(353, 70, 93, 100); /*背景色 きんあか*/
    	border-bottom: 1px solid rgba(353, 70, 93, 100); /*上線の太さと色*/
    	border-top: 1px solid rgba(353, 70, 93, 100) ; /*下線の太さと色*/
     }
    }
    @media (max-width: 650px){
    	.menu-toggle:focus {
    	background: transparent !important;
    	outline: none;
    }
    	.navigation-top {
    	background: rgba(353, 70, 93, 100); /*背景色 きんあか*/
    	border-bottom: 1px solid rgba(353, 70, 93, 100); /*上線の太さと色*/
    	border-top: 1px solid rgba(353, 70, 93, 100) ; /*下線の太さと色*/
     }
    }

    問題ないと思います。

    ホバー時もであれば、

    .menu-toggle:hover,
    .menu-toggle:focus {
    	background: transparent !important;
    	outline: none;
    }

    ですが・・・

    ちょっと分かりませんね。
    動作を確認できるページの URL をお知らせいただくと解決が早いかもです。

    ishitakaさま

    ありがとうございます〜

    そもそもメニューを選択したときに変わるグレーは、どこかで色指定されていると思うんです。
    その記述場所さえ分かれば、指定されているグレーを、赤 rgba(353, 70, 93, 100)に書き換えれば良いのかな、と思ったりもしています〜

    該当ウェッブサイトは、以下のとおりです。
    スマホ(当方のばあいiPhone)の「メニュー」をタップして、どうぞ、ご確認くださいませ〜

    https://tsurumaki-office.com/

    ページを確認しましたが、ボタンは赤色になっているようです。ちょっと分かりませんね。

    その記述場所さえ分かれば、

    style.css の1045行目辺りの background: #767676; だと思います。

    :not( .mejs-button ) > button:hover,
    :not( .mejs-button ) > button:focus,
    input[type="button"]:hover,
    input[type="button"]:focus,
    input[type="submit"]:hover,
    input[type="submit"]:focus {
    	background: #767676;
    }

    ishitakaさま

    >style.css の1045行目辺りの background: #767676; だと思います。

    確認できました。ありがとうございますー
    で、本ラインを、background: rgba(353, 70, 93, 100);に変更してみましたが、
    やはり、うまく反映されませんでした。

    お手数をおかけして恐縮です。本件については、どうぞ、宿題とさせて下さいませ。

    発想を逆転させて、メニューバーの赤色をあきらめ、グレーにすることで、本件の落とし所を見つけ出すことが出来ました。お手数をおかけしましたー。

    @media (max-width: 650px){
    	.navigation-top {
    	background: rgba(118, 118, 118, 100); /*背景色 赤色*/
    	border-bottom: 1px solid rgba(118, 118, 118, 100); /*上線の太さと色(赤色)*/
    	border-top: 1px solid rgba(118, 118, 118, 100) ; /*下線の太さと色(赤色)*/
     }
    }
10件の返信を表示中 - 1 - 10件目 (全10件中)
  • このトピックに返信するにはログインが必要です。