マウスオーバーでリンク付きの文字や画像を拡大させる方法!

どうもユウです!

ブログを見ていると、マウスオーバーした際に、
リンク付きの文字や画像が拡大されることがありますよね?

とあるコードを追加するだけで、設定が完了するので、
今回はそのやり方についてまとめてみました!

やり方について!

私のブログでは、リンク付きの文字や画像にマウスを乗せると、
文字や画像が拡大されるように設定しています。

 

試しにこちらの画像にマウスを乗せてみてください。

 

これは、テーマ編集の『design.css』に、
コードを追加するだけで設定できます。

※使用しているテンプレートによっては、
『design.css』という項目はないかもしれません。
例えば、賢威7では『base.css』が代わりにあたります。

 

追加するコードはこちら!

a {
display: inline-block;
transition: .4s;
-webkit-transform: scale(1);
transform: scale(1);
}
a:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}

『design.css』の一番最後に、
上記のコードを追加するだけで構いません。

 

このコードを追加するだけで、
リンク付きの文字や画像が拡大されるようになるので、
ぜひ試してください☆

 

まとめ!

マウスオーバーで文字が動いたり、
画像が拡大されたり、色が変わったり、
設定次第では様々な効果が楽しめます。

クリック率を上げる為にも効果的な対策ですので、
上手く活用していきましょう!

サイト運営者情報

わいえふけー代表28歳。HP制作、Web集客、アフィリエイト、コンサルタント業務、セミナー主催、輸入ビジネスなどを、夫婦二人で行っている。『妻カナ』『愛犬マロン』『ハムスターだいふく』の2人と2匹暮らし。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です