WordPress上のリンクをクリック中に現れる黒枠を消すCSS設定

いつの頃からか WordPress ブログ内のテキストリンクをクリックしている最中、黒い枠が現れるようになりました。ブラウザに依らず発生するこの黒枠を、どのブラウザでも消えるような CSS 設定を調べてみます。

WordPressで構築している弊ブログ上において、テキストリンクをクリック中に黒い枠のようなのが現れることに気づきました。

図1.テキストリンククリック中に現る黒枠

特にFirefoxはさすがに放置するには見苦しいので、CSSでこの黒枠を消しされたいと思います。

まず思い付くのがリンクタグの :focus 疑似クラスに対して、 outline: none を設定するというもの。Firefoxではこれで消えるのですが、Chromeには効果が無いので不十分。

a:focus {
    outline: none;
}

a:focus {

outline: none;

}

そこで outline の装飾指定で、透明に配色してしまうというハックの登場です。これでFirefox、Chrome共にクリック中の黒い枠が出なくなりました。

a:focus {
    outline: 1px solid transparent;
}

a:focus {

outline: 1px solid transparent;

}

WordPress管理ページメニューの外観の中にある追加CSS に貼り付けてました。

図2.WordPressテーマの追加CSS

参考）

created by Rinker

¥2,486 (2024/04/26 20:54:10時点 Amazon調べ-詳細)