当ブログと運営者について
アフィリエイト

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

 

どうも、「きにぶろぐ.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コードが以下のものになります。

 

 

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

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

 

テキストや背景など編集

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

 

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

 

 

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

 

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

 

 

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

 

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

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

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

 

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

 

 

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

 

 

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

 

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

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

 

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

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

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

 

 

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

 

 

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

 

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

 

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

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

 

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

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

 

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

 

合わせて読んでほしい

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

こちらも読まれています

ABOUT ME
フリーマン
フリーマン
1988年生まれで兵庫県に在住してます。気になることをただひたすらに書き続けて、ブログ運営10ヶ月目で月間10万PV超えを達成。 将来的な資産を作る為に資産運用も実践中。>>詳細プロフィール