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

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

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

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

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・楽天」の共通したコードで同じデザインを表示させたり、各ショップリンクごとに違うコードを指定して、デザインを変えることもできます。

無理なく続けられる! 副業でも充分稼げるアフィリエイトのためのブログの書き方講座

posted with カエレバ

鈴木利典ソシム 2017-08-31

Amazon

楽天市場

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

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

ボタンを３つや４つ並列して並べたい時は、「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」による左寄せを解除して全て一列に並べることと、文字サイズなどもスマホ用に微調整することで、以下のようにキレイに表示することができます。