古臭い、テキストベースのアフィリエイトリンクをCSSを使ってボタン化してみました。クリック率は改善するのでしょうか。
アフィリエイト広告イメージ
CSSに書くだけでボタンに変わる
アフィリエイトのリンクといえば以下のようなボタンが有名ですが、これにはプラグインや専用のツールが必要です。
しかし、CSSを使えば簡単に出来るのですね。ということで、早速やってみました。
これは、Amazonや楽天、Yahoo!のurlをボタン化しただけですが、今までのテキストベースのリンクと比較すると、確かにボタンのほうが目立つし、クリックもされやすいのかなと思います。テキストベースのリンクもシンプルで良いですけどね。
私は素人で、当然こんなコードは書けませんが、これは「AI」指示して書いていただいたものです。
コードの意味は、Amazonや楽天、Yahoo!ショッピングのURLをボタンに変えるというもので、さらにボタンの色は、各ショップのコーポレートカラーに似せてあります（オリジナルっぽくするとやや派手なので少しコントラストを抑えました）。
このコードをCSS（スタイルシート : style.css）に貼り付けることで、Amazonや楽天、Yahoo!ショッピングのURLを自動でボタンに置き換えてくれるので、アフィリエイトリンクがより目立つようになり、多少クリック率も改善するのではないかと期待しています。
ただし問題点が1つだけ。この方法だと文中にこれらのサイトのurlがあると、文中のテキストリンクもボタン化されてしまうこと。
幸い、私のサイトでは、文中にアフィリエイトリンクはあまり入れていないのでうざいほどのボタン化はないと思うのですが、ひどい場合は見つけ次第修正ですかね。
※CSSではなく、JavaScriptを使えばURLではなく特定の文字をボタン化することも出来るそうですが、JavaScriptはアドブロックの影響を受けやすいのでできれば避けたいですよね。
まとめ
今ではアフィリエイトのリンクはボタンが当たり前ですが、私はアフィリエイト歴だけは長く、当時はテキストリンクとバナー広告が主流で、当時はこんなおしゃれなアフィリエイトのリンクボタンはありませんでした、
古臭いテキストベースのアフィリエイトリンクは、昔から変えたいと思っていたのですが、ページ数が膨大で、置き換えるのを躊躇していたのですが、CSSで簡単に装飾できるなんて知りませんでした。
それもこれもAIのおかげです。
今どきのアフィリエイターはリンカーなどのツールを使用しているのでしょうが、時代に取り残され、ひとり浦島太郎状態でしたが、CSSによるボタン化は一括で変換できるのでとても便利ですね。
ただしCSSによる（ボタン化などの）装飾は、ASPによっては「改変」とみなされる場合がありますので自己責任になります。
しばらくこれで様子を見てみます！
完成しました
当運営サイトのテキスト風ボタンも紆余曲折がありまして、これが最終系でしょうか。
▼こちらは実際の（クリックできる）ボタンです。
– 最安値を探す –
あえてベタ塗りにせず、コーポレートカラーのアイコンと枠線で囲んだボタンデザインにしてみました。
白い背景なので一見ボタン（リンク）っぽくありませんが、影をつけたことと、アローアイコン「>」を入れたことで視認性がアップしたと思います。
マウスオーバーで淡いコーポレートカラーになるのもおしゃれだと思います。
日々勉強です！！