WordPress [CSS] 画像に枠線を表示する

CSSで画像に枠線を表示する。HTMLのimgタグでborderを指定しても可能だが、CSSで対応することでOn/Offが自在にできる。WordPressのようなCMSを使わなかったとしても、HTMLで全部するかHTML+CSSで作成するかは利便性に大きな違いがある。また、SEOとしても後者のほうがよろしいらしい。

適用前の状態
適用後の状態
CSSサンプルコード

適用前の状態

上記の図の上段は純粋に画像を掲載した場合のimgタグ、下段は画像がありクリックすることができるようになっているのでaとimgタグ。今回はWordPressのあるテーマをWordPressから書き換えながら検証してみた。WordPressのテーマには画像に枠がついていないものがあるが、付いていたほうが分かりやすいと筆者は思う。

スポンサードリンク

適用後の状態

上記の図はCSSに追記した例。どちらも正しく表示されている。

CSSサンプルコード

/* img */
.post-content a:link img{
	border	:1px solid #333333;
	padding	:3px;
}
.post-content p img{
	border	:1px solid #333333;
	padding	:3px;
}