指定した部位を振動させるCSSの紹介です。
レスポンス広告の視点に立った時、よりクリックして欲しいアフィリエイトリンクをCSSを用いてアニメーション化させる事により、より高い成果が望めます。
CSSに追記して利用して下さい。
▽ テキストに適応すると以下のような見え方になるはずです。
▽ バナーやイメージなどに適応すると以下のような見え方になります。
HTML
<div class="buruburu">振動</div>
CSS
/* ### 振動させる 「buruburu」### */
.buruburu {
animation: buruburu1 3s ease infinite;
}
@keyframes buruburu1 {
0% { transform:translateX(0) }
5% { transform:translateX(0) }
10% { transform:translateX(0) }
20% { transform:translateX(-15px) }
25% { transform:translateX(0) }
30% { transform:translateX(-15px) }
50% { transform:translateX(0) }
100% { transform:translateX(0) }
}
数値を変更させると、揺れ幅やリズムを調整する事ができます。
ボタンや画像によっていくつかのパターンを設定したい場合は、振動させる幅やリズムを調整して、
- buruburu 基本
- buruburub 早く・大きく動く
- buruburuc 小さく動く
といったようにいくつか設定しておくと、バリエーションも増えて、管理もやりやすくなると思います。
転職サイトかたろぐでは、アフィンガーのアフィリエイトボタンに上記CSSを適応しています。
実際にどのように使っているかイメージがつかない人は、アフィンガー4を用いて現在作成中の転職系アフィリエイトサイトをチェックしてみて下さい。
CVにつながるワードで、ある程度上位表示できている人でまだ導入した事がない人は、必須の収益アップ手法です。
ただし、あくまでも一つの手法に過ぎず、絶対に正しい方法・収益アップに繋がる方法という意味ではありませんので、そん点はご了承のもとお試し下さい。
検索エンジンから流入があるなら、レスポンス広告を意識して訴求してみて、アフィリエイトリンクのクリック率やCVRを比較してみて、本当に効果があるのかを自身で確認する事をおすすめします。
そもそも、SEOからの流入がない場合は、細かいCSSには拘らず、コンテンツを充実させるなど、まずはSEOからのアクセス増加に取り組んでみて下さい。
