Bloggerにてカエレバを綺麗にデザインする【QooQテンプレート】

2020/08/30

Blogger ホームページ作成

t f B! P L

Bloggerでは無料ブログサービスとはいえ、アフィリエイトをすることももちろん可能です。さらにWordPressなどではお馴染みの「カエレバ」はCSSによってさまざまなデザインに変更することができ、それにより通常のテキストリンクよりもクリックを誘うことができます。

今回は「カエレバ・ヨメレバ・トマレバ」のBlogger用のCSSを使ってデザインを変えてみました。テンプレートは「QooQ」です。もしデザインが良いなと思われましたら、是非ご自由に使われてください。

カエレバ・ヨメレバ・トマレバとは?

カエレバ・ヨメレバ・トマレバは「かん吉」さんが作成したブログパーツで、特にAmazonや楽天市場などのアフィリエイトリンクを綺麗に並べることにより、報酬の取りこぼしを防ぎやすくできます。「カエレバ」が最も有名で幾多のサイトで利用されています。

「ヨメレバ」はカエレバの書籍限定バージョンでAmazon、Kindle、楽天ブックスなどの紹介に最適です。

「トマレバ」は宿、ホテルの紹介のためのブログパーツになっています。楽天トラベルやJTBなどの旅行会社へのリンクをまとめて表示できます。

さらに詳しくは「カエレバ」のサイトをご覧ください。カエレバの使用には「もしもアフィリエイト」などへの登録が必要となります。

CSSによるカスタマイズ

もともとのカエレバでも十分に使いやすいのですが、そのデザインをCSSによってカスタマイズすることでさらにクリックされやすくしていこうというのが今回の作戦です。

完成品は次のようなデザインになりました。

CSSカスタマイズ方法 

以下のCSSを追加していただければOKです。(ちょっと長いですが)

