わかりやすくクリックしてもらえるリンクのCSSサンプル

CLICKリンク

サイトやブログでは、リンクって大切ですよね。たとえそれがリンクだったとしても、リンクと認識してもらえなければ、まずクリックされません。

リンクをよりクリックしてもらうためにはわかりやすさが大切です。今回はわかりやすいリンクにするためのCSSをサンプル付きでご紹介します。

クリックしてもらえるリンクのCSS 目次

  1. マウスオーバーでテキストの色が変わるリンクのCSS
  2. マウスオーバーで位置がずれるリンクのCSS
  3. マウスオーバーで画像が変わるリンクボタンのCSS
  4. マウスオーバーで半透明になる画像リンクのCSS

マウスオーバーで色が変わるリンクのCSS

説明するまでもないですよね・・。このブログのリンクにもつかっているCSSです。

サンプル

HTML

サンプルリンク

CSS

a {
	color: #F69; /* 通常のリンク色 */
}

a:hover {
	color: #F6B1C7; /* マウスオーバー時のリンク色 */
}

わかりやすいリンクの色で、下線のついたテキストであれば「あ、リンクだ」とわかってもらえると思いますが、マウスを乗せた時に色が変わることで、より安心してクリックしてもらえるようになります。

クリックしてもらえるリンクのCSS 目次へ

マウスオーバーで位置がずれるリンクのCSS

リンクにマウスをのせたらボコっとへこんだように位置がずれるリンクです。

サンプルリンク

HTML

サンプルリンク

CSS

.sample:hover {
	position: relative;
	top: 1px;
	left: 1px;
}

サイトのリンク全体にこのCSSを使うのは個人的に好きじゃないのですが、特に見て欲しいページへのリンクに使うと効果的だと思います。

クリックしてもらえるリンクのCSS 目次へ

マウスオーバーで画像が変わるリンクボタンのCSS

マウスをのせたら画像が切り替わるCSSです。画像切り替えには色んなやり方があるのですが、CSSでやる場合この方法が1番良いかと思います。

サンプルリンク

HTML

サンプルリンク

CSS

.sample {
	display:block;
	width:150px; /* 表示させたい画像分の横幅 */
	height:0;
	padding-top:40px; /* 表示させたい画像分の高さ */
	background: url(sample.jpg); /* 画像URL */
	overflow:hidden;
}

.sample:hover {
	background-position: left bottom; /* マウスオーバー時の画像位置 */
}

使用画像

サンプルリンク画像

画像が切り替わるしくみ

画像切り替わりイメージ

マウスを乗せたら画像が変わるしくみは、複数の画像をひとつにまとめて表示させる「CSSスプライト」というテクニックをつかっています。

画像の見えている位置をずらして、画像が切り替わっているようにみせています。

CSSスプライト用の画像とCSSがブラウザ上で簡単につくることができる素敵なWebサービスもあります。

The easiest way to create your CSS sprites - SpritePad(英語)

クリックしてもらえるリンクのCSS 目次へ

マウスオーバーで半透明になる画像リンクのCSS

マウスオーバーで画像が半透明になります。こちらの方法では簡単に画像が切り替わったように見せることができます。

サンプルリンク

HTML

サンプルリンク

CSS

a:hover img {
	opacity: 0.5; /* マウスオーバー時の透明度 */
	filter: alpha(opacity=50); /* マウスオーバー時の透明度 IE用 */
}

使用画像

サンプルリンク画像

透明度のCSSの数値は、0だと完全に透明(透明度100%)、opacity1filter: alpha(opacity)100で完全に不透明(透明度0%)になります。

クリックしてもらえるリンクのCSS 目次へ

安心してクリックできるリンクづくり

こんなブログは嫌だ!やってはいけないブログのHTMLやCSS」の記事でも書いたように、「リンクかな?」と思っていてもリンクじゃなかったりする場合や、「リンクだと思うけど、どなんだろう・・」と思わせるような、わかりづらいリンクにはしたくないですよね。

一般的なリンクの認識を激しく崩さないように、クリックしてもらえる、クリックしたくなるようなリンクづくりを研究していきましょう。

Pagetop
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。