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

WordPressサイトで画像を表示したとき、「画像の周囲に見覚えのない枠線が出る」「角が丸くなる」「水色や青色の線が表示される」といったことがあります。

原因として、テーマやプラグインが画像へ追加したCSSクラスや、画像を囲んでいるリンクのスタイルなどが考えられます。

特にBootstrap 3を使用した古いテーマでは、画像に img-rounded や img-thumbnail といったクラスが使われている場合があります。

この記事では、img-rounded の正しい意味と、画像の不要な枠線・角丸・影を安全に取り除く方法を解説します。

1 img-roundedとは？

img-rounded は、WordPress本体が標準で画像へ付けるクラスではありません。Bootstrap 3では、画像の角を丸くするための画像用クラスとして img-rounded が用意されていました。そのため、Bootstrap 3を利用しているテーマや、テーマ・プラグイン独自の処理によってHTMLへ追加されていることがあります。

Bootstrap 3では、画像関連のクラスとして代表的に次の3種類がありました。

• img-rounded：画像の角を丸くする
• img-circle：画像を円形にする
• img-thumbnail：画像をサムネイル風の枠付き表示にする

つまり、img-rounded 自体は「枠線や余白を付けるためのクラス」ではありません。画像に枠線や余白が表示されている場合は、テーマ側の追加CSSや別のクラスが原因になっている可能性があります。

2 Bootstrap 4・5ではimg-roundedではなくroundedを使う

img-rounded はBootstrap 3で使われていたクラスです。Bootstrap 4以降では画像専用の img-rounded ではなく、要素の角を丸くする汎用クラス rounded が使われます。

現在のBootstrap 5では、たとえば次のように記述します。

<img src="sample.jpg" class="rounded" alt="サンプル画像">

枠付きのサムネイル表示には、現在も img-thumbnail が用意されています。

<img src="sample.jpg" class="img-thumbnail" alt="サンプル画像">

3 画像に枠線が出る原因を確認する

画像の周囲に線が表示されているからといって、必ず img-rounded が原因とは限りません。CSSでは見た目が似ている装飾として、border・outline・box-shadow などがあります。

たとえば、次のCSSはいずれも画像周辺に線や影を表示します。

img {
	border: 1px solid #ccc;
}

img {
	outline: 2px dotted #87ceeb;
}

img {
	box-shadow: 0 0 0 2px #ddd;
}

また、画像そのものではなく、画像を囲んでいるリンクに線が付いている場合もあります。

<a href="photo.jpg">
	<img src="photo.jpg" alt="写真">
</a>

この場合は画像へ border: none; を指定しても直りません。まずブラウザの開発者ツールで画像やリンクを選択し、どのCSSが実際に適用されているのか確認することが大切です。

4 img-roundedの角丸だけを消す方法

img-rounded による角丸だけを消したい場合は、次のように border-radius をリセットします。

.blog-post img.img-rounded {
	border-radius: 0;
}

記事部分だけを対象にするため、.blog-post を付けています。サイト全体の img-rounded を変更する必要がない場合は、このように対象範囲を限定した方が安全です。

5 枠線・余白・影・角丸をまとめて消す方法

テーマ独自のCSSによって img-rounded に枠線や余白、影などが追加されており、それらをすべて取り除きたい場合は次のように指定できます。

.blog-post img.img-rounded {
	border: 0;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
}

これで画像自体に設定された border・border-radius・padding・box-shadow をリセットできます。

ただし、最初からすべてをリセットするのではなく、開発者ツールで原因となっているCSSを確認し、必要なプロパティだけ修正する方が適切です。

6 HTMLのstyle属性へ直接書く方法は？

画像1枚だけを修正したい場合は、HTMLの style 属性で指定することもできます。

<img
	src="https://example.com/wp-content/uploads/sample.jpg"
	alt="サンプル画像"
	style="border:0; border-radius:0; padding:0; box-shadow:none;"
>

ただし、複数の画像に同じ修正を行う場合は、画像ごとに style を書くよりもCSSへまとめて指定した方が管理しやすくなります。

7 最初から!importantを使う必要はない

CSSの修正例として、次のような記述を見かけることがあります。

border: none !important;

!important は他のCSSより強く適用させる方法ですが、最初から多用すると、あとからCSSを変更しにくくなります。まずは通常のCSSで指定し、それでもテーマ側の強い指定に負けてしまう場合だけ使用を検討します。

たとえば通常は、まず次のように指定します。

.blog-post img.img-rounded {
	border: 0;
	border-radius: 0;
}

