ブログで商品紹介アフェリエイトブログパーツの定番 カエレバのAmazonや楽天などへのリンクボタンをカスタム!!CSSでフラットデザインにしてみた。レスポンシブ対応。

kaereba_halpost

自分ではフラットデザインになっていると思うのですが、人によってはこれは違うだろうと思われるかもしれませんが、なかなか自分では良い感じに仕上がったのでメモしたいと思います。


アフィリエイトブログパーツ カエレバ

ブログで商品を紹介するときのアフィリエイトブログパーツの定番カエレバです。いつもお世話になっています!!

他にもAmazon専用のamazletG-Toolsなどもありますが、カエレバは複数のサイトの商品リンクを一括で生成してくれるのでいつもカエレバを使用させてもらっています。

カエレバ リンクボタンカスタム

今回は以下のようにボタンをカスタムしました。

フラットデザインのようにしたかったので、
  • フラットデザインでよく使用されている配色を使用
  • 文字を大きめに
  • paddingを多めに
以上のことを意識してみました。

また、ボタンにマウスを乗せたときにゆっくり色が変わるようにもしています。


❚ カエレバリンクボタンCSS

.kaerebalink-box {
}

.kaerebalink-image {
}

.kaerebalink-info {
}

.kaerebalink-name {
}

.kaerebalink-powered-date {
}

.kaerebalink-detail {
}

.kaerebalink-link1 {
}

.shoplinkamazon {
background:#f1c40f!important;
}
.shoplinkrakuten {
background:#e74c3c!important;
}

.shoplinkyahoo {
background:#3498db!important;
}
.shoplinkyahooAuc {
background:#2980b9!important;
}
.shoplinkseven {
background:#3fd47e!important;
}

.shoplinkamazon a,
.shoplinkrakuten a, 
.shoplinkyahoo a,
.shoplinkyahooAuc a,
.shoplinkseven a {
color:#ffffff!important;
text-decoration:none!important;
display:inline-block!important;
padding:5px 5px!important;
margin:5px!important;
}

.shoplinkamazon,
.shoplinkrakuten,
.shoplinkyahoo,
.shoplinkyahooAuc,
.shoplinkseven {
display:inline-block!important;
padding:5px 5px!important;
margin:5px!important;
}

.shoplinkamazon:hover,
.shoplinkrakuten:hover,
.shoplinkyahoo:hover,
.shoplinkyahooAuc:hover,
.shoplinkseven:hover {
background:#2c3e50!important;
-webkit-transition:all 0.50s linear;  
-moz-transition:all 0.50s linear;  
transition:all 0.50s lineart;
}
padding、margin、colorなどは自分のサイト用ですので好きなコードに変更して下さい。

※自分は素人ですの参考程度でお願いしますwww
※ボタン以外のところは人それぞれですので省略しています。


ボタンにマウスを乗せたときにゆっくり色が変わる反応がいらない場合は
-webkit-transition: all 0.50s linear;
-moz-transition: all 0.50s linear;
transition: all 0.50s linear;
を消して下さい。

速度は数字を変更すれば調整できます。


❚ 参考サイト

コード参考サイト:
大変勉強になりました!!


color参考サイト:



今回はデザインが結構気に入っているので当分はこれで落ち着きそうですwww 



Amazonやっぱ黒かな!?多分色変えちゃうかもしれません。気になるwww 

シェアする

フォローする

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です