などで物販アフィリエイトをやろうと思った時に使うと便利なツール
「カエレバ」
という物があります。こちらです。
これを使うとAmazon、楽天、その他のリンクなどを同時に表示できるようになり、商品のリンクを貼るのが簡単になるんです。
まだ知らなかったという方はぜひ使ってみてください。
超便利ですよ。
「カエレバ」のちょっとした紹介も終わった所で本題に入ります。
今回の記事は、カエレバをお使いの方で
「デザインをカスタマイズしたい」
という方へ向けた記事になります。
まだカスタマイズしていないという方はこの記事の手順通りにやれば簡単にできるのでやってみてください。
オススメのカエレバのデザイン
カエレバを使ってそのままリンクを貼ると最初はこんな感じのデザインになりますよね。
このままだとちょっと分かりずらく、せっかく貼ったリンクをクリックして貰える確率が減る可能性があるんです。
デザインでクリック率が下がったんじゃもったいないので、カエレバを使っているほとんどの人はデザインをカスタマイズして使っています。
例えば、同じカエレバのリンクだとしてもこんなデザインだったらどうでしょうか。
さっきのリンクよりスッキリとまとまり、かなり見やすくなっていると思います。
リンクの意味が分かりやすくなっているので、どことなくボタンをクリックしやすい感じがしませんか？
イマイチピンとこない方だと
「見やすいのは分かるけど、そこまで変わる？」
と思ってしまうかもしれませんが、このちょっとした違いがクリック率を上げるポイントだったりするんですよ。
初期のまま使っていると読者にとっても分かりにくく不親切なので、これを機にちょっとデザインを変更してみましょう。
今回は、色々見てきた中でも一番スッキリしている上記のデザインへの変更方法を紹介しますね。
カエレバのカスタマイズ方法
カエレバをカスタマイズするには「CSSにコードを貼り付けるだけ」
なのでそんなに難しくはありません。
コピペさえできれば誰でもできるので難しそうと敬遠せずにやってみましょう。
私も使っているシンプルなリンクデザインを作ってくださったのはYukihyさんという方です。
下記リンクのサイトでCSSのコードが紹介されています。
ヨメレバ・カエレバのデザインをCSSで変更するカスタマイズ！ - Yukihy Life
こちらのサイトで紹介されているカスタマイズの所に書いてあるコードを、ブログのCSSの一番下にそのままコピーして貼り付けるだけです。
本当にこれだけですのであっという間に終わります。
すごく簡単ですね。
（貼り付ける場所をCSSの一番下って書きましたけど、ブログによって違うかもしれないのでそれぞれのブログで調べてもらって正しい位置にコピペしてください。）
ちゃんと反映しているかどうか確認するために、ブログにカエレバのリンクを貼ってみましょう。
無事にデザインが変更されていれば終了です。
あ、「カエレバ」でリンクを作成する時は
「amazlet風-2（cssカスタマイズ用）」
で作ってくださいね。
他のデザインで作るとデザインが崩れてしまう可能性がありますから。
カエレバをカスタマイズする予定があるけど、
「とりあえずリンクを貼るのが先」
という方は
最初から「amazlet風-2（cssカスタマイズ用）」
でリンクを貼っておけば後でカスタマイズしても問題が起きませんよ。
私は最初、何も知らずに「amazlet風-2（cssカスタマイズ用）」じゃないデザインでリンクを貼ってしまっていたので１から貼り直しになりました。
なので先にリンクを貼ってしまってからカスタマイズするという方はちょっと注意してください。
リンクのボタンがずれている場合の修正方法
実際にカエレバのリンクをブログに貼ってみたら、リンクのボタンがずれている方はいませんか？こんな感じに。
私もこうなりました。
当時は
「言われた通りにコードを貼り付けたのになんで？」
って悩みましたよ。
「カエレバ ボタン ずれ 直し方」
とかで検索して解決方法を探しまくりましたしね・・・
たぶん、当時の私と同じようにボタンがずれて困っている方がいると思います。
でも大丈夫です。
ちゃんと解決方法も紹介しますから。
原因が分かれば解決するのもあっという間です。
なぜちゃんとコードを貼り付けたのにリンクのボタンがズレているのかというと・・・
「Yukihyさんのコードにはちょっと大事なコードが足りなかったから」です。
なので、ちょろっとコードを足せば解決するので簡単ですよ。
先ほどのCSSコードの一番下に
/*ここまでを変更*/
.shoplinkyahoo img{display:none;}
.shoplinkyahoo a{font-size:10px;}
.booklink-footer{display: none;}という部分がありますよね？
この下に
.shoplinkrakuten img{display:none;}
.shoplinkamazon img{display:none;}
.shoplinkkindle img{display:none;}のコードをコピペすればＯＫです。こんな感じになります。（赤字が追加した部分）
/*ここまでを変更*/
.shoplinkyahoo img{display:none;}
.shoplinkyahoo a{font-size:10px;}
.booklink-footer{display: none;}
.shoplinkrakuten img{display:none;}
.shoplinkamazon img{display:none;}
.shoplinkkindle img{display:none;}
これでボタンのズレが直ってると思います。
これでもボタンがずれているという場合には、
記事のプレビュー画面を「ctrl＋F5」で更新
してみてください。
修正できていてもブラウザの問題で反映されていない場合もありますから。
これでもボタンのズレが直っていなかったら私にはお手上げです。
検索して解決法を探して貰うしかありません。
ごめんなさい。
最後に
基本的にコピペだけだったんで思ったより簡単だったんじゃないでしょうか。カエレバのデザインをカスタマイズできるとけっこう嬉しいですよね。
なんかちょっとアフィリエイトやってる人っぽくなって。
当時の私はCSSをカスタマイズするなんて怖くて困ってた初心者だったんで、無事にボタンのズレまで解決できてデザインがキレイになった時はメチャクチャ嬉しかったです。
「やっとできた～」
って。
同じような初心者の方がこの記事を見てカスタマイズできていたら嬉しいです。
