ノーワーク・ベストライフ

働かない生き方を構築するためのウェブメディア。

Amazon&楽天商品の紹介ツール「カエレバ」の使い方とCSSの設定・カスタマイズ方法

 f:id:matomepro:20180410142247p:plain

ブログでAmazonや楽天の商品を紹介するとき、できるだけ綺麗に、カッコよく表示させたいですよね。

 

普通にAmazonや楽天の商品リンクを掲載するとこのように↓なりますが、これでは見た目がイマイチです。

 

 


 

 

これではあまりにもダサいので、ほとんどのブロガーは見た目にこだわって「カエレバ」というツールを使っています。

今回はカエレバの使い方やCSS(デザイン)のカスタマイズ方法について解説します。

カエレバを使えばこんな風に↓

 

 

商品リンクを紹介するとき、

  • Amazon
  • 楽天

両方の商品リンクを一度に表示できるうえに見た目を整えるこもができます。

ブログで物販商品を紹介している方は参考にしてください。

 

カエレバの使い方と注意点

まずはカエレバにアクセスします。

カエレバ

 

画面を下の方までスクロールするとアフィリエイトコードの設定画面があるので、Amazonや楽天のアフィリエイトコードを設定します。

 

f:id:matomepro:20180410130039j:plain

 

Amazonだとサイトごとにコードを個別に設定することも可能で、「〇〇〇-22」がアフィリエイトコードです。

楽天はログインした状態で「楽天アフィリエイトIDのサイト」にアクセスすると、アフィリエイトコードを知ることができます。

 

それぞれのアフィリエイトコードを入力したら、「保存」をクリックしてください。

 

f:id:matomepro:20180410130101j:plain

 

カエレバではサイトごとにそれぞれ別々のアフィリエイトコードを設定することができます。

特にAmazonのアフィリエイトコード(トラッキングコード)をいくつも持っている方は、使うサイトごとにコードを別々に設定でき、あとで成果を確認する際、どのサイトから売り上げがあったのか確認することも可能です。

 

商品の検索

アフィリエイトコードの設定が済んだら、紹介したい商品を検索します。

ヘッダー部分にある検索欄から商品名などで検索しましょう。

 

f:id:matomepro:20180410130246j:plain

 

検索キーワードの入力欄右側に「Amazon」「楽天市場」「Y! Shopping」「もしも」などを選択する箇所がありますが、これはAmazonのままで大丈夫です。

 

f:id:matomepro:20180410130610j:plain

 

商品の検索をすると、いくつかの候補が表示されます。

候補の中から紹介したい商品を選び「ブログパーツを作る」をクリックしてください。

HTMLコードの出力画面に移ります。

 

f:id:matomepro:20180410130714j:plain

 

検索結果が大量に出てきて紹介したい商品が見つからない場合や、検索結果が0件になった場合は、別の検索キーワードでもう一度検索してみてください。

 

HTMLが表示されない場合

「ブログパーツを作る」をクリックしたあと、なかなかHTMLコードが表示されない場合があります。

その場合は同じ商品名の別の「ブログパーツを作る」をクリックするか、他の商品の紹介に切り替えましょう。

 

真面目に待ち続けると、1時間経っても検索が終わらない場合があります。

 

f:id:matomepro:20180410131131j:plain

 

amazlet風 -2(CSSカスタマイズ用)でHTMLを発行

続いてHTMLコードの編集をします。

 

  • デザイン
  • 紹介するときのサイト
  • 表示するタイトル
  • 画像サイズ(大、中、小)
  • リンクタイプ(nofollow、なし)
  • 表示するネットショップ(Amazon、楽天…など)

が編集できます。

 

このとき、デザインをamazlet風 -2(CSSカスタマイズ用)にしてください。

別のデザインでHTMLを出力すると、この記事でご紹介するCSSが使用できなくなります。

 

f:id:matomepro:20180410131518j:plain

 

初めて使う時だけ

  • デザイン
  • 紹介するときのブログ
  • Amazonと楽天にチェックを入れる

