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. wordpressど素人がWordCamp Kansai 201…

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

  2. ずっと挫折し続けた私が念願叶ってHTML/CSSサイトをWord…

    WordPressはCMSで世界で最も使われており、導入していて当たり前になってきてると思いますが「…

  3. スライダー表示可!wordpressでサイドバーを固定するQ2W…

    スクロールする際に、サイドバーのウィジェットを常に表示させたい時ってありますよね。いろいろ探した…

  4. 本気でスキルを身に付けたい人におすすめのプログラミングスクール5…

    本気でプログラミングを学んで、HPを作りたいとか、スマホアプリを作りたいとか、転職して別の道に進みた…

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

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

  6. 【動画版】wordpress初心者でもバックアップし復元する方法…

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

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

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

  8. 【動画版】wordpress初心者でもデータベースを復元できる方…

    wordpressを使っていたら、思わぬことでウィルス感染してしまい、バックアップしていたデータを復…

PAGE TOP