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

WordPress

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

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

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

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

スポンサードリンク

【PR】職場の人間関係やパワハラ・セクハラでお悩みのあなたへ【退職代行大百科】

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

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

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

エリート社員

[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とかでシェアしてもらえると嬉しいです。こういう記事を書く気力が湧いてきます!

プロフィール画像 編集長:まるお(丸尾)
フリーランスのWebデザイナーとして活動中、週4日で会社員もしてます。WEBデザインはデジタルハリウッドで学びました、えふまが!の編集長してます。

iDeCo・ふるさと納税・仮想通貨の申告に対応、個人事業主・会社員の副業でも使えるおすすめ会計ソフト

1位:クラウド会計ソフト「freee」

もはやクラウド会計ソフトの界隈で知らない人はいない。それほどまでにシェアを広げているNo.1クラウド会計ソフト、それがfreeeです。すでにfreeeを利用している事業所数は100万を突破しており、提携しているクレジットカード会社・銀行の数が3630件以上、これは会計ソフトでナンバー1の数字です。

あなたの持っているクレジットカード・銀行口座を登録することで取引明細を自動で登録!わざわざ手で振込先名や金額を打ち込む必要がありません。

明細の仕分けを行うには、パソコンはもちろんのこと、配信されているfreeeアプリを使ってスマホ・タブレットからでも可能です。一度仕分けした項目は次回以降、同じ内容で自動登録します。アプリを使えば移動中の電車内でも経理作業を完了できるため、経理時間の短縮・コストの削減に必ず貢献します。

最近話題になっている「ふるさと納税」「個人型確定拠出年金iDeCo」にも対応。専用フォームが用意されており質問に答えるだけで申告書に自動入力してくれます。また、日本の会計ソフトでは初となる、「仮想通貨の申告」にも2018年2月上旬に対応!

取引明細の仕分けを繰り返して行くことで、年末には自動的に確定申告書・青色申告決算書が完成。使えば使うほどあなたを楽にしてくれる、それがクラウド会計ソフトfreeeです。無料トライアルがあるので使用感を先に知りたい人でも安心して使えます!

【PR】職場の人間関係やパワハラ・セクハラでお悩みのあなたへ【退職代行大百科】

えふまが!公式アカウントをフォローして最新情報を受け取りましょう!