★★★:よくある


以前の記事では、画像を使って手軽にボタンのデザインを変える方法をお伝えしました。
( 過去記事:ボタンのデザインを変える http://navi.wingarc.com/motionboard/post-100.html )


今回は、ボタンに画像を使うだけではなくマウスオーバー時クリック時にボタンの色を変えてみましょう。
視認性が上がるだけではなく、ボード自体のクオリティが上がります!




それでは早速作ってみましょう。



まずはボタンの画像を用意します。
PowerPointなどを使って、通常時用、マウスオーバー時用、クリック時用の3種類を作成しましょう。


1つ作成してコピーし、カラーを変えればOKです。
PowerPointの図形アイテムを使えば簡単にボタン画像を作成することができます。



次に、任意の場所にボタンアイテムを作成します。


詳細をクリックします




スタイル設定を以下の通り変更してください。



  • 光沢効果の有効のチェックを外す(光沢効果の有効のチェックを外すことで、フラットな感じに変わります。)

  • 不透明度のスライダーを一番左にする(不透明度を0にすることで透明になります。)

  • 枠線の表示のチェックを外す(ボタンの枠線が消えます。)





次に、「通常時」、「マウスオーバー時」、「マウスダウン時(クリック時)」それぞれのボタン画像を設定します。




これで完成です!



ボタンを動的に変化させることで、ボードの完成度が一気にあがります。


簡単にできるので是非試してみてください!