たった２分でできる！ボタン画像をサイトに設置するボタンマルシェの使い方
リンクを設定する時、クオリティーが高いボタン画像を使ってリンクさせたいですよね。私もボタン画像を自分で作ることもできないし、そもそもやり方がわからないって思ってました。
しかし、今回、紹介するボタンマルシェは、無料でクオリティーの高いボタン素材を提供して下さっており、初心者の私でさえも編集ソフトなしで簡単に作り、設置することができました。
その方法についてあなたにご紹介したいと思います。
得られるメリット
- 時間がない人も簡単に設置することができる
- 編集ソフトが必要なく作成できる
- 質の高いボタン画像を設置できる
目標設定
今回、作成したボタンはこちら 
ただ設置するたけでなく、マウスオーバーの設定も紹介します。コピペで簡単にできますので、気軽に見ていただけたらと思います。
ボタン画像の編集から設置までの解説
見ていただけたでしょうか？非常に簡単にボタン画像を作成し設置できたのがお分かりいただけたと思います。今回はwordpressを使って説明していましたが、wordpress以外でも使えるので参考にしていただけるかと思います。
マウスオーバーのCSS
今回のマウスオーバー時、画像が不透明度８０％になり、右と下に３px移動するように設定しています。
マウスオーバーのCSSについて下にコードを貼り付けています。
|
1 2 3 4 5 6 |
.test:hover{ position:relative; top:3px; left:3px; filter:alpha(opacity=80); opacity:0.8;} |
私はCuctom CSSというプラグインを使い、CSSを入力しています。プラグイン＞「Cuctom CSS」と検索＞インストールする＞外観＞Cuctom CSSに入り、上記のCSSを貼り付けるだけで、マウスオーバーの設定をすることができます。
まとめ
以上で説明は終わりますがいかがだったでしょうか？
作成時のポイントとして
- ボタンマルシェからダウンロードする。
- 写真画像加工編集サイトでボタンを編集する。
- ボタンを挿入して、マウスオーバーの設定をする。
以上の３点だったと思います。
非常に簡単でしかも早くできるので、時間がない方は重宝する作成方法だったのではないかと思います。
ぜひ、あなたもボタンマルシェと写真画像加工編集サイトを使い、サイトにボタン画像を設置してみてはいかがでしょうか。
使用させていただいたサイト
ボタンマルシェのサイト
写真画像加工編集サイト
この記事が気に入ったら
いいね！しよう
最新情報をお届けします
Twitterでshare lifeをフォローしよう！
Follow share life