SHIINBLOG

読者です 読者をやめる 読者になる 読者になる

ぱない!!

トレンド・ネタバレ・野球記事を中心に書いています。

アフィリエイトにもおすすめ!クリック率を上げるボタンリンクの作り方!

ブログ関連 便利ツール

どうもたかです。

 

みなさんサイトでこんな感じのボタンを見かけたりしませんか?

f:id:panai2016:20170210172753g:plain

 

これを見るとついついボタンを押したくなりますよね。

※実際は何もありませんよ(笑)

 

自分のサイトにもこんな感じにボタンを取り入れて、上手く誘導させたいなと思っていろいろ探していると、見つかったので作成の方法と合わせてご紹介したいと思います!

 

Button Maker(ボタンメーカー)で素材を作る!

まず原型となるボタン素材を作成します!

 

ご存知の方もいるかもしれませんが、こちらのボタンメーカーというサイトでボタン作成します。

box.aflat.com

 

ボタンメーカーの使い方

簡単にボタンメーカーの使い方を説明していきます。

 

サイトにアクセスするとこんな感じで表示されます。

f:id:panai2016:20170210180736p:plain

1,の所は必ず入力しないといけないので最初にサイズと背景色を入力します。

 

f:id:panai2016:20170210175935p:image

 

細かく色を設定したい方はこちらのサイトを参考にしてみてください。

www.colordic.org

 

2,ボタンに表示させる文字や文字色などを設定します。

 

f:id:panai2016:20170210180008p:plain

 

文字のフォント設定はいろいろありますが、最初は(J)HGRGEを選択するのがおすすめです。

 

これでボタンは完成しているのですが、ユーザーにボタンを押してもらいやすいように更にいじってみます。

 

3,ボタンの四角を丸くする

 

f:id:panai2016:20170210180022p:image

 

ピクセル数を大きくすればより丸みのあるボタンになります。 

 

4,ボタンの光沢感(クリア調)を設定する

 

f:id:panai2016:20170210180033p:image

 

これはしていた方が見栄えが全然変わるので設定した方がいいです!

 

 5,ボタンの上で右クリックを押して保存する。

 

f:id:panai2016:20170210191156p:plain

 

後は保存したボタン画像を、記事の貼り付けたい所に貼れば完成です!

 

簡単にこんな感じのボタンが作れますよ!

f:id:panai2016:20170210191247g:plain

 

最低限の紹介しかしていないのので、説明しなかった他の機能も詳しく知りたいという方はこちらのサイトを参考にしてみてください。

http://神ツール.com/

 

リンクとボタン素材を合わせる

ボタンが出来たので、次は誘導したいサイトのリンクと合わせます。

 

今回それに関してとても役にたったのがこちらのサイトです。

experience-html.homepagenotukurikata.com

 

そのサイトの中で画像とリンクの合わせ技というものがあるので、それを利用します。

 

それがこちらです。

 

<a href="リンク先URL"><img src="画像URLなど"></a>

 

<a href="リンク先URL">の部分には

<a href="https://~ target="_blank" rel="nofollow">

といったようにアフィリエイトサイトで表示されるバナーやテキストの一部をコピーして貼り付けます。

 

<img src="画像URLなど"></a>の部分は、先ほど保存したボタンリンクの画像になるので特にいじらなくても大丈夫です。

 

この2つを組み合わせると、ボタンをクリックすれば誘導したいサイトへ飛んでくれます。

 

最後に

いかがでしたか?

 

サイトへの誘導の際に便利ですし、特にアフィリエイトの紹介の際にはとても有効です。

 

こんな感じに簡単に出来ますので、ぜひ参考にしてみてください!

 

ではでは

合わせて読みたい!

ブログで表を作成する際に便利なExcel to tableの使い方を紹介!