メニューをクリックすると赤または青の枠線が表示されることがあります。 例えば、 WordPress OceanWP テーマでナビゲーションメニューをクリックすると赤い枠が表示されることがあります。 Chrome、エッジブラウザなどでクリックすると赤/青の境界線が表示される場合は、CSSを使用して表示されないようにすることができます。
ブラウザでメニューをクリックしたときに赤/青の枠線を削除する方法
OceanWP テーマでメニューをクリックすると、上の図のように赤い枠が表示されると消えます。
他のテーマでは、このような効果を与える場合をほとんど見たことがなく、珍しく OceanWP テーマでこんな効果を楽しんで使っているようです。
クリック時にこのような赤または青の境界線が表示されるのは、CSSでoutlineプロパティが適用されたためです。 outline 属性については Mozilla ドキュメントを参考にすることができます。
例：
outline: dashed red;上記のCSSを適用すると、クリックすると赤い点線が表示されます。
太字を設定するには、次のように太字を追加できます。
outline: 1rem solid;CSS outlineプロパティを削除する
outline プロパティを削除するには、次のコードを使用できます。
outline: none !important;- または -
outline: 0 !important;例： WordPress OceanWP テーマでメニューまたはロゴをクリックすると赤/青の境界線が表示される場合は、境界線を削除する
例えば、 OceanWPでは、次のコードを WordPress 管理者ページ » ルックス » カスタマイズ » 追加 CSSに追加すると、クリックすると境界線が表示されなくなります。
/* OceanWP에서 메뉴 클릭 시 빨간색 또는 파란색 테두리색이 표시되는 경우 제거하기 */
/* Remove red or blue border line when clicking on a menu item in OceanWP theme */
#site-header.top-header #site-navigation-wrap .dropdown-menu>li>a:focus {
outline: none !important;
}上記のコードでうまくいかない場合は、次のコードでもテストしてください。
#site-navigation-wrap .dropdown-menu>li a:focus {
outline: none !important;
}OceanWP テーマで作られた WordPress サイトでロゴをクリックしても境界線が表示されることがあります。 この場合は、次のCSSコードで境界線が消えるかどうかを確認してください。
/* OceanWP 테마 로고 클릭 시 테두리선 제거하기 */
/* Remove border line when clicking on the logo in OceanWP theme */
#site-logo #site-logo-inner a:focus {
outline: none !important;
}基本的なCSSはそれほど難しくなく、学習に時間もあまりかかりません。 特定の部分の色や文字サイズなどを好きなように変更したい場合は、基本的なCSSを覚えておくと役に立ちます。
コメントを残す