記事内にアフィリエイト広告を使用している場合があります。

アフィリエイト

カエレバの商品リンクを自分好みのデザインにカスタマイズする方法

 

どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。

楽天やAmazonなどの物販アフィリエイトにおいては、カエレバを使ったブログパーツが非常に便利で、収益効果をより高めてくれるツールの1つです。

 

カエレバで作成できる既存の商品リンクでも十分使えるのですが、商品リンクを自分好みのデザインにカスタマイズすることもできるので、せっかく使える機能があるのに使わないと勿体無いですよね。

 

CSSコードを使ってリンクデザインを編集していくのですが、ワードプレスのブログデザインなどもCSSで色々カスタマイズできますし、CSSってホント万能な機能であると関心する今日この頃です。

というわけで、今回はカエレバの商品リンクをCSSで個性のあるデザインに、カスタマイズしていく方法をご紹介していきたいと思います。

カエレバの商品リンクをカスタマイズ

ここではカエレバのリンクデザインからテキストや背景などの編集をしたり、ショップのリンクテキストをボタン化してオシャレにカスタマイズしていきます。

 

カスタマイズを行うことは楽しいですが、あまりハマりすぎるとキリがないので、その辺を気をつけながら進めていきましょう。

 

カスタマイズを行う前に

まずはカスタマイズの基本となるCSSコードをブログテーマ、私の場合はワードプレスの「style.css」ファイルに追加していくのですが、「どこのコードを追加するの?」と出だしからつまずきそうになりました。

 

コードの編集にはカエレバのブログパーツのデザインの種類から、「amazlet風-2(cssカスタマイズ用)」というのを使うのですが、これは基本的にデフォルトのようなデザインになります。

 

 

その為、ほとんどCSSの記述がないのでほぼゼロの状態からリンクコードを作っていかなければなりません。

それでは時間がかかってしまうので、ある程度のCSSが出来上がっている「amazlet風(改)-1」のデザインのものを、応用しながら自分流にカスタマイズしていきます。

 

CSSコードをブログテーマに追加

カエレバの「amazlet風(改)-1」に記述されたコードを抜き出して、「style.css」ファイルに追加しますがちょっと面倒だったので、ネットで探してみたら「アフィリエイトで稼ぐ方法を全部話そうと思う」さんのこちらの記事内で紹介されていました。

カエレバのカスタマイズ方法まとめ

 

ということで感謝の気持ちでいっぱいになりつつも、早速参考にさせて頂いてそのCSSコードが以下のものになります。

 

/*-- amazlet風(改)-1 --*/
.kaerebalink-box{
    text-align: left;
    padding-bottom: 20px;
    font-size: small;
    /zoom: 1;
    overflow: hidden;
}

.kaerebalink-image{
    float: left;
    margin: 0 15px 10px 0;
}
 
.kaerebalink-info{
    line-height: 120%;
    /zoom: 1;
    overflow: hidden;
}
 
.kaerebalink-name{
    margin-bottom: 10px;
    line-height: 120%;
}
 
.kaerebalink-powered-date{
    font-size: 8pt;
    margin-top: 5px;
    font-family: verdana;
    line-height: 120%;
}
 
.kaerebalink-kakaku{
    color: .990000;
    font-weight: bold;
}
 
.kaerebalink-cart{
    margin: 10px 0;
    width: 100px;
    height: 25px;
}
 
.kaerebalink-detail{
    margin-bottom: 5px;
}
 
.booklink-footer{
    clear: left;
}
 
.kaerebalink-link1{
    margin-top: 10px;
}
 
/*-- 各ショップリンクに対応 --*/
.shoplinkamazon,
.shoplinkrakuten,
.shoplinkyahoo,
.shoplinkyahooAuc,
.shoplinkseven,
.shoplinkbellemaison,
.shoplinkcecile,
.shoplinkkakakucom{
    display: inline;
    margin-right: 5px;
}

 

上記コードをそのままstyle.cssにコピー&ペーストして、あとはここから必要な部分を変更していきます。

