ダメ人間ブログ

30代職歴なしニートの闇を放出してるブログです

カエレバのカスタマイズ、リンクのボタンがずれた時の解決法まで解説しました

Amazonアソシエイト、楽天アフィリエイトで物販アフィリエイトをやろうと思った時に使うと便利なツール「カエレバ」という物があります。こちらです。


商品紹介ブログパーツ カエレバ


これを使うとAmazon、楽天、その他のリンクを同時に表示できてリンクを貼るのが簡単になるんです。まだ知らなかったという方はぜひお使いください。便利ですよ。


今回は、カエレバをお使いの方でデザインをカスタマイズしたいという方へ向けた記事です。まだカスタマイズしていないという方はこの記事の手順どおりにやればできると思うのでやってみてください。


オススメのカエレバのデザイン

カエレバを使ってそのままリンクを貼ると最初はこんな感じのデザインになりますよね。



このままだとちょっと分かりずらくてせっかく貼ったリンクをクリックして貰える確率が減る可能性があるんです。デザインでクリック率が下がったんじゃもったいないですよね。


なのでカエレバを使っているほとんどの人はデザインをカスタマイズして使っているんです。例えば、同じカエレバのリンクだとしてもこんなデザインだったらどうですか?



さっきのリンクより見やすくて分かりやすくてボタンをクリックしやすい感じがしませんか?さっきのリンクと比べるとかなりスッキリしてますよね。


このデザイン、けっこう色々なブログで見た事ありませんか?私は他の人のブログで見てコレ良いなって思ってこのデザインにしました。かなりの人が使っている素晴らしいデザインだと思います。


せっかくアフィリエイトリンクを貼るんだから見やすくてクリックされやすいデザインの方が良いのは明白です。まだカエレバをカスタマイズしていないという方はぜひカスタマイズをして見やすいデザインに変更してみましょう。


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

カエレバをカスタマイズするにはCSSにコードを貼り付けるだけなのでそんなに難しくはありません。コピペさえできれば誰でもできるので難しそうと敬遠せずにやってみましょう。


今回は私も使っている先ほど紹介したデザインにカスタマイズする方法を紹介します。違うデザインが良いという方は「カエレバ カスタマイズ」などで検索して色々と探してみるといいですよ。


この見やすいデザインを作ってくださったのはYukihyさんという方です。こちらのサイトでCSSのコードが紹介されています。


ヨメレバ・カエレバのデザインをCSSで変更するカスタマイズ! - Yukihy Life


こちらのサイトで紹介されているカスタマイズのPCの所に書いてあるコードを、ブログのCSSの一番下にそのままコピーして貼り付けるだけです。すごく簡単。本当にこれだけですのであっという間に終わります。


(貼り付ける場所をCSSの一番下って書きましたけど、ブログによって違うかもしれないのでそれぞれのブログで調べてもらって正しい位置にコピペしてください。)


ちゃんと反映しているかどうか確認するために、ブログにカエレバのリンクを貼ってみましょう。無事にデザインが変更されていれば終了です。


あ、リンクを作成する時は「amazlet風-2(cssカスタマイズ用)」で作ってくださいね。他のデザインで作るとデザインが崩れてしまう可能性がありますから。


カエレバをカスタマイズする予定があるけど、とりあえずリンクを貼るのが先という方は最初から「amazlet風-2(cssカスタマイズ用)」でリンクを貼っておけば後でカスタマイズしても問題が起きませんよ。


私は最初、何も知らずに「amazlet風-2(cssカスタマイズ用)」じゃないデザインでリンクを貼ってしまっていたので1から貼り直しになりました。なので先にリンクを貼ってしまってからカスタマイズするという方はちょっと注意してください。


リンクのボタンがずれている場合の修正方法

実際にカエレバのリンクをブログに貼ってみたら、リンクのボタンがずれている方はいませんか?こんな感じに。



私もこうなりました。当時は言われた通りにコードを貼り付けたのになんで?って悩みました。「カエレバ ボタン ずれ 直し方」とかで検索して解決方法を探しましたよ。


同じようにボタンがずれて困っている方がいると思います。でも大丈夫です。ちゃんと解決方法も紹介しますから。


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;}

のコードをコピペすればOKです。こんな感じになります。(赤字が追加した部分)

/*ここまでを変更*/
.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をカスタマイズするなんて怖くて困ってた初心者だったんで、無事にボタンのズレまで解決できてデザインがキレイになった時はメチャクチャ嬉しかったです。やっとできた~って。


同じような初心者の方がこの記事を見てカスタマイズできていたら嬉しいです。


これでデザインも整って物販アフィリエイトをやるスタートラインに立てたと思うので頑張ってアフィリエイトしていきましょう。