Someday Somewhere

A little something to say in my everyday life

カエレバ・ヨメレバのブログパーツをちょっぴりおしゃれに

もしもアフィリエイトをやっている人たちの中で、カエレバ・ヨメレバのブログパーツを利用している人は多いと思います。 私ももしもアフィリエイトを始めてすぐにこのブログパーツを使い始めました。

このブログパーツのカスタマイズCSSを提供してくれているサイトさんなどもあり、コピペしてそのままずっと使っていたのですが、久しぶりに見直す機会があり、カスタマイズし直しました。 それと同時に、ブログパーツのカスタマイズの記事を書いていなかったことにも気づいたので、今回は自分用のメモも兼ねて書いておこうと。(カスタマイズしている時って、夢中というか必死でやっているので、カスタマイズの過程をメモし忘れることが多く、後で、「はて、ここはどうやったかしら???」とか「どのサイトさんの記事を参考にしたのやら・・・」ということがままあります)

デザインCSSに貼り付けたコード

このサイトさんにあるCSSをコピペしました。 www.yukihy.com
当ブログはレスポンシブデザインを使用しているので、貼り付けたコードは次のものです。

/*--------------------------------------
ヨメレバ・カエレバ(レスポンシブ)
--------------------------------------*/
.booklink-box, .kaerebalink-box{
padding:25px;
margin-bottom: 10px;
border:double #CCC;
overflow: hidden;
font-size:small;
}
.booklink-image, .kaerebalink-image{
margin:0 15px 0 0;
float:left;
min-width: 160px;
text-align: center;
}
.booklink-image img, .kaerebalink-image img{
margin:0 auto;
text-align:center;
}
.booklink-info, .kaerebalink-info{
margin:0;
line-height:120%;
overflow: hidden;
}
.booklink-name, .kaerebalink-name{
margin-bottom:24px;
line-height:1.5em;
}
.booklink-powered-date, .kaerebalink-powered-date{
font-size:8px;
margin-top:10px;
font-family:verdana;
line-height:120%;
}
.booklink-detail, .kaerebalink-detail{font-size: 12px;}
.booklink-powered-date, .kaerebalink-detail{margin-bottom:15px;}
.booklink-link2, .kaerebalink-link1{margin-top:10px;}
.booklink-link2 a,
.kaerebalink-link1 a{
width:30%;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
display:inline-block;
margin:5px 2px 0 0;
padding:10px 1px;
text-align:center;
float:left;
text-decoration:none;
font-weight:800;
text-shadow:1px 1px 1px #dcdcdc;
font-size:12px;
color: #fff !important;
}
.booklink-link2 a:hover,
.kaerebalink-link1 a:hover{opacity: 0.6;}
.booklink-link2 a:active
.kaerebalink-link1 a:active{
position:relative;
top:1px;
}
/*ボタンを変えるときはここから*/
.shoplinkamazon a{color:#FF9901 !important;border: 1px solid #FF9901 !important;}
.shoplinkrakuten a{color:#c20004 !important;border: 1px solid #c20004 !important;}
.shoplinkkindle a{color:#007dcd !important;border: 1px solid #007dcd !important;}
.shoplinkkakakucom a{color:#314995 !important;border: 1px solid #314995;}
.shoplinkyahoo a{color:#7b0099 !important;border: 1px solid #7b0099 !important;}
/*ここまでを変更*/
.shoplinkyahoo img{display:none;}
.shoplinkyahoo a{font-size:10px;}
.booklink-footer{display: none;}

@media screen and (max-width: 680px) {
.booklink-box, .kaerebalink-box{padding:15px;}
.booklink-image, .kaerebalink-image{
width: 100px !important;
min-width: initial;
}
.booklink-name > a, .kaerebalink-name > a{
font-size: 15px;
font-weight: bold;
}
.booklink-name, .kaerebalink-name{margin-bottom:12px;}
.booklink-powered-date, .kaerebalink-powered-date{margin-top:5px;}
.booklink-link2 a,
.kaerebalink-link1 a{
width:calc(100% - 4px);
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
margin: 2px 0px;
padding:10px 0px;
}
}

上記コードをデザインCSSに貼り付けます。
※1.今回に限らず、カスタマイズする際には、事前に元のものをコピペするなどして保存しておくことをお勧めします。
※2.このコードを使用した場合、カエレバ・ヨメレバでリンクを作成する時は「amazonlet風-2」というデザインを選択する必要があります。


【スポンサーリンク】
 


リンクボタンの位置が崩れる問題

実際にコピペしてみると、リンクボタンの位置がずれてしまいました。

同じような問題が発生している方もいるのですね。 次のサイトさん(↓)がこの問題の解決方法を書いてくれています。 www.dame-ningen.com
上記コードの中ほどにある「/*ボタンを変えるときはここから*/」から下へ見ていくと「/*ここまでを変更*/」という箇所があります(↓)。

変更前
/*ここまでを変更*/
.shoplinkyahoo img{display:none;}
.shoplinkyahoo a{font-size:10px;}
.booklink-footer{display: none;}

この下に以下のコードを書き加えます。
.shoplinkamazon img{display:none;}
.shoplinkkindle img{display:none;}
.shoplinkrakuten img{display:none;}

赤文字が書き加えた箇所(↓)
変更後
/*ここまでを変更*/
.shoplinkyahoo img{display:none;}
.shoplinkyahoo a{font-size:10px;}
.booklink-footer{display: none;}
.shoplinkamazon img{display:none;}
.shoplinkkindle img{display:none;}
.shoplinkrakuten img{display:none;}

これでリンクボタンの位置ずれが修正できました。

その他のカスタマイズ

リンクボタンの種類を増やした

7netもたまに含ませることがあるので、上記コードに7netのリンクボタンを追加しました。

変更前
/*ボタンを変えるときはここから*/
.shoplinkamazon a{color:#FF9901 !important;border: 1px solid #FF9901 !important;}
.shoplinkrakuten a{color:#c20004 !important;border: 1px solid #c20004 !important;}
.shoplinkkindle a{color:#007dcd !important;border: 1px solid #007dcd !important;}
.shoplinkkakakucom a{color:#314995 !important;border: 1px solid #314995;}
.shoplinkyahoo a{color:#7b0099 !important;border: 1px solid #7b0099 !important;}
/*ここまでを変更*/
.shoplinkyahoo img{display:none;}
.shoplinkyahoo a{font-size:10px;}
.booklink-footer{display: none;}
.shoplinkamazon img{display:none;}
.shoplinkkindle img{display:none;}
.shoplinkrakuten img{display:none;}
赤文字が書き加えた箇所(↓)
変更後
/*ボタンを変えるときはここから*/
.shoplinkamazon a{color:#FF9901 !important;border: 2px solid #FF9901 !important;}
.shoplinkrakuten a{color:#c20004 !important;border: 2px solid #c20004 !important;}
.shoplinkkindle a{color:#007dcd !important;border: 2px solid #007dcd !important;}
.shoplinkkakakucom a{color:#314995 !important;border: 2px solid #314995;}
.shoplinkyahoo a{color:#7b0099 !important;border: 2px solid #7b0099 !important;}
.shoplinkseven a{color:#314995 !important;border: 2px solid #314995 !importnat;}
/*ここまでを変更*/
.shoplinkyahoo img{display:none;}
.shoplinkyahoo a{font-size:10px;}
.booklink-footer{display: none;}
.shoplinkamazon img{display:none;}
.shoplinkkindle img{display:none;}
.shoplinkrakuten img{display:none;}
.shoplinkseven img{display:none;}

リンクボタンの枠線の太さを変更

1px → 2pxに変更しました。

リンクボタン 枠線の太さ
/*ボタンを変えるときはここから*/
.shoplinkamazon a{color:#FF9901 !important;border: 2px solid #FF9901 !important;}
.shoplinkrakuten a{color:#c20004 !important;border: 2px solid #c20004 !important;}
.shoplinkkindle a{color:#007dcd !important;border: 2px solid #007dcd !important;}
.shoplinkkakakucom a{color:#314995 !important;border: 2px solid #314995;}
.shoplinkyahoo a{color:#7b0099 !important;border: 2px solid #7b0099 !important;}
.shoplinkseven a{color:#314995 !important;border: 2px solid #314995 !importnat;}

デザイン

ブログパーツ本体
.booklink-box, .kaerebalink-box{
padding:25px;
margin-bottom: 10px;
border:3px solid #fcf0f1;
overflow: hidden;
font-size:small;
border-radius:5px;
box-shadow:0 0 0 4px #fff, 2px 1px 6px 4px rgba(10, 10, 0, 0.5); /*ボーダーの周りの影*/
}
本体の枠線を二重線から実線に変え、色も変更:
border:double #CCC; → border:3px solid #fcf0f1;

本体の角に多少丸みをもたせる:
border-radius:5px;

本体に影をつけて、ちょっと浮き出た感じにする:
box-shadow:0 0 0 4px #fff, 2px 1px 6px 4px rgba(10, 10, 0, 0.5); /*ボーダーの周りの影*/

デザインの参考にさせて頂いたサイトさん(↓) kanamii.jp
他にも、まだ少し変えたい部分はあるのですが、とりあえず、当ブログの雰囲気に多少合ったデザインに変えることができたかなと思っています。 (変更後↓)
f:id:tsukisai:20190316142217p:plain