WordPress

【WordPress】画像をマウスオーバーで(ちょっと)拡大表示する方法

広告:ページ内にてアフィリエイト広告を利用しています。

マウスオーバーで(ちょっと)拡大表示する

ブログ記事やリンク画像などで、マウスオーバーで画像がちょっと拡大する演出ってかっこいいですよね。

マウスオーバーでの画像拡大表示は CSS で簡単に実装できます。

ポイント

本記事では、

マウスオーバーで画像をちょっと拡大表示する方法を解説します。

細かい演出が読者に心地よさを提供しますね。

おすすめ副業

\ココナラ成功パターンを詳しく見たい方は こちら をクリックしてください/

PR

マウスオーバーで拡大するサンプル

もともとの画像よりも大きくする見せ方、もともとの画像のサイズ内で大きくする見せ方の両方を使い分けるのが素敵です。

2通りの拡大表示サンプルです。

拡大表示サンプル

サンプル画像
サンプル画像
サンプル画像

画像の上にマウスをオーバーすると、画像がちょっと大きくなります。

拡大表示サンプル

サンプル画像
サンプル画像
サンプル画像

画像の上にマウスをオーバーすると、画像がちょっと大きくなります。

画像のもともとのサイズよりは大きくなりません。

拡大表示方法①:マウスオーバーで画像をちょっと大きくする方法

簡単な CSS を使って実現できます。

サンプル画像

step
1
画像ブロックに クラス を指定する

WordPress で画像を張り付けたら、任意のクラス名を指定します。

クラス名を指定する
  • 画像を配置する
  • 「追加 CSS クラス」に任意の クラス名 を設定する

step
2
CSS を設定する

CSS を設定します。

ポイント

サイト全体で利用する場合は、WordPress の設定画面から「外観」→「カスタマイズ」→「追加CSS」に記載します。

該当の記事内のみで利用する場合は、「カスタム HTMLブロック」に記載します。

CSS を定義する
  • 「カスタム 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
2
CSS を設定する

CSS を設定します。

ポイント

サイト全体で利用する場合は、WordPress の設定画面から「外観」→「カスタマイズ」→「追加CSS」に記載します。

該当の記事内のみで利用する場合は、「カスタム HTMLブロック」に記載します。

CSS を定義する
  • 「カスタム 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;」を指定し、枠外は非表示にする

WordPress もっと!お役立ちテクニック

WordPress のお役立ちテクニックはこちら

まとめ:画像をマウスオーバーで(ちょっと)拡大表示する方法

マウスオーバーで画像をちょっと拡大表示する演出は、簡単な CSS で実現可能です。

ポイント

  • ちょっと拡大表示する演出では、画像をそのまま大きくするケースと、元画像のサイズ内で大きくするケースがある
  • いずれも簡単なCSSで実現できる

素敵な演出で、素敵なサイトを作ってくださいね。

40代・50代「会社員におすすめ」の在宅でできる副業5選

40代・50代「会社員におすすめ」の在宅でできる副業5選(初心者でもできる)

40代、50代だからこそ気が付く、不安に思う将来設計、しかし今から大きなチャレンジは難しい。投資もリスクが多い。いまこそやってみたいのが「副業」です。本記事では40代、50代におすすめの副業5選を紹介します。

続きを見る

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業3選

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業3選(初心者でもできる)

20代、30代の主婦にとって、これからの人生設計、お金の心配は少なからずありますね。20代、30代の主婦が不安に思うお金の問題を少しでも解決するべく、初期投資が無い(または少ない)主婦におすすめの副業ができれば安心ですね。記事では、20代、30代専業主婦におすすめの副業3選を紹介します。

続きを見る

地方がチャンスのおすすめ副業を紹介!

地方で快適に暮らす!地方がチャンスのおすすめ副業を紹介!在宅でパソコンがあれば「できる」副業

都会は住みにくい!地方の方が自然もあり、ちょうど規模の街で素敵に暮らすのは人生設計として最高ですね。しかし地方は本業の給料が低いのがネック、そこで是非お勧めしたいのがインターネットでできる副業です。本記事では、地方で快適に暮らす!おすすめ副業を紹介します。ゆるーくまったり人生過ごしたいですね。

続きを見る

この副業
アフィリエイトスクール
ノートパソコン
もっと WordPress のノウハウを知りたいときは

WordPress の情報、テクニック一覧はこちらをクリック!

クリックアイコン

WordPress のおすすめテーマ

あなたのブログを強力にアピールし、読者を惹きつける、

魅力的なウェブサイトを手軽に作りたいですか?

そんな方に オススメのテーマが「AFFINGER」 です。

「AFFINGER」テーマを使えば、SEOに強く、集客力がアップし、

上級者でも満足できる、魅力的なウェブサイトが作れます。

ブログアフィリエイトを本気で戦うなら、「AFFINGER」の威力を体感してください。

\ WordPress のおすすめテーマ「アフィンガー」を詳しく見る /

AFFINGER の紹介(メリット・デメリットを紹介)

PR
―― 今日のおみくじ ――

第 97 番

大吉


今日のメッセージ

大人になったら親に「ここまで育ててくれてありがとう」と伝えよう。その一言で親の苦労は報われる。
ブログの始め方
レンタルサーバー
WordPress
AFFINGER

ブログランキング・にほんブログ村へ  

Presented By Boon Boon Blog .Com

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

電気通信事業法改正に伴う表記