ヨメレバ・カエレバを可愛いデザインにカスタマイズ!レスポンシブ対応!

レスポンシブにも対応出来る「ヨメレバ・カエレバ」の可愛いデザイン作りましたー。

Amazonアソシエイトや楽天もしもアフィリエイトの商品紹介に「ヨメレバ」や「カエレバ」を利用している方も多いのではないでしょうか?

今回はその「ヨメレバ」または「カエレバ」のデザインを可愛くカスタマイズできるCSSをご用意いたしました!コピペで簡単に出来ますのでよろしければ使ってみてくださいね。

ヨメレバ・カエレバのデザインをカスタマイズする方法

記事にした場合、こんな感じでデザインされます!

レスポンシブデザインの場合でも崩れずに表示されると思います。

あと、ヨメレバ・カエレバで対応するお店が増えた場合でも後述するボタン色を気にしない方であれば修正不要です。デザインが崩れない強いコード(たぶん)だよ(`・ω・´)

ヨメレバ・カエレバ側の設定

まずは、ヨメレバ・カエレバのページからブログパーツを生成する際の設定。
デザインのプルダウンで「amazlet風-2(cssカスタマイズ用)」を選択してソースを入手します。

基本設定

ここからブログ側の設定です。


はてなブログに設定する際は「デザイン>カスタマイズ>デザインCSS」の一番下に入れてみてください。

/* ヨメレバ・カエレバ装飾 ここから */
.booklink-box, 
.kaerebalink-box{
    padding: 25px;
    margin-bottom: 15px;
    background-color: #f7f7f7;
    border: 1px solid #eee;
    text-align: center;
}
.booklink-powered-date, 
.kaerebalink-powered-date,
.booklink-detail, 
.kaerebalink-detail{
     font-size: 80%;
     margin-bottom: 15px;
}
.booklink-link2 div,
.kaerebalink-link1 div{
    display: inline-block;
    margin: 5px 10px 8px 3px;
}
.booklink-link2 a,
.kaerebalink-link1 a{
    display: inline-block;
    color: #fff;
    font-size: 85%;
    font-weight: bold;
    text-decoration: none;
    width: 120px;
    padding: 3px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: 1px dashed #fff;
    background-color: #454545;
    box-shadow: 0 0 0 3px #454545;
}
.booklink-link2 a:hover,
.kaerebalink-link1 a:hover {
    opacity: 0.5;
 }
.booklink-link2 img,
.kaerebalink-link1 img{
    margin-left: -1px;
}
.booklink-footer{
    clear: both;
}
/* ヨメレバ・カエレバ装飾 ここまで */

ボタン色の設定

上記のコードだけで利用する場合、ボタン色はモノクロになります。

色を変えたい場合は、以下から該当するお店のタグにお好きなカラーコードを入れて、上記コードの最後に追記してください。

/* お好きなカラーコードを設定してご利用ください */
.shoplinkamazon a      {background-color: #ff9900; box-shadow: 0 0 0 3px #ff9900;} /* Amazon */
.shoplinkkindle a      {background-color: #48a3c6; box-shadow: 0 0 0 3px #48a3c6;} /* Kindle */
.shoplinkrakuten a     {background-color: #B12704; box-shadow: 0 0 0 3px #B12704;} /* 楽天 */
.shoplinkrakukobo a    {background-color: #f06018; box-shadow: 0 0 0 3px #f06018;} /* 楽天kobo */
.shoplinkseven a       {background-color: #454545; box-shadow: 0 0 0 3px #454545;} /* 7net */
.shoplinkbk1 a         {background-color: #454545; box-shadow: 0 0 0 3px #454545;} /* honto */
.shoplinkehon a        {background-color: #454545; box-shadow: 0 0 0 3px #454545;} /* ehon */
.shoplinkkino a        {background-color: #454545; box-shadow: 0 0 0 3px #454545;} /* 紀伊国屋書店 */
.shoplinkebookjapan a  {background-color: #454545; box-shadow: 0 0 0 3px #454545;} /* ebookjapan */
.shoplinktoshokan a    {background-color: #454545; box-shadow: 0 0 0 3px #454545;} /* 図書館 */
.shoplinkyahoo a       {background-color: #454545; box-shadow: 0 0 0 3px #454545;} /* Yahoo! */
.shoplinkbellemaison a {background-color: #454545; box-shadow: 0 0 0 3px #454545;} /* ベルメゾン */
.shoplinkcecile a      {background-color: #454545; box-shadow: 0 0 0 3px #454545;} /* セシール */
.shoplinkwowma a       {background-color: #454545; box-shadow: 0 0 0 3px #454545;} /* Wowma! */
.shoplinkkakakucom a   {background-color: #454545; box-shadow: 0 0 0 3px #454545;} /* 価格コム */

上記でAmazon・Kindle・楽天・楽天koboに設定されているカラーコードは見本と同じ色になります。

リンク周りの点線を消したい場合の設定

リンク周りの点線が要らないって方もいるかもしれないので一応。
基本設定に記載したCSS内にある、以下の1行を消していただければオッケーです。

border: 1px dashed #fff;

おわりに

いかがでしたか?
カスタマイズもゴリゴリしちゃってOKですので、ご自由に使ってくださいませ。

ちなみにこのデザイン、先日公開したテーマとお揃いで使えるように作ってあります。
よろしければ、こちらとあわせて覗いてみてくださいね!

www.yume-kawa.com

ではでは('ω')ノシ