クリック率アップの裏技インパクトのあるボタンをつけよう～ブログアフィリエイトの裏技小技～

山本寛太朗で～す　　(^.^)

今日から次のプロジェクトが始まるので、

小ネタや裏技の記事が続きそうです（汗）

ということで今日は、

クリック率アップの裏技インパクトのあるボタン

～ブログアフィリエイトの裏技小技～

ということでお話ししましょう。

 

他の方のブログを見ていると、

人気ブログランキングのボタンが

オリジナルの小さめのボタンではなく

カスタムの大きなボタンで

しかもマウスをフォーカスした時に

動きのあるボタンでクリック率が上がりそうだな

と思って私も試してみました。

 

マウスのカーソルをフォーカスした時に

動きのあるボタンは色々な方法があるのですが

ちょっと面倒な設定だったりするので、

とっても簡単でしかもインパクトのある方法は

ないかなと思って色々探していました。

そしてついに見つけたのが

今日ご紹介するインパクトのあるボタンです。

この私のアイコンにその効果をつけてみました。

 

これ、結構シンプルだけど目立つと思います。

 

設定は、以下のように行います。

1. 記事のHTMLのイメージタグの中にclass=”expand” を追加します。

2. cssの最後に下記のCSSをコピーペーストします。

たったこれだけで、インパクトのあるボタンが

使えるようになるという裏技なんです。

HTML

<img class="expand" alt="インパクトボタン" src="images/button1.png" />

CSS

img.expand {
        -webkit-transition:0.2s ease-in-out;
        -moz-transition:0.2s ease-in-out;
        -ms-transition:0.2s ease-in-out;
        -o-transition:0.2s ease-in-out;
        transition:0.2s ease-in-out;
}

img.expand:hover {
        -webkit-transform:scale(1.2,1.2);
        -moz-transform:scale(1.2,1.2);
        -ms-transform:scale(1.2,1.2);
        -o-transform:scale(1.2,1.2);
        transform:scale(1.2,1.2);
}

 

私の場合は、賢威のテンプレートを使っているので、

単一記事の投稿 (single.php)のテンプレートに

ボタンのHTMLを入れてテンプレートに埋め込みました。

またサイドバーのウィジェットの画像にも

この裏技を設定しました。

スタイルシートは、デザイン関連のdesign.cssの

一番下にコピーペーストしています。

オンズさんのブログにオリジナルの方法が載っていますので

こちらも参考にしてみてください。
http://on-ze.com/archives/412

 

そして、実際にテンプレートに埋め込んだ

人気ブログランキングのボタン（バナー？）が

こちらになります。

 

それでは、また次回お会いしましょう。

山本寛太朗　(^_^)/