アフィリエイトリンクをCSSで装飾してボタンに!アニメーション/アイコンも設定可能!

立てば芍薬座れば牡丹、押したくなるのはオシャレなボタン。

[temp id=3]

アフィリエイトリンクをもっと目立たせたい!

アニメーションを使ってハデハデにしたい!

など考えている方はこの記事がお役に立つんじゃないかと!

シンプルなボタンからアイコンやアニメーションを使ったイケイケなボタン、通常のテキストリンクより少し目立つ装飾したテキストリンクなどなど色んなパターンがありますので是非ご覧になってください!!

[st-kaiwa1]

ちなみにこのボタンを利用できるようになるCSSは、僕が作ったCocoon用のスキン『Hygiene』の最新版にデフォルトで入っています。

『Hygiene』の詳細はこちら

[/st-kaiwa1]
WordPressを使用している方を想定してこの記事は書かれていますが、無料ブログ等のサービスを使用されている方でもCSSをカスタマイズ出来るなら適用出来ます。

こんなボタンが作れます!!

百聞は一見に如かず。

まずはどんなボタンが作れるのか見てみましょう。

フラットタイプボタン

ノーマルタイプボタン

テキストリンク

どうでしょうか。

ボタンはノーマルタイプとフラットタイプの2種類から選択出来ます。

色はリンクボタン、テキストリンクともに

  1. 緑(デフォルト)
  2. ピンク

の全6色から選択出来ます。

また、アイコンも

  1. 指差し
  2. 矢印
  3. チェックマーク
  4. ダイアモンド
  5. ハート

の5種類から選ぶことが出来ます。(アイコンなしにすることも可能。)

それに加え、リンクを目立たせるアニメーションも設定してあります。

  1. 点滅
  2. 跳ねる
  3. 横揺れ
  4. 拡大
  5. スウィング
  6. 光る
  7. 波紋
5のスウィングはアイコンのみに適用。
6・7の光る・波紋はリンクボタンのみに適用となります。アニメーションをオフにすることも、もちろん可能です。

 

事前準備

まずは以下のCSSをstyle.cssへ貼り付けてください。

長いですね。。。

これでリンクボタンを使用することが出来るようになります。

 

ノーマルタイプボタン

まずは基本のシンプルなタイプのボタンから。

アフィリエイトのリンクコードを

<div class="hybtn">リンクコード</div>

このように囲めば

この緑のボタンになります。

普通に<a>タグで囲んだテキストなんかも同じようにボタンになって表示されます。

色の変更/色見本

色を変更するには各色に対応したクラスを追加するだけでOK。

  • 青・・・hyblue
  • 赤・・・hyred
  • 紺・・・hykon
  • ピンク・・・hypink
  • 黄色・・・hyki
  • 緑・・・何もクラスを追加しない

blueとかredとかに設定しているとテーマの既存のクラス名と被ってしまう可能性があるのでhy〇〇というふうに設定しました。

例)
青のボタンの場合は
<div class="hybtn hyblue">ボタンにしたいリンクコード</div>とすればOKです。
何もクラスを追加しなければデフォルトの緑に。

クラスを追加する場合は半角スペースを開けて追加しましょう。

以下、色見本とそのコードです。

<div class="hybtn hyblue">リンクコード</div>

<div class="hybtn hyred">リンクコード</div>

<div class="hybtn hykon">リンクコード</div>

<div class="hybtn hypink">リンクコード</div>

<div class="hybtn hyki">リンクコード</div>

<div class="hybtn">リンクコード</div>

 

6色用意しましたのでどんなサイトでも1・2色くらいはイメージに合う色があるんじゃないかと思います。

もし、「他にこんな色が欲しい!」とかいう要望が多かったら今後増やす可能性もあります。
[st-kaiwa1] ちなみにデフォルトを緑にしているのは緑のボタンがクリック率が高いと言われているからです。

[/st-kaiwa1]

フラットタイプのボタン

[st-kaiwa2] いやいや、6色あってもボタンのデザインがレトロ過ぎて先進的な俺のサイトには合わねーよ!!

[/st-kaiwa2] あるんです。

そんな声にお答えするための、もう一つのボタンデザインが!!

どうでしょうか。

先進的・・・とまではいきませんが、ノーマルタイプに比べればいい感じではないでしょうか。

このフラットタイプにするにはhyflatというクラスを追加すればOK。

つまり、<div class="hybtn hyflat">リンクコード</div>というように記述すればよいです。

 

