【コピペOK】クリック時の謎の点線を消す！CSSでサイトのデザイン品質を上げる方法

ウェブサイトを制作していると、「この謎の線、何とかならないかな？」と思う瞬間がありませんか？特に、リンクやボタンをクリックしたときに現れる点線のアウトライン。

今回は、この「謎のアウトライン」をサクッと消して、サイトのデザインクオリティを一段階アップさせる方法をご紹介します。

メニューをクリックしたときの「これ」、気になりませんか？

ElementorやWordPressでサイトを作っていると、上図のようにリンクや画像をクリックした瞬間に、点線で囲まれることがあります。

これはブラウザの標準機能で、現在どの要素が選択されているか（フォーカスが当たっているか）を分かりやすく示すためのものです。

しかし、個人的には、これがデザインの統一感を損ない、クオリティを下げてしまっていると感じています。せっかく綺麗にデザインしたのに、この線が表示されるだけで少し残念な気持ちになりますよね。

「ユーザーエクスペリエンス（UX）の観点からは、フォーカスがどこにあるか示すために必要」という意見もありますが、今回はまず「デザイン性を優先してこれを消す方法」に絞って解説します。
（※アクセシビリティに配慮した代替案については、別の記事で詳しく解説予定です。）

解決法：CSSを1行追加するだけ！

この問題を解決するのは非常に簡単です。以下のCSSコードをサイトに追記するだけです。

▼コピー用コード

body :focus {
  outline: none;
}

このコードは、「ページ上のあらゆる要素（body内の:focusが当たった要素）に対して、アウトラインを非表示にする（outline:none;）」という意味です。

WordPressでの追記方法

1. WordPressのダッシュボードから「外観」→「カスタマイズ」をクリックします。
2. カスタマイザーメニューの中から「追加CSS」を選択します。
3. 表示された入力欄に、上記のCSSコードを貼り付けます。
4. 最後に「公開」ボタンを押して完了です。

これだけで、サイト全体でクリック時の点線が表示されなくなります。

まとめ

今回は、リンクやボタンをクリックしたときに表示される「謎のアウトライン」を消すための簡単なCSSテクニックをご紹介しました。

• 問題点： クリック時に表示される点線が、デザインの質感を損なうことがある。
• 解決法： body :focus { outline: none; } をCSSに追加する。

たったこれだけの作業で、サイトの見た目がスッキリし、よりプロフェッショナルな印象を与えることができます。ぜひあなたのサイトでも試してみてください。