デザインって大事なの -32ページ目

デザインって大事なの

デザインのことから、お仕事、日常の雑記まで、なんでも書いているブログ

ボタンなどを設置したときにマウスをあてると動く、ボタンってありますよね。


例えば下記の画像のような感じ。


デザインって大事なの


マウスをあてると少し動きますよね。



ここがポイント
ボタンを押している感じを出したいときの小技になります。

※リンクしているボタン(画像)のみが動きます。



CSS編集用デザインの場合

デザイン変更から[CSSの編集]を選択して下記を最後でも良いので貼り付けます。

.botan1 a:hover{
position:relative;top:2px;left:2px;
}



CSS編集が出来ないデザインの場合

フリープラグイン、フリースペースのどちらかに貼り付けます。

※フリースペースに貼り付ける場合は改行を消して貼り付けて下さい。

<style type="text/css">
.botan1 a:hover{
position:relative;top:2px;left:2px;
}
</style>



実際に動かすために

動かしたいボタン(画像)の部分に、記事本分の中に作成するボタンなら

[HTMLタグを表示]を選択して。

<div class="botan1">動かしたい画像のHTML</div>
のように
<div class="botan1">と</div>で囲ってあげればボタンのように動くようになります。



詳細説明

top:2px;left:2px;
という部分が動く幅を決めています。


2pxという数字を変えてあげることで動く幅が変わりますので、自分の好みの動きに調節して見て下さい。