デザイン

『カエレバ』の商品リンクをカスタマイズ!コピペするだけでOK!

将軍
将軍
こんにちは!将軍です!

Amazonや楽天などの商品を扱うブログやサイトにおいて、『カエレバ』は収益を高めてくれる素晴らしいツールの一つです。

(実際に貼ってみるとこんな感じ!)

『カエレバ』は元々、見やすいつくりになっていますが、自分好みにカスタマイズをすることも出来ます。せっかくカスタマイズができるのなら自分好みに設定してみたいですよね!

カスタマイズの作業は、『style.css』で編集をしていきます。CSSのコードを編集するときは、必ずバックアップを取ってから作業をするようにしましょう。

カスタマイズ前にすること

カスタマイズ前にバックアップをするのは言いましたが、もう一つしておくことがあります。



カエレバの商品リンク作成画面『デザイン』の部分でamazlet風-2(CSSカスタマイズ用)というのを選んでリンクを作成していきます。

カエレバでカスタマイズをしたもので使用したいときはこちらに切り替えないとコードを編集しても意味がないので切り替えは忘れずに!結構忘れがちなので気をつけてくださいね。

基本となるコードを追加

ネットをさまよって「amazlet風(改)-1」のコードを探してきました。

アフィリエイトで稼ぐ方法を全部話そうと思うさんという方からお借りしてきました(ありがとうございます!)

きにぶろぐ.comのフリーマンさんという方からもお借りしてきました(ありがとうございます!)

このコードが『カエレバ』のカスタマイズの基本になりますので、これらをコピーして『style.css』にペーストしてください。

カスタマイズ

ここでは、デフォルトでついていなかった枠や、テキストの大きさや色を変えるコードになります。このコードを貼り付けて、デザインを変えていきましょう!



商品リンクをボタン化

このCSSは、それぞれの商品リンクをボタン化するコードになります。今回は、Amazon、楽天、Yahoo!ショッピングの3つのコードです。

新たにショップリンクを追加したい場合は、「Yahoo!ショッピング」や「セブンネット」など、各ショップリンクに対応するコードを追加してカスタマイズをしていくかたちになります。



ちなみに各ショップリンクはこのようになっています。

それぞれのリンク
  • Amazon「.shoplinkamazon」
  • 楽天「.shoplinkrakuten」
  • Yahoo!ショッピング「.shoplinkyahoo」
  • ヤフオク「.shoplinkyahooAuc」
  • 7net「.shoplinkseven」
  • ベルメゾン「.shoplinkbellemaison」
  • セシール「.shoplinkcecile」
  • 価格コム「.shoplinkkakakucom」

スマートフォンに対応させるコード

スマートフォンとパソコンでは表示される幅が違いますので、パソコンではうまくいっていても、スマートフォンでは崩れている場合があります。なので、スマートフォン用のCSSも用意しておきましょう!

まとめ

『カエレバ』のカスタマイズで商品リンクをさらに見やすくできたでしょうか。カスタマイズするだけで印象がガラッと変わってきますので、印象が良いものを作りたいですね。思わず押したくなるようなものを、自身のサイトにあったものを作ってみてください。

もし『うまく表示されないよ!』という方がいましたら、一度キャッシュを削除してもう一度CSSを更新してみてください。