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

/* ヨメレバ・カエレバ装飾　ここから */
.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;} /* 価格コム */