【WordPress・CSS】画像をマウスオーバーした時にゆっくり拡大する方法

2015/11/11 2018.02.23

管理人コラム

こんにちは〜編集長のまるおです。今回は、えふまが初のWordPress記事を書きたいと思います。こういう情報系の記事って怖いですよねぇ、専門性の高い人が見たら「あー間違ってる」って分かっちゃうから（未熟）

この記事では「画像をマウスオーバーしたときにゆっくり拡大する方法」を紹介していきます。このサイトでもトップページのサムネイルに適用されてますよ〜。

また、画像を拡大する方法と一緒に、これをWordPressのサムネイルに適用するための方法も書いていきたいと思います。

あなたがどのWordPressテンプレートを利用していようと関係なく、使える情報ですので、サイト内にワンポイントアクセントを加えたい方はぜひ実践してみてください。

画像をマウスオーバーしたときにゆっくり拡大する方法

まずは単純に画像を拡大させてみる

画像をふわっと拡大するのは意外と簡単です。

[HTML]

<img src="画像URL" alt="画像" />

こんな画像が置いてあったとして。

[CSS]

img{
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.5s;
}

img:hover{
-moz-transform: scale(1.1,1.1);
-webkit-transform: scale(1.1,1.1);
-o-transform: scale(1.1,1.1);
-ms-transform: scale(1.1,1.1);

}

このコードをCSSに記入し、適応させるだけです。

とりあえず何も考えず、これをCSSに入れてみましょう。すると。

ちゃんと拡大されるようになりましたね。（画像にマウスを合わせてください）

しかし、これだと少し問題があるんです。
それは「画像が拡大することで、サイズがいちいち変わってしまうことと・枠をはみ出してしまうこと」です。

こんな風にいちいちサイズが変わるんじゃデザイン的にも扱いづらいし、あまりかっこ良くない。

[HTML]

<div class="power"><img src="画像URL" alt="画像です" /></div>

そこで、こんな感じに画像をdivタグで挟んで、
適当なclass名をつけましょう。今回はclass名を「power」としました（本当に適当）

そのpowerに対して、CSSでこういう記述をしましょう。

[CSS]

.power{
max-width:300px;
max-height:200px;
overflow:hidden;
}

こうすることで、画像の横幅縦幅がこの数値を超えないようになりました。

あとは、先ほど書いたCSSにも「.power」を先頭に足してあげます。

[CSS]

.power{
max-width:300px;
max-height:200px;
overflow:hidden;
}

.power img{
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.5s;
}

.power img:hover{
-moz-transform: scale(1.1,1.1);
-webkit-transform: scale(1.1,1.1);
-o-transform: scale(1.1,1.1);
-ms-transform: scale(1.1,1.1);

}

CSSがこうなればオッケーです。では画像を見てみましょう。

すると、さっきとは違って、画像が拡大しているのに枠をはみ出ないようになりましたね。

ポイントはimgタグをdivタグで挟むこと

今回でのポイントは、imgタグをdivで挟むことです。
画像が枠を出ないようにする方法は、imgタグだけではできません。

divタグを外枠として、縦横のサイズを固定することによって、中の画像がその外枠をはみ出さなくなる。という方法を取る必要があるためです。

WordPressのサムネイル画像に拡大を適応させる

じゃあこれをWordPressのサムネイルに対して行っていきます。ここまで分かっていても、これをWordPressに適用しようとした途端、よく分からなくなったりするんですよねぇ。

とは言っても、なーんにも難しいことなんてありません。さっきdivタグで挟んでいたimgタグをWordPress専用のタグに変更するだけです。

[HTML]

<div class="power"><img src="画像URL" alt="画像" /></div>

これを

[HTML]

<div class="power"><?php the_post_thumbnail(); ?></div>

こうやって変更するだけです。簡単ですね。

これで完了です、お疲れさまでした。~~まんま、この方法でやっているものがうちのサイトのトップページにあるので良かったら是非見てみてください~~。

あ、この記事が参考になったら是非SNSとかでシェアしてもらえると嬉しいです。こういう記事を書く気力が湧いてきます！

【えふまが厳選！】初めてWordPressブログを始める人にオススメなテンプレート６種類

パソコンでやるより早い！！仕事を超効率化できるiPhoneアプリ４つ！

	編集長：まるお（丸尾）フリーランスのWebデザイナーとして活動中、週４日で会社員もしてます。WEBデザインはデジタルハリウッドで学びました、えふまが！の編集長してます。