以前にカエレバを使用していましたが、Amazonからのデータ検索ができなくなったため、代替できるシステムを探してようやくたどり着いたのが、もしもアフィリエイトのかんたんリンクでした。
そのかんたんリンクですが、元の表示は検索用ボタンがどれもオレンジ色になっています。
すでにいろんなサイトで、このボタンのカスタマイズに関してCSSが公開されています。
ですが、適用したところ、文字が変に回り込みをしてしまい調子が悪かったので、色だけ変えたかったのですが、色だけの変更方法がありませんでした。
あれこれ試してみて、結局色だけ変えても問題なかったので、ボタン色を変更する方法を紹介します。
かんたんリンクのデフォルトのボタン色はすべてオレンジ
生成されたコードを読んでいないので、どこをどうして変えるとかまでは不明です。
とりあえず商品検索からコードを取得するとすべてのボタン色がオレンジなのが、かんたんリンクでコード生成した場合です。
なぜ、ボタン色を同じに揃えたのかは不明ですが、ボタン色が同じだと、画面的にも見づらいので変更したいところ。
様々なサイトで提供されているかんたんリンクカスタマイズを適用してみた
ボタンの色をとにかく変えたいということで、いろんなサイトでボタンの色やマウスオーバーしたときの動作を変えてくれるcssが提供されています。
考えなくてすむので、そのまま流用させてもらったのですが、画面が少しイケてない感じに。
気になる人は気になると思います。
Yahooショッピングのボタンだけなぜか改行されているんですよね、これ。
画面幅にもよるので、画面を縮めるとボタンサイズが変わるのか、文字も改行されなくなります。
ですが、画面サイズ変更で変わるだけなので、どんな形でも崩れてほしくないところ。
これならば、まだかんたんリンクのほうが文字が改行されないので、それをそのまま引き継いでほしいのですが、CSSを書き換えているので、そうもいきません。
いろんなサイトをチェックしても、ボタンのデザインを変えるコードも含まれているので、そのままコピペすると、ボタンサイズも変わってきます。
ボタンの色だけ変更するコード
そもそも、ボタンの色も変えながらボタンの動作やサイズも変えているコードをコピーしているので、色だけ変更できるようにしたらいいということに気づきました。
それすら、コピーで済ませようとしたのですが、そういうところはないようですね。
ということで、以下の色だけ変更するコードを自分で切り出しました。
/* ------------------------------------- */
/* かんたんリンク カスタマイズ */
/* ------------------------------------- */
a.easyLink-info-btn-amazon {
background: #f6a306 !important; /* 背景色 */
}
a.easyLink-info-btn-rakuten {
background: #cf4944 !important; /* 背景色 */
}
a.easyLink-info-btn-yahoo {
background: #51a7e8 !important; /* 背景色 */
}
ボタンの動作等はいらないので、本当に色だけです。
構成変更して、画面確認。
見事に色のみ変わって、文字の回り込みはなくなりました。
というわけで、ボタンに細かい動きとか影はいらない、デフォルトのままで色だけ変更したい場合は、このコードを使ってください。
コメント