ブログ記事やリンク画像などで、マウスオーバーで画像がちょっと拡大する演出ってかっこいいですよね。
マウスオーバーでの画像拡大表示は CSS で簡単に実装できます。
ポイント
本記事では、
マウスオーバーで画像をちょっと拡大表示する方法を解説します。
細かい演出が読者に心地よさを提供しますね。
「アフィリエイトの始め方とブログの作り方を完全解説!」はこちら
目次
マウスオーバーで拡大するサンプル
もともとの画像よりも大きくする見せ方、もともとの画像のサイズ内で大きくする見せ方の両方を使い分けるのが素敵です。
2通りの拡大表示サンプルです。
拡大表示方法①:マウスオーバーで画像をちょっと大きくする方法
簡単な CSS を使って実現できます。
step
1画像ブロックに クラス を指定する
WordPress で画像を張り付けたら、任意のクラス名を指定します。
- 画像を配置する
- 「追加 CSS クラス」に任意の クラス名 を設定する
step
2CSS を設定する
CSS を設定します。
ポイント
サイト全体で利用する場合は、WordPress の設定画面から「外観」→「カスタマイズ」→「追加CSS」に記載します。
該当の記事内のみで利用する場合は、「カスタム HTMLブロック」に記載します。
- 「カスタム HTML」 ブロックを配置する
- CSS を記載する
以下の CSS を記載します。
<style>
.myImage01 img {
transition: transform .6s ease;
}
.myImage01:hover img {
transform: scale(1.1);
}
</style>
ポイントです。
- サイト全体の「追加CSS」の方に記載する場合は、<style>タグの記載は不要
- 「transition」で動きに コンマ6秒を指定する
- 「transform: scale(1.1)」でマウスオーバー時に画像を 1.1 倍に拡大する
拡大表示方法②:マウスオーバーで元画像のサイズ内で画像をちょっと大きくする方法
簡単な CSS を使って実現できます。
step
1画像ブロックに クラス を指定する
WordPress で画像を張り付けたら、任意のクラス名を指定します。
- 画像を配置する
- 「追加 CSS クラス」に任意の クラス名 を設定する
step
2CSS を設定する
CSS を設定します。
ポイント
サイト全体で利用する場合は、WordPress の設定画面から「外観」→「カスタマイズ」→「追加CSS」に記載します。
該当の記事内のみで利用する場合は、「カスタム HTMLブロック」に記載します。
- 「カスタム HTML」 ブロックを配置する
- CSS を記載する
以下の CSS を記載します。
<style>
.myImage02 {
overflow: hidden;
}
.myImage02 img {
transition: transform .6s ease;
}
.myImage02:hover img {
transform: scale(1.1);
}
</style>
ポイントです。
- サイト全体の「追加CSS」の方に記載する場合は、<style>タグの記載は不要
- 画像ブロックのクラス( myImage02 )自体に、「overflow: hidden;」を指定し、枠外は非表示にする
まとめ:画像をマウスオーバーで(ちょっと)拡大表示する方法
マウスオーバーで画像をちょっと拡大表示する演出は、簡単な CSS で実現可能です。
ポイント
- ちょっと拡大表示する演出では、画像をそのまま大きくするケースと、元画像のサイズ内で大きくするケースがある
- いずれも簡単なCSSで実現できる
素敵な演出で、素敵なサイトを作ってくださいね。
WordPress のおすすめテーマ
あなたのブログを強力にアピールし、読者を惹きつける、
魅力的なウェブサイトを手軽に作りたいですか?
そんな方に オススメのテーマが「AFFINGER」 です。
「AFFINGER」テーマを使えば、SEOに強く、集客力がアップし、
上級者でも満足できる、魅力的なウェブサイトが作れます。
ブログアフィリエイトを本気で戦うなら、「AFFINGER」の威力を体感してください。
\ WordPress のおすすめテーマ「アフィンガー」を詳しく見る /

Presented By Boon Boon Blog .Com
広告の設置・収入について
当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。
当サイトは Google アドセンスを利用し、広告により収入を得ています。
当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。