ハリーポッター映画全シリーズをお得に視聴したい方は
アフィリエイト

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

ヨメレバのオリジナルリンク

 

どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。

アフィリエイトに便利なカエレバを前に導入したので、今回はブックショップに強いヨメレバも導入してみました。

私の場合はすでにカエレバの商品リンクをCSSでカスタマイズしていたので、「ヨメレバもそのままCSSが使えるだろう。」と思っていたので、使ってみるとビックリ!

 

「ショップリンクのボタンデザインが崩れまくっとるがな!!!」

 

考えてみればカエレバと違って「Kindle」などのショップリンクがあるので、CSSが適用しないのも無理ないですね。

そこでヨメレバ専用のCSSを追加して、オリジナルリンクを作ってみましたのでここでご紹介します。

カエレバのCSSをそのまま使うと

カエレバで使っている商品リンクは人それぞれ違うと思いますが、私が現在使用しているデザインはこちらになります。

 

 

カエレバをまだ使っていない方や「こんなデザインにしてみたいなぁ。」と思っている方はこちらの記事を参考にしてみて下さい。

参考:アフィリエイトに便利な「カエレバ」の登録方法と使い方の基本を図解

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

 

このCSSデザインをヨメレバにも使ってみると、

 

 

ショップリンク以外はカエレバのCSSがしっかり反映されているので、このまま使っても問題はなさそうですが、これではリンク先に上手く誘導できませんよね。

私がユーザーの立場だったら、「おいおい、このリンク大丈夫なんか?」って思っちゃいます。

 

ヨメレバ用にカスタムすると

そこで基本はカエレバでカスタマイズしたCSSを使いつつ、ショップリンクのボタンはヨメレバ用に変更します。

ベースとなるコードはすでにある状態なので、あとは多少のコードを追加するだけでこのような商品リンクが出来上がります。

 

 

これなら「Amazon」「Kindle」「楽天ブックス」がちゃんと案内できます。

ヨメレバでは他にも「楽天kobo」「honto」「紀伊國屋書店」など、書籍に特化したショップリンクが使えるので、カエレバと併用するのがオススメです。

 

オリジナルリンクのCSSコード

ヨメレバのリンクを作成していきますが確認として、私がカエレバでデザインしたCSSコードがベースなので、まずは以下の記事を参考にコードを追加して下さい。

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

 

また、コードを追加するときにはカエレバとヨメレバにCSSが反映するよう、以下のように追加していきましょう。

 

 

「booklink」の方がヨメレバのリンクのこと意味しています。

ここまで準備ができたら、オリジナルのヨメレバ用ショップリンクを作成していきます。

 

style.cssに追加する

ワードプレスの子テーマにある「style.css」に以下のコードを追加しますが、自分のわかりやすい場所にコピー&ペーストして下さい。

 

 

リンクボタンの幅や間隔、配色やマウスホバー時の変化などは、お好みのデザインに変更されて使ってみて下さい。

 

ここでは「kindle」に対応したコードだけになるので、もし他のショップリンクも追加したい場合は、以下のショップリンク用のコードから好きなものを追加していきましょう。

 

 

また、「Amazon」と「楽天」に関してはカエレバとヨメレバ共通になっているので、特に変更する必要はありません。

ただ、コードの中にはすべてのショップに共通して使っているものがあるので、今回で言えば「kindle」を追加したので、共通コードはこのように変更する必要があります。

 

 

「.shoplinkkindle」がkindle用のものなので、これを追加することを忘れないようにしておきましょう。

 

スマホ用のコード

スマホ用としてカエレバで使っているコードの中に、ヨメレバにも対応するよう以下のコードを追記して下さい。

 

 

「kindle」のショップリンクの追加も忘れずに!

これでスマホでヨメレバの商品リンクを表示させると、このようになるはずです。

 

 

以上でヨメレバ用のオリジナルリンクは完成となります。

 

ヨメレバのカスタムまとめ

Amazonや楽天のアフィリエイトをしていたら、本の紹介をする機会も多くなると思いますし、そんな時にはヨメレバが便利ですよね。

特に本が好きなユーザーにとっては、色々なブックリンクがある方が使いやすいでしょう。

 

カエレバと合わせて活用していけば、上手く商品を紹介していくことができるようになるので、リンクデザインもカスタマイズして成果に繋げていきましょう。

 

合わせて読んでほしい

もしもアフィリエイトで楽天・Amazonの収益アップ!?その理由を解説

こちらも読まれています

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