山本寛太朗関連ブログの最新記事

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


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

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

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

ということで今日は、

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

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

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

インパクトボタン

 

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

山本寛太朗

 

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

 

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

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

 

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

人気ブログランキングのボタン(バナー?)が

こちらになります。

 

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

山本寛太朗 (^_^)/


あなたのポチッが記事を書くはげみになります。
この記事が役立ったと思ったら、はてなブックマークよろしくお願いします
↓↓ m(_ _)m


↓↓ブログランキングにもご協力いただけると嬉しく思います


follow us in feedly

人気記事

コメントを残す


4 − 4 =

サブコンテンツ

こんにちは、山本寛太朗です

山本寛太朗

こんにちは、山本寛太朗です。

アフィリエイト歴9年、インフォプレナー歴8年の経験とノウハウをこのブログで公開して、初心者の方でも稼げるようになっていただければと思います。

著者


Written by

このページの先頭へ