CSSコピペからはじめよう。ヨメレバ・カエレバのデザイン例とカスタマイズ方法

当ブログのヨメレバ・カエレバのデザイン

もしもアフィリエイトバリューコマース

マイクロソフト Surface Pro 12.3型 Core i5/128GB/4GB

posted with カエレバ

マイクロソフト 2017-06-15

Amazon

楽天市場

Yahooショッピング

カエレバ

ヨメレバ

CSSコード

PC表示：スタイルシート（style.css）

/************************************
** カエレバ、ヨメレバ
************************************/
.kaerebalink-box,
.booklink-box{
overflow: hidden; /* float解除用 */
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
padding:10px;
}
.kaerebalink-image,.booklink-image{
float: left;
margin-right: 15px;
}
.kaerebalink-info,.booklink-info{
 margin:0;
 overflow: hidden;
}
.kaerebalink-name,.booklink-name{
 margin-bottom:24px;
 line-height:1.5em;
}
.kaerebalink-name p,.booklink-name p{
margin:0;
}
.kaerebalink-powered-date,
.booklink-powered-date{
 font-size:12px;
 line-height:120%;
}
.kaerebalink-detail,
.booklink-detail{
font-size: 12px;
margin-top:-10px;
}
.shoplinkamazon,
.shoplinkkindle,
.shoplinkrakuten,
.shoplinkrakukobo,
.shoplinkyahoo{
margin:3px;
padding:4px 10px;
border-radius:3px;
width: 26%;
text-align: center;
font-size:13px;
display:inline-block;
}
.shoplinkamazon a,
.shoplinkkindle a,
.shoplinkrakuten a,
.shoplinkrakukobo a,
.shoplinkyahoo a{
color:#fff;
display:block;
}
.shoplinkamazon,
.shoplinkkindle,
.shoplinkrakuten,
.shoplinkrakukobo,
.shoplinkyahoo{
background-color:#ccc;
}
.shoplinkamazon:hover,
.shoplinkkindle:hover{
background-color:#516c8f;
}
.shoplinkrakuten:hover,
.shoplinkrakukobo:hover{
background-color:#cc7980; 
}
.shoplinkyahoo:hover{
background-color:#ddb358;
}
.article .kaerebalink-link1 img, .article .booklink-link2 img{
display:block;
margin:0 auto !important;
text-align:center;
}

モバイル・タブレット表示：mobile.css

/************************************
** ヨメレバカエレバ
************************************/
.kaerebalink-info,
.booklink-info{
overflow:visible;
}
.kaerebalink-link1,
.booklink-link2{
float:left;
width:100%;
}
.shoplinkamazon,
.shoplinkkindle,
.shoplinkrakuten,
.shoplinkrakukobo,
.shoplinkyahoo{
width: 48%;
margin: 1px;
padding: 5px 0;
}
.kaerebalink-detail,.booklink-detail {
line-height: normal;
}

カスタマイズしたい方へ

ボタンの背景色を変更する

.shoplinkamazon, 
.shoplinkkindle, 
.shoplinkrakuten, 
.shoplinkrakukobo, 
.shoplinkyahoo{ 
background-color:#ccc; 
}

.shoplinkamazon{
background-color:#516c8f; 
}
.shoplinkrakuten{
background-color:#cc7980;
}

ボタンの文字色を変更する

.shoplinkamazon a,
.shoplinkkindle a,
.shoplinkrakuten a,
.shoplinkrakukobo a,
.shoplinkyahoo a{
color:#fff;
display:block;
}

.shoplinkamazon a{
color:#808080;
}
.shoplinkrakuten a{
color:#cc7980;
}

ボタンのホバー色を変更する

.shoplinkamazon:hover,
.shoplinkkindle:hover{
background-color:#516c8f;
}
.shoplinkrakuten:hover,
.shoplinkrakukobo:hover{
background-color:#cc7980; 
}
.shoplinkyahoo:hover{
background-color:#ddb358;
}

opacity:0.6;

ヨメレバ・カエレバのボックスの枠線を消す・色を変える

.kaerebalink-box,
.booklink-box{
overflow: hidden; /* float解除用 */
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
padding:10px;
}