を編集し、「更新」をクリックします。

今後はHTMLを貼り付けるウェブサイトが変わったときだけ「更新」をクリックしていけばOKです。

 

HTMLコードの貼り付け

HTMLコードが出力されたら、一番上のHTMLコード (一番長いやつ)をコピーします。

 

f:id:matomepro:20180410132807j:plain

 

 ブログをHTMLモードに切り替え、該当する箇所に貼り付けてください。

 

f:id:matomepro:20180326172841j:plain

 

CSSの設定

カエレバの設定は終わりましたが、まだデザインは整っていません。

今度はブログのCSSをカスタマイズします。


CSSのカスタマイズは使っているブログサービスのCSS編集画面を開き、以下のコードを書き加えるだけです。

 

/*カエレバ・ヨメレバ(PC版)*/
.kaerebalink-box, .booklink-box {
border: 2px solid #CCCCCC;
padding: 20px;
width: 90%;
max-width:680px;
margin:0 auto;
}
.kaerebalink-image, .booklink-image {
width:20%;
float: left;
}
.kaerebalink-image a img,.booklink-image a img {
width:100%;
}
.kaerebalink-info, .booklink-info {
width:70%;
margin-left: 2em;
float: left;
}
.kaerebalink-name > a, .booklink-name > a {
font-size: 16px;
color: #256CC5;
text-decoration: underline;
}
.kaerebalink-powered-date, .booklink-powered-date {
font-size: 12px;
}
.kaerebalink-powered-date a, .booklink-powered-date a {
color: #256CC5;
text-decoration: underline;
}
.kaerebalink-link1, .booklink-link2 {
margin-top: 1em;
}
.kaerebalink-link1 div, .booklink-link2 div {
margin-right: 5px;
margin-bottom:3px;
text-align: center;
float:left;
width: 30%;
}
.kaerebalink-link1 div:active, .booklink-link2 div:active {
border-top:3px solid #FFFFFF;
margin-bottom: none;
box-shadow:none;
}
.kaerebalink-link1 div a, .booklink-link2 div a {
color: white;
text-decoration: none;
font-weight: bold;
display:block;
width: 100%;
height: 40px;
line-height: 40px;
}
.shoplinkamazon {
background: #FF9900;
box-shadow: 0 3px #B16A00;
}
.shoplinkamazon:hover {
background: #FFB23F;
}
.shoplinkkindle {
background: #0079BA;
box-shadow: 0 3px #015684;
}
.shoplinkkindle:hover {
background: #2797D4;
}
.shoplinkrakuten {
background: #BF0000;
box-shadow: 0 3px #7B0101;
}
.shoplinkrakuten:hover {
background: #DC3939;
}
.shoplinkkakakucom {
background: #25388E;
box-shadow: 0 3px #081658;
}
.shoplinkkakakucom:hover {
background: #485CB7;
}
.shoplinkyahoo {
background: #750992;
box-shadow: 0 3px #3F0250;
}
.shoplinkyahoo:hover {
background: #8F0FB3;
}
.booklink-footer {
height:0;
clear: left;
}

 

はてなブログの場合、ブログの管理画面から

「デザイン」⇒「カスタマイズ」⇒「デザインCSS」と進み、

 

f:id:matomepro:20180319215247j:plain

 

f:id:matomepro:20180326175038j:plain

 

「デザインCSS」の一番下にHTMLコードをコピペで貼り付け、保存すればOKです。

文字の大きさや背景の色を変えたい場合は、font-size や color の数値を色々いじってみてください。

 

まとめ

ブログ全体のデザインと同じように、商品の紹介リンクを綺麗に表示するだけでも印象はガラッと変わります。

 

カッコよくきれいに表示できた方が見た目も良くなり、クリックされやすくなる効果もあります。

 

 細かいことですが意外と重要な意味を持っていますので、ブログをやっている方は「カエレバ」を利用し、CSSのカスタマイズにも挑戦してみてください。