画像に自動で付く点線等の「img-rounded」クラスの影響と解除方法

WordPressやBootstrap系テーマを使っていると、画像に自動で
class="img-rounded" が付与されることがあります。
これは、角丸や枠線を付けるためのスタイルですが、不要な枠線や余白、
あるいは水色のドット線が出てしまうことがあります。
今回はその原因と、確実にリセットする方法を紹介します。

1 実装のポイント

「img-rounded」は、Bootstrapや一部テーマで自動的に追加される画像装飾用クラスです。
主なデフォルト設定は以下の通りです。

.img-rounded {
  border-radius: 6px; /* 角丸効果 */
  border: 1px solid #ddd; /* グレーの枠線 */
  padding: 4px; /* 内側余白 */
}
    

この枠線が青背景や白画像と重なると、「水色のドット線」のように見える場合があります。
そこで、以下のCSSを追加してリセットすることで、画像を完全にフラットに戻せます。

2 汎用CSS

HTMLに直接style="border:none !important;"を貼り付けます。

<img src="https://sample.com/wp-content/uploads/20××/××/sample.jpg" alt="××××" style="border:none !important;" /></p>
    

3 完成イメージ

4 まとめ

class="img-rounded" は一見便利な装飾用クラスですが、テーマによっては予期せぬ枠線やドット線を発生させます。
今回のようにhtmlに直接CSSで上書きしておけば、どんな背景色でも美しくフラットな画像を表示できます。