[いさや]

【お使いの Snow Monkey のバージョン】11.4.0
【お使いの Snow Monkey Blocks のバージョン】9.7.0
【お使いの Snow Monkey Editor のバージョン】3.0.4
【お使いのブラウザ】chrome
【当該サイトのURL】 （管理者により削除）

### 実現したいこと

iPhoneからハンバーガーメニューを表示させた際に、「home」の周りに青枠が表示されないようにしたい。

### 発生している問題

iPhoneかたハンバーガーメニューを表示させた際に、

「HOME」の周りに青枠が表示されてしまいます。

※chrome開発ツール、Androidだと青枠が表示されませんでした。

（スクリーンショットは管理者により削除）

### 試したこと

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

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

snow-monkey.2inc.org

同じような投稿がありましたので、こちらを試しましたが、改善されませんでした。

aタグやliタグに対して、「outline:none !important;」などで指定してみましたが、こちらも改善されませんでした。

よろしくお願いいたします。

♥ 0

いいねをした人: 居ません

[まーちゅう]

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

いいねをした人:

[投稿者]

投稿