menu

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

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

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

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

得られるメリット

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

目標設定

今回、作成したボタンはこちら 5SzCMXaj8h6Vb_11448848562_1448848585

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

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

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

マウスオーバーのCSS

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

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

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

2015-11-30_14h47_24

まとめ

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

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

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

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

こちらもボタンマルシェから提供していただいたボタン素材を使ってます。

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

 

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

最新情報をお届けします

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

誰でもできるcontact form 7にボタン画像を設定する方法誰でもできるcontact form 7にボタン画像を設定する方法

あっという間!写真編集加工に最適なBeFunkyの使い方あっという間!写真編集加工に最適なBeFunkyの使い方

関連記事

  1. 簡単すぎる!wordpressで初めてのCSS編集これで画像装飾はお手のもの

    簡単すぎる!wordpressで初めてのCSS編集これで画像装飾…

    wordpressを使っていて、画像を装飾をする際にCSSを編集したい時ってありますよね。じ…

  2. バックアップ

    【動画版】wordpress初心者でもバックアップし復元できる…

    wordpressを使ってブログを運営していると、カスタマイズして画面が真っ白になったり、ウィルスに…

  3. facebook投稿のリンク画面をアイキャッチ画像にする設定方法

    facebook投稿のリンク画面をアイキャッチ画像にする設定方法…

    ブログ記事をfacebookに投稿したけど、アイキャッチ画像が表示されないって時って悩ましい…

  4. wordcamp

    wordpressど素人がWordCamp Kansai 201…

    平成28年7月9、10日の2日間、WordCamp Kansai 2016のスタッフとして参加しまし…

  5. font-533232_1280

    【動画版】子テーマでのバイラルメディア風facebookボタン設…

    この記事が気に入ったらいいね!しようというバイラルメディア風オリジナルSNSボタンの設置方法について…

  6. 40762277_m

    誰でもできる!jQueryを使ってwordpressでもスクロー…

    wordpressを使っていてスクロール時に画像に動きをつけたい時ってありますよね。投稿記事内はプラ…

  7. wordpressでテキストにアイコン付き背景をワンクリックで挿入する方法(コピペできます)

    wordpressでテキストにアイコン付き背景をワンクリックで挿…

    ブログを書いて、強く訴えたい部分ってありますよね。目立たせたいけどどうすればいいか悩みますよ…

  8. 誰でもできるcontact form 7にボタン画像を設定する方法

    誰でもできるcontact form 7にボタン画像を設定する方…

    contact form 7の送信ボタンを画像に変えて印象を良くしたいですよね。 以前、…

PAGE TOP