私のブログでは、美容健康特化型3ステップアフィリエイトがよく売れます。

美容健康特化型3ステップアフィリエイトのレビュー!待ち望んだ商材?

多分、ブログ自体が女性を応援しているから、というのもあるでしょう。

美容健康特化型3ステップアフィリエイトは、上記レビューを読んでもらえば分かりますが物販アフィリエイトです。

物販アフィリエイトの場合、公式サイトへ誘導するボタンは非常に重要となります。

その為、美容健康特化型3ステップアフィリエイトの購入者からは、ボタンに関する問い合わせが多い。

例えば、ボタンの色、それから、

「ボタンをぷるぷる震わせるにはどうすればいいですか?」

という質問です。

なぜボタンのアニメーション化に関する問い合わせが多いかというと、私の運営サイトで使っているので気になるのでしょう。

ということで、本日はCSSを使ってボタンをアニメーション化する方法を紹介します。

とても簡単なので、あなたも挑戦してみて下さい。

CSS ボタン

CSSを使ってボタンをアニメーション化

私のサイトでは、下のボタンのようにぷるぷる震えるボタンを使っています。

↓ ↓ ↓

色はでぷるぷる震えるボタンですね。

これは、CSSとHTMLをつかってボタンをアニメーション化しているのですが、本当はもっとエロい動きのボタンが理想(笑)

CSSを使ってボタンをアニメーション化するのは?

なぜ、ボタンを緑色にして、アニメーション化したのか?

それは、加藤公一レオさんが、「100%確実に売上がアップする最強の仕組み」という本の中で書いているからです。

色は緑色が一番クリック率が高く、動きはエロい方が良いらしい。

色については、信号機を例に上げて説明しているのですが、赤は目立つが止まれの色。

一方、緑は進めの色だという。

「なるほど!」

と思って自分のサイトに取り入れました。

あなたは、

「本を読んだだけで決めたの?」

と思うかもしれません。

ですが、他にも信用に足る情報があるのです。

それは、月間2億円以上の収入を誇るアフィリエイターの葵慎吾さんが、マジョリエイトで使っていました。

ちなみにマジョリエイトとは、葵慎吾さんが考案した手法です。

CSSでボタンをアニメーション化してみる

では、実際にどうすればボタンがアニメーション化されるか?

まずは、ボタンを作成します。

ボタンメーカーを開いて下さい。※テキストリンクをクリックして下さい。

ボタンメーカー

先程のボタンはボタンメーカーで作っています。

  1. サイズ
  2. 背景色
  3. 枠線
  4. テキスト1
  5. 丸い角
  6. クリア調

を設定し、createボタンをクリック。

出来上がったボタンにマウスを合わせ、右クリックで画像を保存して下さい。

CSSを手に入れる

私はCSSは専門ではないので、ネット上で見つけて使わせていただくしかありません(汗)

今回は、下記サイトからCSSを手に入れました。

CSShake

CSS ダウンロード

上図のDownloadCenterをクリック。

自分の好みの動きをするCSSをダウンロードして下さい。

今回私がダウンロードしたのは、「csshake-default.css」です。

CSSを追加する

次に、自分のブログに、先程手に入れたCSSを追加するのですが、慣れてない人はプラグインを使いましょう。

使うプラグインは、「Simple Custom CSS and JS」です。

「Simple Custom CSS and JS」をインストールしてください。

ダッシュボードに下図のような項目が増えます。

CSS プラグイン

上図の項目をクリックして下さい。

CSS 追加

Add CSS Codeを選択します。

CSS 追加2

タイトルは入れなくても構いません。

私はわかりやすく「ぷるぷる震えるボタン」と入れました。

あとは、赤枠内を削除して、先程手に入れたCSSをコピペして公開ボタンをクリックします。

アニメーションボタンを使う

では、実際にアニメーションボタンを使ってみましょう。

下記ソースをボタンを表示させたい箇所に挿入します。

「ボタンの画像」の箇所に先程の画像を挿入。

すると、下のボタンのようにボタンがアニメーション化します。

↓ ↓ ↓

CSSを使ってボタンをアニメーション化したら・・・

CSSを使ってボタンをぷるぷるさせたら、クリック率が上がるのか?

ハッキリ言うと、まだテスト段階です。

ですが、稼いでいる人がやっているのであれば、試す価値はあります。

ただ、動きがもう少し面白いほうが良いかもしれません。

例えば、下のボタンのような感じです。

↓ ↓ ↓

ちょっとエロくなったでしょ(笑)

ということで、メルマガに登録しておいてくださいね。

本日も最後までお付き合い頂きありがとうございます。

この記事に関する質問や相談はコチラからどうぞ。

木村