カエレバのリンクボタンカスタマイズ！CSSのみで名作野球ゲーム「パワプロ」っぽいボタンにする方法

2014 3/04

2014.03.04 2014.09.30

room9（ルームナイン）にお越し頂きありがとうございます。

Qtaro（＠Daisuke_9taro）です。

「カエレバ、ヨメレバ」使ってますか？

アフィリエイトをする方には欠かせないブログパーツ「カエレバ、ヨメレバ」ですが、ショップリンクをボタン風に変えると、よりユーザにより気にしてもらいやすくなり、オリジナル性もグッと高まります。

参考記事

5分で完了！カエレバのリンクを目立つボタンにしてクリック率を上げる方法【CSSのコピペでOK】

このブログはまだ特に大きな変更はしてないんですが
そんなこと考えながらCSSをイジイジしていたところ、なぜか
「某有名野球ゲーム」
っぽいボタンができたので、せっかくなのでコードを晒しておきます。

結構個性がモリモリなので、このブログでは使ってませんが　笑
元野球少年ブロガーの方は是非使ってみて頂ければと思います。

CSSのみで「パワプロ」風ボタンを作る

というわけで、CSSのみで「パワプロ」っぽいボタンを実現します。
見てもらった方早いと思うので、画面イメージから。

これがカエレバ通常。

で、これがパワプロ風CSS適用後。

おいおい、サクッと作った割には満足度けっこう高めじゃん。笑

自分でビックリ
ちょっとテンション上がったわ。。^^;

実装方法

以下のCSSをお使いのテーマのスタイルシートにコピペするだけでOKです。
※最新verブラウザ（Chrome,Firefox,Safari）では表示確認済
※Amazon、Kindle、楽天用のボタンです
※カエレバ用で作成してます（ヨメレバも使えるハズ。。）

フォントはBoldにしてMac用には「ヒラギノ丸ゴシック」,Windows用には「メイリオ」使いました。
もっと凝れたかもですが、標準フォントで雰囲気近いあたりってことで。

.shoplinkamazon, .shoplinkkindle, .shoplinkrakuten {
  background: linear-gradient(left top, #F3FFFF,  
        #72DBEC 10%,  
        #72DBEC 89%,  
        #16A2C2);
  background: -moz-linear-gradient(left top, #F3FFFF,  
        #72DBEC 10%,  
        #72DBEC 89%,  
        #16A2C2);
  background: -webkit-gradient(linear, left top, right bottom, from(#F3FFFF),  
        color-stop(0.1, #72DBEC),  
        color-stop(0.89, #72DBEC),  
        to(#16A2C2));
  border: 3px solid #338ED2;
  border-radius: 15px;
  box-shadow: 0 0 5px -3px #2A6CDA;
  display: inline-block;
  padding: 14px 18px;
}
.shoplinkamazon > a, .shoplinkkindle > a, .shoplinkrakuten > a {
  color: #FFFFFF;
  font-family: Hiragino Maru Gothic ProN,Meiryo;
  font-size: 27px;
  font-weight: bold;
  text-decoration: none;
  text-shadow: 2px 2px 3px #25549E, -2px 2px 3px #25549E, 2px -2px 3px #25549E, -2px -2px 3px #25549E;
}
.shoplinkamazon > a:hover, .shoplinkkindle > a:hover, .shoplinkrakuten > a:hover {
  color: #FFFFFF;
  opacity: 0.5;
}