テーマ側にも !important が使われており、どうしても上書きできない場合は、原因を確認したうえで必要な項目だけに使用します。

8 水色の点線ならoutlineの可能性もある

画像や画像リンクをクリックしたときだけ水色・青色の点線や枠が表示される場合は、border ではなくフォーカス表示の outline や box-shadow の可能性があります。

特に次のようなリンク画像では、キーボード操作でリンクへフォーカスした際に枠が表示されることがあります。

<a href="/sample/">
	<img src="sample.jpg" alt="サンプル">
</a>

このフォーカス表示は、現在どのリンクを選択しているのかをキーボード利用者が判断するための重要な表示です。そのため、原因を確認せずサイト全体へ次のようなCSSを書くのはおすすめできません。

a:focus {
	outline: none;
}

デザイン上変更する必要がある場合は、フォーカス表示そのものを完全に消すのではなく、別の分かりやすい表示へ変更します。

9 画像だけに水色の枠線を付けるCSSが残っていないか確認する

テーマのCSS、子テーマの style.css、追加CSSなどに、過去のテスト用CSSが残っているケースもあります。たとえば次のCSSが存在すれば、当然ながら img-rounded の画像に水色の点線が表示されます。

.img-rounded {
	border: 4px dotted skyblue;
}

この場合、原因はBootstrapではなく、このCSSそのものです。不要なテストCSSであれば削除してください。

10 class="img-rounded"自体を削除してもよい？

角丸表示そのものが不要で、テーマやJavaScriptが img-rounded を必要としていないのであれば、HTMLからクラスを削除するのが最もシンプルです。

修正前：

<img src="sample.jpg" class="img-rounded" alt="サンプル画像">

修正後：

<img src="sample.jpg" alt="サンプル画像">

ただし、WordPressテーマやプラグインが自動的にクラスを追加している場合は、HTMLを手作業で修正しても再び付与されることがあります。その場合は、どのテーマ・プラグイン・テンプレートがクラスを追加しているのか確認します。

11 画像をレスポンシブ表示するCSSとは別に考える

角丸や枠線を消すことと、スマートフォンで画像を画面幅に収めることは別の問題です。テーマ側でレスポンシブ画像の設定がない場合は、一般的には次のようなCSSを使用できます。

.blog-post img {
	max-width: 100%;
	height: auto;
}

max-width: 100%; によって画像が親要素より大きくなることを防ぎ、height: auto; によって縦横比を維持します。

width: 100%; をサイト内すべての画像へ指定すると、小さな画像まで強制的に拡大される場合があるため、単純なレスポンシブ対応では max-width: 100%; の方が使いやすいことがあります。

12 画像の枠線が消えないときの確認手順

CSSを追加しても画像の枠線や角丸が消えない場合は、次の順番で確認すると原因を特定しやすくなります。

1. ブラウザの開発者ツールで画像を選択する
2. border が指定されていないか確認する
3. border-radius を確認する
4. padding を確認する
5. box-shadow を確認する
6. 画像を囲む <a> の outline や box-shadow を確認する
7. どのCSSファイルから指定されているのか確認する
8. 必要なプロパティだけCSSで上書きする

見た目だけで「img-roundedが原因」「borderが原因」と決めつけず、実際に適用されているCSSを確認することが重要です。

13 完成例

たとえば、img-rounded が付いている画像から角丸・枠線・余白・影をすべて取り除きたい場合は、次のCSSを追加します。

.blog-post img.img-rounded {
	border: 0;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
}

HTMLはそのままでも使用できます。

<p>
	<img
		src="https://wordpress-tips.net/wp-content/uploads/2025/10/001-1.jpg"
		class="img-rounded"
		alt="柴犬"
	>
</p>

また、img-rounded 自体が不要であれば、クラスを削除する方法もあります。

14 まとめ

img-rounded はWordPress標準のクラスではなく、Bootstrap 3などで画像の角を丸くするために使われていたクラスです。Bootstrap 3標準の img-rounded が枠線やpaddingを付けるわけではなく、枠付きサムネイル表示は img-thumbnail という別のクラスです。

画像に不要な枠線や水色の線が表示された場合は、最初から border:none !important; を追加するのではなく、開発者ツールで border・outline・box-shadow・border-radius などを確認しましょう。画像を囲むリンクのフォーカス表示が原因の場合もあるため、アクセシビリティ上必要な outline を理由なくサイト全体から削除するのも避けます。

角丸だけを消すなら border-radius:0;、テーマ独自の枠線や影などもまとめて消したい場合は、対象範囲を限定したCSSで必要なプロパティだけリセットする方法が安全です。