よくマウスをあてると画像、ボタンなど透過させて少し色が変化するものを見たことはないでしょうか。
例えば下記のような感じです。
透過する割合も変更することが出来ます。
また、透過ですので背景の色によって、見え方も当然変わってきます。
- ここがポイント
- 色が変化することでクリック出来る画像であることを強調することが出来ます。
ＣＳＳ編集用デザインの場合
デザイン変更から[ＣＳＳの編集]を選択して下記を最後でも良いので貼り付けます。
.botan a:hover{
opacity:0.8;
filter:alpha(opacity=80);
}
ＣＳＳ編集が出来ないデザインの場合
フリープラグイン、フリースペースのどちらかに貼り付けます。
※フリースペースに貼り付ける場合は改行を消して貼り付けて下さい。
<style type="text/css">
.botan a:hover{
opacity:0.8;
filter:alpha(opacity=80);
}
</style>
実際に動かすために
動かしたいボタン（画像）の部分に、記事本分の中に作成するボタンなら
[ＨＴＭＬタグを表示]を選択して。
<div class="botan">動かしたい画像のHTML</div>
のように
<div class="botan">と</div>で囲ってあげればボタンのように動くようになります。
詳細説明
0.8と80という数字が透過割合を指定しています。
どちらも80％の透過割合という設定なのですが、ブラウザによってＣＳＳ３に対応していないために２種類の記述を行っています。
ですので70％の透過割合にしたい場合は、0.7と70に書き換えて下さい。
【応用】動くボタン・画像と組み合わせてみる。
以前の動くボタンも組み合わせれば透過しつつボタンを動かすことも出来ます。
以前の記事→動くボタン・画像
下記のような感じですね。
動くボタン・画像のＣＳＳの設定を行ったうえで、ＨＴＭＬにところにbotan1を追加してあげます。
<div class="botan botan1">動かしたい画像のHTML</div>
のように
<div class="botan botan1">と</div>で囲ってあげればボタンのように動いて、透過するようになります。