iPhoneからハンバーガーメニューを表示させると、青い枠が表示される２

iPhoneからハンバーガーメニューを表示させると、青い枠が表示される

タグ: iPhone, ハンバーガー, ハンバーガーメニュー, メニュー, モバイル このトピックに…

snow-monkey.2inc.org

こちらの記事のコメントにもあるように、青い枠はブラウザのアクセシビリティ対応（要素にフォーカスが当たったらアウトラインを表示する）で表示されているものです。キーボードのTABキーでフォーカスを移動させたときに、どの要素にフォーカスがあたっているのかが分かるように、などの理由で表示されています。
これを表示させないというのは、例えて言うと「点字ブロックがあると歩きにくいので外したい」と言っているようなものです。
基本的にはそのままにしておくのがベストなのですが、iPhoneなどスマホ表示の時にフォーカスが分かるようにする必要があるのかどうかは、もっと詳しい人に聞いてみないと私もよく分かりません。

以上の理由から、単純にaタグやliタグに対してoutline: none;を当てるスタイルを追加CSSに記述するのではなく、My-Snowmonkeyにコードを書いて wp_is_mobile()等で PCとそれ以外のデバイスできちんと条件分岐させた上で、PC以外の時にoutline: none;にする必要があります。

<?php
  if ( wp_is_mobile() ) {
    // PC以外の場合
    // wp_enqueue_style で読み込むCSSを指定する
    // または、アクションフックでヘッダーにインラインCSSを追加
  }
?>

アウトラインの表示は

a:focus-visible {
	outline: none;
}

で消えると思います。

♥ 2

いいねをした人: