クリック率アップの裏技インパクトのあるボタンをつけよう~ブログアフィリエイトの裏技小技~
山本寛太朗で~す (^.^)
今日から次のプロジェクトが始まるので、
小ネタや裏技の記事が続きそうです(汗)
ということで今日は、
クリック率アップの裏技インパクトのあるボタン
~ブログアフィリエイトの裏技小技~
ということでお話ししましょう。
他の方のブログを見ていると、
人気ブログランキングのボタンが
オリジナルの小さめのボタンではなく
カスタムの大きなボタンで
しかもマウスをフォーカスした時に
動きのあるボタンでクリック率が上がりそうだな
と思って私も試してみました。
マウスのカーソルをフォーカスした時に
動きのあるボタンは色々な方法があるのですが
ちょっと面倒な設定だったりするので、
とっても簡単でしかもインパクトのある方法は
ないかなと思って色々探していました。
そしてついに見つけたのが
今日ご紹介するインパクトのあるボタンです。
この私のアイコンにその効果をつけてみました。
これ、結構シンプルだけど目立つと思います。
設定は、以下のように行います。
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
そして、実際にテンプレートに埋め込んだ
人気ブログランキングのボタン(バナー?)が
こちらになります。
それでは、また次回お会いしましょう。
山本寛太朗 (^_^)/
山本寛太朗関連ブログの最新記事
人気記事