色の変更/色見本

フラットタイプもノーマルタイプと同じく6色用意してあります。

ノーマルタイプと同じように各色に対応したクラスを追加するだけです。

これも色のクラスを追加しないとデフォルトの緑となります。

例)

青のフラットタイプのボタンの場合は

<div class="hybtn hyflat hyblue">リンクコード</div>

とします。

以下、色見本です。画像なのでクリック出来ません。(コード見本は省略)

※お使いの環境(モニター、ブラウザ、画面設定等)によって色の見え方が異なる場合があります。

 

 

テキストタイプのリンク

[st-kaiwa2] でもやはりテキストタイプのリンクの方がクリック率は高いって聞いたことあるんですが。

[/st-kaiwa2] テキストタイプのリンクが高いか、ボタンタイプのリンクが高いかは分からないですが、テキストタイプのリンクを使いたい方もいるでしょう。

そこでこんな感じのテキストタイプのリンクを用意しました!!

ネットに慣れていない方でもテキストとアンダーラインがあることでリンクと認識しやすいんじゃないかと思います。

これを使うには<div class="hytext">リンクコード</div>と書きます。

 

色の変更/色見本

ノーマルボタン、フラットタイプボタンと同じく6色用意してあります。

各色に対応したクラスを追加してください。

何も色のクラスを追加しない場合は緑になります。
[st-kaiwa1]

テキストリンクのデフォルトは青にしようか悩んだんですが、、、緑です。

[/st-kaiwa1] 例)

青のテキストリンクの場合

<div class="hytext hyblue">リンクコード</div>

としてください。

以下、色見本です。(画像。見本コードは省略)

※お使いの環境(モニター、ブラウザ、画面設定等)によって色の見え方が異なる場合があります。

 

アイコンを追加する

ボタンリンクならボタンの右端、テキストリンクならテキストの前にアイコンを付けることが出来ます。

アイコンを付けるには各アイコンに対応したクラスを追加します。

  • 矢印・・・ya
  • 指差し・・・yubi
  • チェックマーク・・・check
  • ハートマーク・・・hato
  • ダイヤモンド・・・diya

現在はこの5種類となってます。

もし、「他にこのアイコンを使いたい!」という要望が多かったら今後増やす可能性もあります。

例1)

紺色のフラットボタンに矢印アイコンを追加する場合

<div class="hybtn hyflat hykon ya">リンクコード</div>

例2)

ピンクのテキストリンクにハートマークを追加する場合

<div class="hytext hypink hato">リンクコード</div>

上記の例を参考にして自分の好きなアイコンのクラスを追加してみてください!

 

アニメーションを設定する

アニメーションはボタンのアニメーションと、アイコンのアニメーションの2種類があります。

テキストリンクそのものにはアニメーションを設定することは出来ませんが、テキストリンクにアイコンを追加している場合、そのアイコンにアニメーションを設定することが出来ます。

リンクボタンのアニメーション

リンクボタンに設定出来るアニメーションは6つです。

  1. 点滅・・・tenmetu
  2. 跳ねる・・・haneru
  3. 横揺れ・・・yokoyure
  4. 拡大・・・kakudai
  5. 光る・・・hikaru
  6. 波紋・・・hamon

上記の各アニメーションに対応したクラスを追加すればアニメーションを設定することが出来ます。

例1)

緑のフラットボタンに波紋のアニメーションを設定

<div class="hybtn hyflat hamon">リンクコード</div>

例2)

黄色のノーマルボタンに拡大のアニメーションを設定、指差しアイコン付き

<div class="hybtn hyki yubi kakudai">リンクコード</div>

 

アイコンのアニメーション

アイコンに設定出来るアニメーションは5つです。

  • 点滅・・・itenmetu
  • 跳ねる・・・ihaneru
  • 横揺れ・・・iyokoyure
  • 拡大・・・ikakudai
  • スウィング・・・iswing

基本的にボタンアニメーションのクラス名の頭に『i』を付け加えた形になります。

※ボタンリンクのアニメーションとアイコンのアニメーションは併用できます。

例1)

ピンクのテキストリンクにハートマークを追加、拡大のアイコンアニメーション設定

<div class="hytext hypink hato ikakudai">リンクコード</div>

例2)

赤のフラットボタンに矢印アイコン追加、波紋のボタンアニメーション、横揺れのアイコンアニメーション設定

<div class="hybtn hyflat hyred ya hamon iyokoyure">リンクコード</div>