これならあまりCSSに詳しくない初心者の方でも、容易に編集ができると思います。

 

テキストや背景など編集

カエレバの既存の商品リンクでは、テキストの文字サイズが小さかったり背景や枠線がなかったりと、リンクとして目立たない部分があるのでもう少しわかりやすく変更したい方も多いと思います。

 

そこで先程のペーストしたコードから、style.cssに以下のコードを追加・変更してデザインを変えていきます。

 

.kaerebalink-box{/*リンクボックス*/
    background-color: #f5deb3;/*背景色*/
    border: 2px solid #008080;/*枠線の太さ・色*/
}

.kaerebalink-image{/*商品画像*/
    margin: 10px 12px 0px 10px !important;/*上下左右の余白*/
}

.kaerebalink-name{/*タイトル*/
    margin-top: 10px;/*上からの余白*/
}

.kaerebalink-name a{/*タイトル・カエレバ部分*/
    font-size: 18px;/*文字サイズ*/
    font-weight: bold;/*文字を太字に*/
    text-decoration: none;/*下線なし*/
}

.kaerebalink-powered-date {/*posted with部分*/
    color: #2f4f4f;/*文字色*/
    font-weight:bold;/*文字を太字に*/
    font-size: 14px !important;/*文字サイズ*/
    margin-top: -16px !important;/*タイトル間の余白*/
}

.kaerebalink-powered-date a{/*カエレバ部分*/
    font-size: 14px;/*文字サイズ*/
}

.kaerebalink-detail{/*商品詳細部分*/
    color: #2f4f4f;/*文字色*/
    font-weight: bold;/*文字を太字に*/
    font-size: 14px;/*文字サイズ*/
}

 

上記コードはできるだけわかりやすいように説明文を入れていることと、反映しないコードに関しては「!important」で優先順位を上げています。

 

このCSSコードをそのまま表示させると、以下のようにカエレバの商品リンクのデザインが変わるはずです。

 

 

画像の位置や商品タイトルなどの大きさ、リンクの下線を消したり「posted with」や「商品詳細」部分の文字色の変更など、色々と編集していますが運営されているブログに合ったものを使用されてみて下さい。

 

ショップリンクをボタン化する

次にショップリンクのカスタマイズになりますが、ここでは「Amazon」と「楽天」を例にしてボタン化にしていきます。

カエレバでは他にも「Yahoo!ショッピング」や「セブンネット」など、各ショップリンクを追加することもできますし、カスタマイズの方法は全て同じなので簡単に変更できます。

 

最初に追加したCSSコードの下の方に、各ショップリンクに対応したクラスコードがあるので、その中から「Amazon・楽天」のクラスを使って以下のように、style.cssファイルに追記もしくは変更します。

 

/*-- Amazonと楽天のリンクボタン --*/
.shoplinkamazon, .shoplinkrakuten {
    text-align:center;  /*リンク文字をボタンの中央に*/
    float: left;/*ボタンを横並び*/
    width: 30%;/*ボタンの横幅*/
    margin: 10px -50px -10px 80px !important; /*上下左右の余白*/
}

.kaerebalink-link1 a {/*ボタン内のテキストなど*/
    display: block;/*ブロック要素で指定*/
    color: #fff;/*文字色*/
    font-weight: bold;/*文字を太字に*/
    font-size: 15px;/*文字サイズ*/
    text-decoration: none;/*下線なし*/
    height: 30px;/*ボタンの高さ*/
    line-height: 30px;/*リンク文字の位置*/
    transition: 0.3s;/*色が変化する秒数*/
}

.shoplinkamazon a{/*Amazonボタンのみ*/
    border: 2px solid #FF9901;/*枠線の太さ・色*/
    background-color: #FF9901;/*背景色*/
    border-radius: 5px;/*ボタンの角の丸み*/
}
.shoplinkrakuten a{/*楽天ボタンのみ*/
    border: 2px solid #c20004;/*枠線の太さ・色*/
    background-color: #c20004;/*背景色*/
    border-radius: 5px;/*ボタンの角の丸み*/
}

