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. 【動画版】子テーマでのバイラルメディア風facebookボタン設…

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

  2. 【動画解説】wordpressをさくらからエックスサーバーへ引っ…

    当ブログはさくらインターネットのスタンダードプランに契約していたのですが、80記事を超えてきてから、…

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

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

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

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

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

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

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

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

  7. wordpressど素人がWordCamp Kansai 201…

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

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

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

スポンサーリンク

さくらとXサーバーの速度比較

4/28まで初期設定費用半額

最近の記事

PAGE TOP