- このトピックには6件の返信、3人の参加者があり、最後に
により2年、 8ヶ月前に更新されました。
-
投稿
-
【お使いの Snow Monkey のバージョン】15.1.0
【お使いの Snow Monkey Blocks のバージョン】12.0.1
【お使いの Snow Monkey Editor のバージョン】6.0.0
【お使いのブラウザ】92.0.4515.107（Official Build） （64 ビット）
【当該サイトのURL】未開示### 発生している問題
iPhoneとiPadのiOS系だけの現象です。
- iOSバージョン：14.7.1
- Chromebaバージョン：92.0.4515.90
- Safariバージョン：14.1.2
記事内に設置した目次（SNOW MONKEY BLOCKS ）に表示されている見出しをクリックすると、選択した見出し位置に遷移しますが、遷移後の見出し周りが青い枠で囲まれます。なお、この青枠は画面のどこかをタップすると消えます。
android系のスマートフォンとタブレットでは、上記は発生しませんでした。
この青枠が出ないようにできないかな？と考えています。
### 試したこと
プラグインやらキャッシュの影響かな？と思い、まっさらの状態のデモ用ドメインに以下だけ入れた環境で試してみましたが、青枠が出てきます。
- Snow Monkeyテーマ
- Snow Monkey Blocks
- Snow Monkey Editor
- WP Multibyte Patch
ご存じの方からアドバイスをいただけると幸いです。
いいねをした人: 居ませんKumai-san,
アドバイスいただいたキーワードで検索したところ、答えが見つかりました。
追加CSSに以下を記載しましたら、青枠が出なくなりました。
*:focus {
outline: none;
}ありがとうございました、トピック閉じます。
いいねをした人: 居ませんSlackのオンラインコミュニティでご指摘をいただいて、理解できていなかったことが色々あったので追記です。
- この青枠（アウトライン）は、フォーカスされていることを視覚的にユーザーに伝えるフォーカス・インジケーターである
- キーボードで操作をする際など、アクセシビリティの視点でいえば表示された方がよい
- 非表示にすることは間違いではないが、理解した上で非表示にする
- また、私が上で書いたCSSだとあらゆるフォーカス線を消してしまうので、別の意味でよろしくない
私なりに調べて上記だろうと考えたのですが、ご指摘や補足などいただけると助かります。
なお、こちらの過去のトピックが大変参考になりました。
「なんじゃこの青い枠？iOSでしか出てこないからバグか何かかな？消したいなコレ。おっ、ググって見つけたコードでサクッと消えるじゃん！」という感じだったのですが、色々勉強になりました(;’∀’
いいねをした人:Webは万人に開かれたものであるべきなので、多くの健常者以外も便利に使えるべきと個人的には考えています。
その考え方からすると、フォーカスを非表示にするというのは選択肢としてはありません。
見た目の問題であれば、消さないという上でデザインの最適化を勧められることを個人的にはお勧めします。
いいねをした人:
- トピック「目次ブロックから見出しへ遷移した際、見出しが青枠で囲まれる（iOSデバイス）」には新しい返信をつけることはできません。