Chromeクリック時に現れた、黒い太枠(アウトライン)を表示させない設定

スマホがiosの方は下のボタンを押してからメニューアイコンをタップするとご覧いただけます


Chromeアップデートによりクリック時に現れた、黒い太枠(アウトライン)を表示させない設定


1. これは何なのか説明

赤枠の様なリンクをクリックすると、通常その記事へ飛ぶように設定されているのですが

リンク説明1

なんと(@_@)画面に黒い太枠が表示されるようになってその残存がイケてない!

リンク説明2

この太枠は今どこにフォーカスがあたっているかユーザビリティを考慮したブラウザの補助機能でボーダーではなくアウトラインで構成されています。

マウスがない場合など、「TABキー」等で次の項目をフォーカスできます。

リンク説明2

しかし、クリックしたその場でフォーカスされるならまだしもリンク先に黒い太枠が表示されるようになってその残存がイケてない!

ほとんどのサイトでリンクにはホバー等のデザインを施してありますので、黒い太枠が表示されると格好悪くなってしまいます。

よくあるサイト側が設定しているホバー機能は、
カーソルを近づけると色が表示されたり、変わったり、動いたりするようになっています。

例えばこんな感じは、皆さんご覧になったことがあるかと思います。

ホバー機能2

違いがお解りになったかと思います。

ちなみに「Microsoft Edge」では通常通りでアウトラインは表示されませんでした。

という事は、ブラウザの設定に違いがあるという事が解ります。

2.Chromeブラウザの設定

Chromeブラウザを開きます。(オフラインでも大丈夫です)

  1. Chromeブラウザ右上の3点をクリックし、「設定」をクリックします。


  2. 左側メニュー項目で、「既定のブラウザ」をクリックし、下へスクロールすると、「詳細設定」がありますので、クリックします。。


  3. 「詳細設定」画面を下の方へスクロールすると、「ユーザー補助機能」の中に「フォーカス中の項目をハイライト表示する」にチェックされていると思いますので、それを外します。


これで設定は終わりです。

念のため一度ブラウザを閉じてから、開きなおしてみましょう!

どこのサイトのリンクをクリックしても, 黒い太枠(アウトライン)は、表示されなくなりました。

5. まとめ

いかがでしたでしょうか?

突然現れた時はびっくりしました(@_@)

CSSを調べてみたりしたけれど

自分のサイトだけではなく、どのサイトでも「アウトライン」が表示されたので「Microsoft Edge」で確認しました。

「Microsoft Edge」は通常通りでアウトラインは表示されませんでした。という事は💡

Chromeブラウザの「設定」だと気づきました。

蓋を開ければ単純な結果でした。



TOP

ページの最後です!メニューアイコンを押してください💕