古臭い、テキストベースのアフィリエイトリンクを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によっては「改変」とみなされる場合がありますので自己責任になります。
しばらくこれで様子を見てみます！
完成しました
当運営サイトのテキスト風ボタンも紆余曲折がありまして、これが最終系でしょうか。
ボタンの色は白ベースで、テキストの前にアイコンを付加。
さらに目がチカチカしないように、ボタンの色は楽器店サイトのみに色を付ける程度に留め、スマホ表示時はレスポンシブデザインで中央揃え。
アフィリエイト用リンクボタン（スマホ用）
アフィリエイト用リンクボタン（PC用）
当初はアフィリエイトリンクのみのボタン化でしたが、音楽系サイトでよく使うYouTubeもボタン化しました。
視認性が良くなり、かつ広告臭が抑えられ、良くなったと思います。
日々勉強！！
