オンマウスで画像に枠線をつけてみよう

オンマウスで画像に枠線TOP

 

ドロップシッピングのショップやネットショップ作成時、商品が沢山あるページがあると思います。

沢山ある商品画像の中から、マウスを載せた画像を注目してもらうために画像の枠に色のついた線を出したら、お客様も一目でどの商品画像をクリックしようとしてるかわかりますね。

今回は、商品画像にカーソルをあわせると、色のついた枠線をつける方法です。

Sponsored Links

オンマウスで出てくる枠線のサンプル

もしもドロップシッピングで人気の商品「やさしいジョイントマット」の画像でサンプルを作ってみました。

試しに以下の画像にマウスを載せてみてください。

 

ジョイントマットバナー ジョイントマットバナー ジョイントマットバナー

 

商品画像にカーソルをあわせると、赤い枠線がでできましたね。

これは、CSS(スタイルシート)で実装しています。

では、早速、実装してみましょう。

 

 

オンマウスで画像に枠線を付ける方法

まずは、枠線を付けたい画像を以下のようにソースで囲います。

 

画像が1枚の場合

 

 

テーブルに並べてある画像を丸ごと枠線を付ける場合

 

画像にリンクが貼っていないと枠線は出ないので注意してくださいね

 

 

Sponsored Links

CSS(スタイルシート)に追加記述しよう

続いて、画像に枠線を付けたいCSS(スタイルシート)を開き、以下を追加記述します。

できましたか?

あとは、あなたの好きな枠線の太さや色を調整してみてくださいね。

【サンプル】

ジョイントマットバナー ジョイントマットバナー ジョイントマットバナー

Sponsored Links

よろしければシェアお願いします

Sponsored Links