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

アイキャッチ

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

Qtaro(@Daisuke_9taro)です。

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

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

kaereba_banner

参考記事

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;
}

おまけ♪

このCSSボタンを作成するにあたっては
雰囲気確かめるためにこんな遊び検証をしました。


「川相」




川相

すいません、伝わる方にだけ伝わればいいですwwwwwww

サクッと作ってみましたが、昔スーファミの頃から「パワプロ」やりまくっていた自分としては、ちょっと完成度に不満が残っているので。。どこかでリベンジします(たぶん)


今回の記事は以上です。

それでは良きブログパーツライフを〜♪♪ヾ( ´∀`)*:;,。・★