こんにちは
フォーカスされたボタン（.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;
}
ishitakaさま
お手数をおかけしております｡
ご教示いただいたスタイルシート２つとも試させていただきました…がしかし反映されません｡すみません汗
@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) ; /*下線の太さと色（赤色）*/
}
}