これが一番追加するクラスが多いパターンの一つです。
[st-kaiwa2] 長い!!!!

[/st-kaiwa2]

便利な使い方

上記の例2のような長ったらしいコードを毎回打つのはかなり手間ですよね。

普段からテキストエディタで記事を書いてる人でも面倒なのに、ビジュアルエディタで書いてる方なんて余計面倒!!

そこでオススメなのが『AddQuickTag』というプラグインです。

任意のテキストやコードを登録しておいて、パパっと呼び出すことの出来る便利なプラグイン。

ど定番のプラグインなんでだいたいの方が活用しているんじゃないでしょうか。

インストールしていない方は『プラグイン』→『新規追加』→『”AddQuickTag”のキーワードで検索』→『インストール/有効化』

有効化したあとは『設定』→『AddQuickTag』にて設定することが出来ます。

これにお気に入りの組み合わせをあらかじめ決めておいて登録しておけばいいでしょう。

 

赤枠のところにはボタンの色やアニメーションの種類を自分がわかるように書いておきます。

青枠は上段と下段に分かれていますが、上段には開始タグ、下段には終了タグを記入。

例)

上段(開始タグ)・・・<div class="hybtn hyflat hyred ya hamon iyokoyure">

下段(終了タグ)・・・</div>

緑枠のところには数字を設定します。登録数が増えたときここに設定した数字が低い順に上に表示されるので、よく使うタグは低い数字を設定したほうが使い勝手が良いでしょう。

オレンジ枠は”どの場面で登録したコードを呼び出すか”という設定をすることができます。

自分の場合はビジュアルエディター、投稿、固定ページ、ウィジェットで使いたいのでそれぞれチェックを入れています。

このように登録しておけば

このように簡単にボタンにすることが出来ますので是非活用してみてください。

ビジュアルエディタでこの方法をするにはリンクの下に改行を入れ、1行下からリンクを選択しないとうまく出来ませんのでご注意ください。
あとそう言えばビジュアルエディタ上でボタンのCSSが反映されるのはワードプレステーマ、Cocoonを使用しているからです。他のテーマの場合はビジュアルエディタ上には反映されないケースが多いんじゃないかなと思います。

 

クラスのまとめ

ノーマルボタン

<div class="hybtn">~以下略

フラットタイプボタン

<div class="hybtn hyflat">~以下略

テキストリンク

<div class="hytext">~以下略

色のクラス

  • 青・・・hyblue
  • 赤・・・hyred
  • 紺・・・hykon
  • ピンク・・・hypink
  • 黄色・・・hyki
  • 緑・・・何もクラスを追加しない

アイコンのクラス

  • 矢印・・・ya
  • 指差し・・・yubi
  • チェックマーク・・・check
  • ハートマーク・・・hato
  • ダイヤモンド・・・diya

ボタンアニメーションのクラス

  1. 点滅・・・tenmetu
  2. 跳ねる・・・haneru
  3. 横揺れ・・・yokoyure
  4. 拡大・・・kakudai
  5. 光る・・・hikaru
  6. 波紋・・・hamon

アイコンアニメーションのクラス

  • 点滅・・・itenmetu
  • 跳ねる・・・ihaneru
  • 横揺れ・・・iyokoyure
  • 拡大・・・ikakudai
  • スウィング・・・iswing

 

まとめ

ネットに慣れていない方はボタンをリンクだと認識出来ない場合もあるみたいだけど、アイコンやアニメーションを利用すればリンクだと認識しやすくなる可能性もあります。

だけどネットリテラシーが高い人なんかがアニメーションのついたリンクなんか見ると
[st-kaiwa3]

うわぁ・・・アフィリエイターが露骨に売り込もうとしているやん。。。

[/st-kaiwa3] なんて感情を持つかもしれません。

とは言え、サイトのターゲット層などによってアニメーションがあった方がクリック率が高い場合もあるし、ない方が高い場合もあります。

色んなパターンでA/Bテストを繰り返して自分のサイトに最適な組み合わせを見つけてみて下さい!

近々A/Bテストにオススメのプラグインを紹介する記事を書いてみます。

参考にさせていただいたサイト

https://s41t0h.jp/affiliate-link-buttons-design-css/

https://thesaibase.com/design/css-cv-buttons

\この記事が役にたったらSHARE!/

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUT US

ハイジ
社畜ナースが自由とお金を手に入れるために日々奮闘しております。 副収入のこと、仮想通貨についての事の記事がこれから増えていく予定です。