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

WordPress

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

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

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

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

スポンサードリンク

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

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

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

エリート社員

[HTML]

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

[CSS]

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

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

エリート社員

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

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

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

[HTML]

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

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

[CSS]

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

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

[CSS]

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

エリート社員

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

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

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

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

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

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

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

[HTML]

これを

[HTML]

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

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

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

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

シェアNo.1 のクラウド会計ソフト「freee」

もはやクラウド会計ソフトの界隈で知らない人はいない。それほどまでにシェアを広げているNo.1クラウド会計ソフト、それがfreeeです。freeeはクレジットカード会社や銀行と連携しており、あなたのクレジットカード・銀行口座を登録することで明細を自動登録!わざわざ手で振込先名や金額を打ち込む必要がありません。

一度仕分けした項目は、次回以降同じ内容で自動登録してくれます。その仕分けはスマホやタブレットからでも可能、専用のアプリを使うことで移動中の電車内でも経理作業を完了できるため、必ず時間短縮・コストの削減になります。

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

出先全てを仕事場に!外で作業するフリーランスには必須なモバイルルーター「WiMAX」

ケータイのデザリングで通信量を使いたくないそこのあなた!出先に都合よくフリーWi-Fiがあるとは限りません。デザリングを使い続ければいずれ通信量の上限が来てしまいます。フリーランスは常に家で仕事をしているわけではなくカフェやファミレス・図書館を仕事場にすることもあります。

あなたが全ての場所で快適に仕事をしたいなら、Wi-Fiをどこでも使えるWiMAXは外で作業するフリーランスには必需品です。月間通信量の上限なし、下り速度最大440Mbps、全国人口カバー率90%以上・全国実人口カバー1億人達成の安心感、これさえ持っておけば通信上限に悩むことは一切ありません。通信量を気にせず使うならWiMAXがオススメです!

インターネットで仕事を取るならクラウドソーシングサービスNo.1の「ランサーズ」

「会社を辞めてフリーランスになりたい、でも仕事の取り方がわからない…。」そんな不安を抱いたことはありませんか?実績がない段階で仕事を取るのは難しいものです。

しかし、ランサーズなら手間な営業をかけることなく仕事を探すことができ、実績のないフリーランスの最初のステップとしても最適!

利用者数が40万人を超え、依頼件数も150万件を突破、依頼総額は1600億円を超えており、間違いなく日本最大級のクラウドソーシングサービスです!

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