CSSでアフィリエイトリンクのボタン化を試してみた！！
古臭い、テキストベースのアフィリエイトリンクをCSSを使ってボタン化してみました。クリック率は改善するのでしょうか。
CSSに書くだけでボタンに変わる
アフィリエイトのリンクといえば以下のようなボタンが有名ですが、これにはプラグインや専用のツールが必要です。
しかし、CSSを使えば簡単に出来るのですね。ということで、早速やってみました。
これは、Amazonや楽天、Yahoo!のurlをボタン化しただけですが、今までのテキストベースのリンクと比較すると、確かにボタンのほうが目立つし、クリックもされやすいのかなと思います。テキストベースのリンクもシンプルで良いですけどね。
私は素人で、当然こんなコードは書けませんが、これはChatGPT先生に書いていただいたものです。
コードの意味は、Amazonや楽天、Yahoo!ショッピングのURLをボタンに変えるというもので、さらにボタンの色は、各ショップのコーポレートカラーに似せてあります（オリジナルっぽくするとやや派手なので少しコントラストを抑えました）。
このコードをCSS（スタイルシート : style.css）に貼り付けることで、Amazonや楽天、Yahoo!ショッピングのURLを自動でボタンに置き換えてくれるので、アフィリエイトリンクがより目立つようになり、多少クリック率も改善するのではないかと期待しています。
ただし問題点が1つだけ。この方法だと文中にこれらのサイトのurlがあると、文中のテキストリンクもボタン化されてしまうこと。
幸い、私のサイトでは、文中にアフィリエイトリンクはあまり入れていないのでうざいほどのボタン化はないと思うのですが、ひどい場合は見つけ次第修正ですかね。
※CSSではなく、JavaScriptを使えばURLではなく特定の文字をボタン化することも出来るそうですが、JavaScriptはアドブロックの影響を受けやすいのでできれば避けたいですよね。
まとめ
今ではアフィリエイトのリンクはボタンが当たり前ですが、私はアフィリエイト歴だけは長く、当時はテキストリンクとバナー広告が主流で、当時はこんなおしゃれなアフィリエイトのリンクボタンはありませんでした、
古臭いテキストベースのアフィリエイトリンクは、昔から変えたいと思っていたのですが、ページ数が膨大で、置き換えるのを躊躇していたのですが、CSSで簡単に装飾できるなんて知りませんでした。
それもこれもAI（ChatGPT）のおかげです。なにげにリンクボタンの方法を質問したらこんな物があると教えていただけましたので、感謝しかありません。
今どきのアフィリエイターはリンカーなどのツールを使用しているのでしょうが、CSSによるボタン化はとても簡単ですね。
ただしCSSによる（ボタン化などの）装飾は、ASPによっては「改変」とみなされる場合がありますので自己責任になります。
しばらくこれで様子を見てみます！
追記：シンプルなテキスト風ボタン
カラフルなボタンは目立ちますが、やはり「広告くささ」は出てしまうので、逆にシンプルな「テキスト風のボタン」も作ってもらいました。
クレーだと目立たないので、リンクといえば青なので、文字色は「青」さらに目立たせるために太字に装飾してみました（あくまでもCSSによる装飾）。
これなら、文中にリンクがあっても違和感ありません。一体どれがクリック率高いのか分かりませんが、じっくり検討したいと思います。
日々勉強！！