.shoplinkamazon a:hover{/*ホバー時のAmazonボタン*/
    color: #FF9901;/*文字色*/
    background-color: #fff;/*背景色*/
}
.shoplinkrakuten a:hover{/*ホバー時の楽天ボタン*/
    color: #c20004;/*文字色*/
    background-color: #fff;/*背景色*/
}

 

上記コードでは、「Amazon・楽天」の共通したコードで同じデザインを表示させたり、各ショップリンクごとに違うコードを指定して、デザインを変えることもできます。

 

 

※ここでご紹介したデザインから若干変更して使っています。

 

私の場合は各ボタンの文字色や大きさ、配置などは共通のコードで指定して、背景色などは各ボタンで違うコードを指定しています。

ボタンを3つや4つ並列して並べたい時は、「width」や「margin」の数値を変更して調整してみて下さい。

 

スマホ用のCSSで最適化する

スマートフォンで表示させる場合は横幅が狭いので、パソコンと同じように横並びのままでは表示が崩れてしまいます。

なので、スマートフォン用のCSSを用意して最適化をしておきましょう。

 

@media only screen and (max-width: 420px) {
.kaerebalink-box{
    text-align: center !important;/*中央寄せ*/
    padding: 10px;/*全体の余白*/
}

.kaerebalink-name a{/*商品タイトル部分*/
    font-size: 15px;/*文字サイズ*/
}

.kaerebalink-powered-date {/*posted with部分*/
    font-size: 12px !important;/*文字サイズ*/
}

.kaerebalink-powered-date a{/*カエレバ部分*/
    font-size: 12px;/*文字サイズ*/
}

.kaerebalink-detail{/*商品詳細部分*/
    font-size: 12px;/*文字サイズ*/
}

.kaerebalink-image {/*商品画像*/
    float: none !important;/*左寄せを解除*/
}

.shoplinkamazon, .shoplinkrakuten {/*Amazonと楽天のリンクボタン*/
    float: none !important;/*左寄せを解除*/
    display: block !important;/*ブロック要素で指定*/
    width: 100%;/*ボタンの横幅*/
    margin: 0px 0px 0px 0px !important;/*上下左右の余白*/
}
}

 

「float」による左寄せを解除して全て一列に並べることと、文字サイズなどもスマホ用に微調整することで、以下のようにキレイに表示することができます。

 

 

スマートフォン用のCSSは「max-width」が420pxに設定していますが、お好みのサイズに変更して頂いても問題ありません。

 

また、今回のカスタマイズは「amazlet風(改)-1」でも「amazlet風-2(cssカスタマイズ用)」でも対応していますので、使いやすいと思った方をお使い下さい。

 

カエレバのカスタマイズまとめ

ここでご紹介したカスタマイズを元に応用して使えば、デザインをもっと工夫したり自分なりにアレンジができると思うので、運営されているブログやサイトに適したデザインを見つけて下さいね。

 

カエレバの商品リンクもカスタマイズ1つで、雰囲気がガラリと変わるので報酬の発生率やクリック率などにも影響してくるのではないでしょうか。

ただ単にアフィリエイトリンクを作成するだけではなく、こうした細かなカスタマイズを行って、より使いやすく改善することも大切です。

 

ユーザーはちょっとした気配りが感じられるだけでも、好印象に思ってくれることも多いと思うので、カエレバを利用しているけどまだカスタマイズはしていないという方は、ぜひチャレンジされてみて下さい。

 

合わせて読んでほしい

カエレバに続いてヨメレバ導入!オリジナルなリンクにアレンジしたよ

こちらも読まれています

ABOUT ME
フリ
ブログで気になることをただひたすらに書き続けて、10ヶ月目で月間10万PV超えを達成。2018年5月から個人事業主として活動開始。今は資産運用に注力し、投資歴は5年になる。仮想通貨⇒DeFi・BCG・エアドロ案件など。BTC・ETHとNISAで積立中。自由であるために。to be free>>詳細プロフィール