リンク画像、テキストをへこませる方法(HTMLタグ)

ブログで画像の上にマウスのポインターを合わせると、

画像がへこむようなモノを見た事がありませんか?

 

今回は画像・テキストをへこませる方法について教えます。

 

画像を凹ませる理由

まず下の画像にマウスを合わせてみてください。

s-094

どうですか?動かないですよね?

 

次に下の画像にマウスを合わせてみてください。

s-094

マウスを合わせた時に画像が動いたはずです。

 

コレをやると訪問者の人が、

クリック可能な画像と直観的に分かるので便利です。

 

画像をへこませるためのHTML

へこませるためにはHTMLで記述してやれば、

画像・テキストリンク共にへこませれます。

 

<div class=”img-move”>凹ませたい画像</div>

 

上記のような感じでへこませたい、

画像の前に<div class=”img-move”>を入力、

最後に</div>で閉じればOKです。

 

クリック率が上がる可能性も

当ブログもまだ全ての画像は実施してませんが、

サイドバー、ヘッダーあたりをすれば、

残りは別にしなくても良いかな~と思ってます。

 

これをやったからと言って、

アクセス数が増える事はありませんが、

バナーのクリック数は増える可能性があります。

 

クリック出来ない画像と思う人も

訪問者の方にバナーをクリックしてもらって、

飛んだ先に販売ページ、メルマガ登録フォーム等、

何かしらのページがあるわけですから、

クリックしてもらうに越した事はないです。

 

中には「画像がへこまない=ただの画像」と、

思う人がいるかもしれません。

 

この場合バナーをクリックしてもらえず、

スルーされる恐れがあります。

 

画像がへこむ処理をしてる人も多いので、

「へこむ画像=クリック出来る」と、

無意識の内に判断してる可能性もありますし…

 

めんどくさいと思いますが、

クリックして欲しい画像リンクに関しては、

先ほど話したHTMLの記述を行っておきましょう。



teage
かずぱんへのご質問・ご相談はこちら

一人で悩まずお気軽にどうぞ^^


blue-toi


stockfoto_14612875_S

合わせて読みたい関連記事

コメントを残す

このページの先頭へ