menu

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

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

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

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

得られるメリット

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

目標設定

今回、作成したボタンはこちら ボタンマルシェ - 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をフォローしよう!

スポンサーリンク

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

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

関連記事

  1. お名前.comから独自ドメインを取得してwordpressをイン…

    これからwordpressの運営をやっていこうと思っている方、必見です。wordpressを…

  2. 初心者必見contact form 7基本操作からカスタマイズ方…

    contact form 7でお問い合わせページ作成したけど、レイアウトだけでも変更したいと…

  3. たったそれだけで?PVを増加させたSNSボタンのカスタマイズ方法…

    ブロガーなら、誰でも悩むと思うのですが、バズを狙ったり、自分のfacebookやtwitterに投稿…

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

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

  5. TCDテーマの標準搭載SNSボタンのシェア数を表示させる方法

    最近、TCDのVIEWというテーマに変更しまして、TCDテーマのSNSボタンはデザインが良くて使いた…

  6. 絶対できる!アイキャッチ画像付きfacebookのいいねボタンを…

    上の画像のようなバイラルメディア風facebookいいねボタンを記事の下に設置したい方は必見…

  7. ul、liのドット部分を画像でリスト化する方法

    ul,olのドットや数字部分に画像を挿入したい時ってありますよね。画像を挿入できれば、自分の…

  8. WordPress初心者でも安心してCSSを編集できる子テーマ作…

    Wordpressのレイアウトを変更したいんだけど、CSSをそのままにしている方はいらっしゃ…

PAGE TOP