フリーランス・個人事業主として独立を目指すデザイナー、副業を始めたいデザイナーを応援します! 自立支援に役立つ初心者向けWordPress情報も随時アップします!

画像の差し替えをCSSで行う方法

読了目安時間は約 3 分です。

WordPressで画像を差し替える必要があって、CSSで簡単に対応できないかと思って調べたことを備忘録的に記事にいたします。

なるべくCSSだけで画像を置き換えたかったのですが、コーディングはCSSまでしかできません!という方にはオススメです。

以下は「○○○○○○.jpg」という画像を「△△△△△△.jp」に置き換える例です。

HTML

<div class="sample">
<img src="https://○○○○○○.jpg">
</div>

CSS

.sample img {
  display: none;
  width: 400px;
  height: 300px;
}

.sample {
  background-image: url("https://△△△△△△.jpg");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  background-size:contain;
}

img {display: none;}で差し替え前の画像を消し、background-imageで背景画像として置き換えます。
background-repeat: no-repeat;で画像をひとつだけ表示させます。
widthheightでサイズ指定しないとうまく表示できません。

差し替えだけでなく、単に画像を配置したい場合でも使えます。:hoverを使ってマウスホバーで変えることもできます。

今まで画像を配置できなかったところに差し込んだり、いろいろ応用できますので、ぜひお試しください。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
目次
閉じる