/*--------------------------------------------------
カエレバ・ヨメレバ・トマレバ(Blogger調整版)
---------------------------------------------------*/
.cstmreba {
width: 98%;
height:auto;
margin:30px 0;
font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',Helvetica, Meiryo, sans-serif;
line-height: 1.5;
word-wrap: break-word;
box-sizing: border-box;
display: block;
}
.cstmreba a {
transition: 0.8s ;
color:#454545;  /* テキストリンクカラー */
}
.cstmreba a:hover {
color:#737373;  /* テキストリンクカラー(マウスオーバー時) */
}
.cstmreba .booklink-box,.cstmreba .kaerebalink-box,.cstmreba .tomarebalink-box {
width: 100%;
background-color: #fff; /* 全体の背景カラー */
overflow: hidden;
border:double #d2d7e6;
border-radius: 5px;
box-sizing: border-box;
padding: 12px 8px;
}
/* サムネイル画像ボックス */
.cstmreba .booklink-image,
.cstmreba .kaerebalink-image,
.cstmreba .tomarebalink-image {
width:200px;
float:left;
margin:20px 10px 0 0;
text-align: center;
}
.cstmreba .booklink-image a,
.cstmreba .kaerebalink-image a,
.cstmreba .tomarebalink-image a {
width:100%;
display:block;
}
/* サムネイル画像 */
.cstmreba .booklink-image a img,.cstmreba .kaerebalink-image a img,.cstmreba .tomarebalink-image a img {
margin:0 ;
padding: 0;
text-align:center;
}
.cstmreba .booklink-info,.cstmreba .kaerebalink-info,.cstmreba .tomarebalink-info {
overflow:hidden;
line-height:170%;
color: #333;
}
/* infoボックス内リンク下線非表示 */
.cstmreba .booklink-info a,
.cstmreba .kaerebalink-info a,
.cstmreba .tomarebalink-info a {
text-decoration: none;
}
/* 作品・商品・ホテル名 リンク */
.cstmreba .booklink-name>a,
.cstmreba .kaerebalink-name>a,
.cstmreba .tomarebalink-name>a {
font-size:16px;
color:#454545 !important; /* リンク色変更 */
}
/* powered by */
.cstmreba .booklink-powered-date,
.cstmreba .kaerebalink-powered-date,
.cstmreba .tomarebalink-powered-date {
font-size:10px;
line-height:150%;
margin-top:8px;
}
.cstmreba .booklink-powered-date a,
.cstmreba .kaerebalink-powered-date a,
.cstmreba .tomarebalink-powered-date a {
border-bottom: none ;
}
.cstmreba .booklink-powered-date a:hover,
.cstmreba .kaerebalink-powered-date a:hover,
.cstmreba .tomarebalink-powered-date a:hover {
color:#333;
}
/* 著者・住所 */
.cstmreba .booklink-detail,.cstmreba .kaerebalink-detail,.cstmreba .tomarebalink-address {
font-size:12px;
}
.cstmreba .kaerebalink-link1 img,.cstmreba .booklink-link2 img,.cstmreba .tomarebalink-link1 img {
display:none !important;
}
.cstmreba .kaerebalink-link1,.cstmreba .booklink-link2,.cstmreba .tomarebalink-link1 {
display: inline-block;
width: 100%;
margin-top: 20px;
}
.cstmreba .booklink-link2>div,
.cstmreba .kaerebalink-link1>div,
.cstmreba .tomarebalink-link1>div {
float:left;
width:31%;
min-width:125px;
margin:0.5% 1%;
}
/***** ボタンデザインここから ******/
.cstmreba .booklink-link2 a,
.cstmreba .kaerebalink-link1 a,
.cstmreba .tomarebalink-link1 a {
width: 100%;
display: inline-block;
text-align: center;
box-sizing: border-box;
font-size: 13px;
font-weight: bold;
line-height: 180%;
padding: 3% 1%;
margin: 1px 0;
border-radius: 4px;
box-shadow: 0 2px 1px #ccc;
background: -moz-linear-gradient(top,#fafafa,#EEE);
background: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#eee));
}
.cstmreba .booklink-link2 a:hover,
.cstmreba .kaerebalink-link1 a:hover,
.cstmreba .tomarebalink-link1 a:hover {
text-decoration: underline;
}
/* トマレバ */
.cstmreba .tomarebalink-link1 .shoplinkrakuten a { color: #76ae25 !important; }/* 楽天トラベル */
.cstmreba .tomarebalink-link1 .shoplinkjalan a { color: #ff7a15 !important; }/* じゃらん */
.cstmreba .tomarebalink-link1 .shoplinkjtb a { color: #c81528 !important; }/* JTB */
.cstmreba .tomarebalink-link1 .shoplinkknt a { color: #0b499d !important; }/* KNT */
.cstmreba .tomarebalink-link1 .shoplinkikyu a { color: #bf9500 !important; }/* 一休 */
.cstmreba .tomarebalink-link1 .shoplinkrurubu a { color: #000066 !important; }/* るるぶ */
.cstmreba .tomarebalink-link1 .shoplinkyahoo a { color: #ff0033 !important; }/* Yahoo!トラベル */
/* カエレバ */
.cstmreba .kaerebalink-link1 .shoplinkyahoo a {color:
#333399 !important; letter-spacing:normal;} /* Yahoo!ショッピング */
.cstmreba .kaerebalink-link1 .shoplinkbellemaison a { color:#84be24 !important; } /* ベルメゾン */
.cstmreba .kaerebalink-link1 .shoplinkcecile a { color:#8d124b !important; } /* セシール */
.cstmreba .kaerebalink-link1 .shoplinkkakakucom a {color:#314995 !important;} /* 価格コム */
/* ヨメレバ */
.booklink-link2 .shoplinkkindle a { color:#007dcd !important;} /* Kindle */
.booklink-link2 .shoplinkrakukobo a{ color:#d50000 !important; } /* 楽天kobo */
.booklink-link2  .shoplinkbk1 a { color:#0085cd !important; } /* honto */
.booklink-link2 .shoplinkehon a { color:#2a2c6d !important; } /* ehon */
.booklink-link2 .shoplinkkino a { color:#003e92 !important; } /* 紀伊國屋書店 */
.booklink-link2 .shoplinkebj a { color:#f8485e !important; } /* ebookjapan */
.booklink-link2 .shoplinktoshokan a { color:#333333 !important; } /* 図書館 */
/* カエレバ・ヨメレバ共通 */
.cstmreba .kaerebalink-link1 .shoplinkamazon a,
.cstmreba .booklink-link2 .shoplinkamazon a { color:#FF9901 !important; } /* Amazon */
.cstmreba .kaerebalink-link1 .shoplinkrakuten a ,
.cstmreba .booklink-link2 .shoplinkrakuten a { color: #c20004 !important; } /* 楽天 */
.cstmreba .kaerebalink-link1 .shoplinkseven a,
.cstmreba .booklink-link2 .shoplinkseven a { color:#225496 !important;} /* 7net */
/***** ボタンデザインここまで ******/
.cstmreba .booklink-footer {
clear:both;
}
/*** 解像度480px以下のスタイル ***/
@media screen and (max-width:480px){
.cstmreba .booklink-image,
.cstmreba .kaerebalink-image,
.cstmreba .tomarebalink-image {
width:100%;
float:none;
}
.cstmreba .booklink-link2>div,
.cstmreba .kaerebalink-link1>div,
.cstmreba .tomarebalink-link1>div {
width: 95%;
margin: 0 auto 8px auto;
float:none;
}
.cstmreba .booklink-info,
.cstmreba .kaerebalink-info,
.cstmreba .tomarebalink-info {
text-align:center;
padding-bottom: 1px;
}
}

参考にさせていただいたのは、RoughLog(ラフログ)さんのWordPress用のカスタマイズ記事です。ありがとうございます。

シンプルで主張しない感じのデザインで、しかもレスポンシブ対応という素晴らしさでしたので「Blogger」そして「QooQ」テンプレートに合わせてのカスタマイズを行いました。

カエレバ・ヨメレバ・トマレバまで網羅してあるのもありがたく、かなり利用範囲が広いです。

カエレバ・ヨメレバ・トマレバでの設定

デザインは「amazlet風-2(CSSカスタマイズ用)」で、画像は商品などに応じて小か中かのどちらかを選択します。

このほか「もしもアフィリエイト」などへの登録や「カエレバ」での初期設定などがありますが、それぞれのページを見ていただけると説明もしっかりされているので大丈夫と思います。

CSSを張り付ける場所

Bloggerのアップデートで「CSS追加」(「テーマ」⇒「カスタマイズ」⇒「上級者向け」というところにあったはず…)というのが消えたりすることがあります。その時には「メニュー」⇒「テーマ」⇒「点が3つのところ」⇒「HTML編集」

ここで「Ctrl」+「F」キーにて「個別アイテム」と打って出てくる2つ目すぐ下に記載すればCSS追加と同じ意味になります。

使用しているテンプレート

今回のコードはすべて「QooQ」テンプレートに合わせての調整を行っており、他のテンプレートではうまくいかない場合があります。その点はご了承ください。

また、HTMLを編集する場合は必ずテンプレートのバックアップをよろしくお願いします。

もしもアフィリエイト「かんたんリンク」もカスタマイズ

ちなみにカエレバに行き着く前にほとんどの方が遭遇する、もしもアフィリエイトの「かんたんリンク」もカスタマイズしてみました。もしもの「かんたんリンク」はAmazon、楽天市場、Yahooショッピングしか選べないです。

このCSSコードは次のようになります。

/* -------------------------------------
かんたんリンク カスタマイズ(シンプル)
------------------------------------- */
/* --------- 外枠 --------- */
div.easyLink-box {
border:double #CCC !important; /* 2重線 */
border-radius: 5px;
}
/* --- 商品リンク タイトル --- */
p.easyLink-info-name a {
color: #555555 !important; /* 文字色 */
}
/* --------- ボタンサイズ --------- */
.easyLink-info-btn a{
margin: 5px 5px 5px 0!important;
padding: 3px 10px!important;
width: 100%!important
}
/* --------- ボタン色 --------- */
a.easyLink-info-btn-amazon {
background: #fff !important; /* 背景色 */
border: 1px solid #f6a306 !important; /* 外枠 */
color: #f6a306 !important; /* 文字色 */
box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */
}
a.easyLink-info-btn-rakuten {
background: #fff !important; /* 背景色 */
border: 1px solid #cf4944 !important; /* 外枠 */
color: #cf4944 !important; /* 文字色 */
box-shadow: 0px 3px 3px 0px rgba(0,0,0,.25); /* 影 */
}
a.easyLink-info-btn-yahoo {
background: #fff !important; /* 背景色 */
border: 1px solid #51a7e8 !important; /* 外枠 */
color: #51a7e8 !important; /* 文字色 */
box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */
}
/* --- マウスオーバー時のボタン色 --- */
a:hover.easyLink-info-btn-amazon {
opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
background: #f6a306 !important; /* 背景色 */
color: #fff !important; /* 文字色 */
}
a:hover.easyLink-info-btn-rakuten {
opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
background: #cf4944 !important; /* 背景色 */
color: #fff !important; /* 文字色 */
}
a:hover.easyLink-info-btn-yahoo {
opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
background: #51a7e8 !important; /* 背景色 */
color: #fff !important; /* 文字色 */
}
/* --- PC以外の時の設定 --- */
@media screen and (max-width: 480px) {
div.easyLink-box div.easyLink-img,
div.easyLink-box div.easyLink-img p.easyLink-img-box img.easyLink-img-pht {
max-height: 180px !important; /* 商品画像の大きさを調整 */
}
}

参考にさせていただいたのは「ネイネイ」さんの記事です。「超シンプルデザイン」のコードをお借りしました。ほんとにありがとうございます。

PCの表示などでYahooショッピングが2列表示になってしまう部分などを改善するためにBloggerに合わせていじらせていただきました。常に1列に3つが並ぶデザインになります。

かんたんリンクも使い勝手が良いので、扱いやすい方を選ばれるといいと思います。

Bloggerで「カエレバ」CSSカスタマイズまとめ

利用者が日本では極端に少ない「Blogger」でアフィリエイトのさらにデザインに凝る、という方は多くないかもしれませんが0ではないはずです。

これからも「WordPressに負けずにBloggerで戦ってゆく」そんな方の助けになればと思います。とはいってもわたし自身、HTMLやCSSの勉強中なので、それほど上手なコードではないかもしれません。

Bloggerに合わせてもっと良い書き方があるよという方はぜひコメントにて教えてください、お願いいたします。

また、現在使用しているテンプレート「QooQ」についてのカスタマイズ等も他にも扱っています。「QooQ」の作り手、ラムネグさんにも感謝。

QooQ