• HOME
  • ブログ
  • wordpress
  • たった2分でできる!ボタン画像をサイトに設置するボタンマルシェの使い方

たった2分でできる!ボタン画像をサイトに設置するボタンマルシェの使い方

wordpress

リンクを設定する時、クオリティーが高いボタン画像を使ってリンクさせたいですよね。私もボタン画像を自分で作ることもできないし、そもそもやり方がわからないって思ってました。

しかし、今回、紹介するボタンマルシェは、無料でクオリティーの高いボタン素材を提供して下さっており、初心者の私でさえも編集ソフトなしで簡単に作り、設置することができました。

その方法についてあなたにご紹介したいと思います。

得られるメリット

  • 時間がない人も簡単に設置することができる
  • 編集ソフトが必要なく作成できる
  • 質の高いボタン画像を設置できる

目標設定

今回、作成したボタンはこちら ボタンマルシェ - ButtonMarche

ただ設置するたけでなく、マウスオーバーの設定も紹介します。コピペで簡単にできますので、気軽に見ていただけたらと思います。

ボタン画像の編集から設置までの解説

ボタンの作成方法
見ていただけたでしょうか?非常に簡単にボタン画像を作成し設置できたのがお分かりいただけたと思います。今回はwordpressを使って説明していましたが、wordpress以外でも使えるので参考にしていただけるかと思います。

マウスオーバーのCSS

今回のマウスオーバー時、画像が不透明度80%になり、右と下に3px移動するように設定しています。

マウスオーバーのCSSについて下にコードを貼り付けています。

私はCuctom CSSというプラグインを使い、CSSを入力しています。プラグイン>「Cuctom CSS」と検索>インストールする>外観>Cuctom CSSに入り、上記のCSSを貼り付けるだけで、マウスオーバーの設定をすることができます。

2015-11-30_14h47_24

まとめ

以上で説明は終わりますがいかがだったでしょうか?
作成時のポイントとして

  • ボタンマルシェからダウンロードする。
  • 写真画像加工編集サイトでボタンを編集する。
  • ボタンを挿入して、マウスオーバーの設定をする。

以上の3点だったと思います。
非常に簡単でしかも早くできるので、時間がない方は重宝する作成方法だったのではないかと思います。
ぜひ、あなたもボタンマルシェと写真画像加工編集サイトを使い、サイトにボタン画像を設置してみてはいかがでしょうか。

使用させていただいたサイト

ボタンマルシェのサイトボタンマルシェ - ButtonMarche
写真画像加工編集サイトAkCKCaHss8QWDCB1448859523_1448859658

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitterでshare lifeをフォローしよう!

中川 憲治

467,179 views

動画編集やWEB関連などを当ブログに書き出して2年後、12年間働いていた消防士を辞め、自分のやりたいことを仕事にしたいと考えてWEB業界に転職する。 自身の...

プロフィール