目次ブロックから見出しへ遷移した際、見出しが青枠で囲まれる(iOSデバイス)

0
いいねをした人: 居ません
7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • 投稿者
    投稿
  • #83067
    のぶやん
    閲覧者
    22

    【お使いの 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

    ご存じの方からアドバイスをいただけると幸いです。

    0
    いいねをした人: 居ません
    #83069
    Kumai Kazuyuki
    参加者
    22

    css ios 青枠 で検索すれば答が得られると思います。

    2
    いいねをした人:
    #83070
    のぶやん
    閲覧者
    22

    Kumai-san,

    アドバイスいただいたキーワードで検索したところ、答えが見つかりました。

    追加CSSに以下を記載しましたら、青枠が出なくなりました。

    *:focus {
    outline: none;
    }

    ありがとうございました、トピック閉じます。

    0
    いいねをした人: 居ません
    #83073
    のぶやん
    閲覧者
    22

    タグ間違いでコードを書いておりました、失礼しました。

    *:focus {
    	outline: none;
    }
    
    0
    いいねをした人: 居ません
    #83110
    のぶやん
    閲覧者
    22

    Slackのオンラインコミュニティでご指摘をいただいて、理解できていなかったことが色々あったので追記です。

    • この青枠(アウトライン)は、フォーカスされていることを視覚的にユーザーに伝えるフォーカス・インジケーターである
    • キーボードで操作をする際など、アクセシビリティの視点でいえば表示された方がよい
    • 非表示にすることは間違いではないが、理解した上で非表示にする
    • また、私が上で書いたCSSだとあらゆるフォーカス線を消してしまうので、別の意味でよろしくない

    私なりに調べて上記だろうと考えたのですが、ご指摘や補足などいただけると助かります。

    なお、こちらの過去のトピックが大変参考になりました。

    「なんじゃこの青い枠?iOSでしか出てこないからバグか何かかな?消したいなコレ。おっ、ググって見つけたコードでサクッと消えるじゃん!」という感じだったのですが、色々勉強になりました(;’∀’

    3
    いいねをした人:
    #83112
    Olein_jp
    参加者
    562

    Webは万人に開かれたものであるべきなので、多くの健常者以外も便利に使えるべきと個人的には考えています。

    その考え方からすると、フォーカスを非表示にするというのは選択肢としてはありません。

    見た目の問題であれば、消さないという上でデザインの最適化を勧められることを個人的にはお勧めします。

    3
    いいねをした人:
    #83130
    のぶやん
    閲覧者
    22

    Olein_jpさん、

    アドバイスありがとうございました。Webでのノーマライゼーションについて考えられる、よい機会でした。

    Slackのオンラインコミュニティ含め、みなさまありがとうございました。

    3
    いいねをした人:
7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • トピック「目次ブロックから見出しへ遷移した際、見出しが青枠で囲まれる(iOSデバイス)」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。