【WordPress】カエレバ・ヨメレバのデザインを簡単にボタン化する方法

Pocket

どうも藤です。

今回はカエレバ・ヨメレバを導入してみましたので
そのデザインをカスタマイズしてボタン化する方法をお伝えします。

カエレバ・ヨメレバ

カエレバとは

わかったブログを運営されているかん吉さんが開発した商品紹介ブログパーツです。

カエレバは主に商品紹介用のブログパーツ。
ヨメレバは書籍の紹介のブログパーツです。
ほかにもトマレバ・ポチレバがあります。

かん吉さんの詳しいプロフィール等はかん吉さんのわかったブログをご覧ください。

でこのブログパーツが便利でいろんな方が使用されています。
どのように便利かというと

「カエレバ」ブログパーツは、ブログ上で、特に量販品を紹介するためのブログパーツです。アマゾン、楽天市場、Yahoo!ショッピングなどの複数のネットショッピングモールへのリンクを表示することで、アフィリエイト報酬のとりこぼしを減らせます

楽天ポイントを貯めている人はAmazonでは買いません。彼らは、あなたが紹介した商品を買おうと思っても、楽天へのリンクがなければ、楽天市場へ移動して探します。報酬率を意識して楽天を紹介しないことは、読み手のニーズ無視した、無意味な機会損失です!

カエレバHPより引用

てことなんですが、実際にどういうことかお見せします。

例えばAmazonアソシエイトで商品紹介するとします。
紹介する商品はこのブログで記事にしている【咲17巻】でやってみましょう。

まあこんな感じになるわけです。
Amazonアソシエイトで作ったアフィリエイト広告なので、もちろん購入先はAmazonアソシエイト経由だけですよね。
でも咲17巻が売っているのはAmazonだけではありませんよね?
楽天とか他の通販サイトでも売っています。
AmazonはAmazonアソシエイト、楽天は楽天アフェリエイトでそれぞれ商品紹介バナーを貼っていたらめんどくさいですし、見た目も悪くなります。

それらをまとめてくれるのがカエレバの便利なところです。
では実際に先ほどの咲17巻でカエレバで作ってみます。

とまあこんな感じにしてくれるわけです。
一つの商品紹介にたいして複数のアフェリエイトバナーをまとめてくれるわけです。

使い方やカスタマズ方法などは先人の方々が詳しく書かれていますので
【カエレバ カスタマイズ】で検索してみてください。
沢山出てきますので困らないと思います。

デザインをカスタマイズしてボタン化する方法

で本題がここからです。

このブログパーツはカスタマイズして見た目を変えることができます。
先ほど紹介した咲17巻もカスタマイズしてあります。
普通にカエレバでブログパーツを作ると

て感じになります。
Amazonとかのリンクがテキストリンクになってますよね?
これをボタン化すると

とこうなるわけです。どうですか?ボタン押したくなるでしょう(笑)

このようにカスタマイズすることでクリック率が上がるとかなんとか・・・。

でカスタマイズしてボタン化するにはCSSというに書き込まなければならないのですが
多分もっとも簡単な方法をお伝えします。

とは言っても僕も他の方のサイトを参考にしたのでほんとにちょっとの違いです。
僕が参考に差せていただいたサイトはこちらです。
アフィリエイトで稼ぐ!初心者の為のノウハウブログ
本当に助かりました。

こちらのサイトを読めば簡単にカスタマイズできるようになります。

が!僕の方法はCSSのところだけこの方と違うのでそこだけです。

別に否定しているわけではなくこちらの方法もあるよって程度で認識してください。
上記のサイトやほかのサイトを参考にカスタマイズのCSSコードを貼るとこまで来たら
WordPressの場合は通常、外観→テーマの編集でスタイルシート(CSS)に書き込むんですがCSSっていじるの怖いんですよね。

それを回避する方法としてアフィリエイトで稼ぐ!初心者の為のノウハウブログではSimple Custom CSSというプラグインを紹介されています。

こちらの方法でも全然おkなんですが僕の場合はブラグインすら使いません。

僕の場合はCSSを書き込む所が
外観テーマカスタマイズもしくは

上の画像で出ているサイトを表示をクリック
すると自分のサイトが表示されますのでカスタマイズをクリック。

こうなると思いますのでそしたら一番下に【追加CSS】とありますのでそれをクリック。
そしたらそこにカスタマイズCSSコードをコピペして完了です。

これだけでボタン化ができてしまいます。
カスタマイズのデザインはいろんな方が提供してくださっているので
自分の好みを見つけてみてください。

それでは今日はこれで終わりますノシ。