差別化計画 リンクを工夫する

クリックしてもらうための小技紹介

このブログ内にあちこちにあるリンクの部分にマウスをあわせてみてください。

するとリンクの部分が右にズレますよね。
なんとなくクリックしたく・・・ならないですか、残念（笑）

でも、何もしないよりは、効果がありそうですよね。


という方法を今回は紹介します。

方法

ＣＳＳの編集画面を開きます。

そして、リンクの設定をするために

a:hover

という箇所を探してください。

見つかりにくい場合は簡単検索方法

 見つけたら次のように付け加えてください。

a:hover{
padding-left:3px;
}

間に何か他の記述があればそのままにして、一番下にでも書き加えてください。
その際には、必ず{ }の間に入れてくださいね。

「：」（コロン）と、「；」（セミコロン）を間違えないでください。よくある間違いです。見えにくいですしね。
コロンとセミコロンは半角です。ＣＳＳの編集で反映されていないのはこの理由であることがほとんどです。
ここからコピペすれば間違いはありません。

3pxという部分を変更すると、マウスをあわせたときにどれだけ動くか調整できます。

ちなみに、移動する方向を変える場合は、

▼下に移動

a:hover{
padding-top:5px;
}

▼左に移動

a:hover{
padding-right:5px;
}

▼上に移動

a:hover{
padding-bottom:5px;
}

と変えてください。

二つ合わせて、右下や左上とに移動させることも可能です。

rightやtopの記述が逆なのは、文字からの移動を意味するので、反対になっています。