有名ブロガーのかん吉さんが公開してくれているヨメレバ・カエレバはブログに貼るAmazonや楽天などの複数の商品リンクをひとつにまとめてくれる非常に便利なサービスです。
今回、このヨメレバ・カエレバをアフィリエイター御用達のWordPressテーマ「AFFINGER4」に実装することができたので、実際のやり方について説明していきたいと思います。
ヨメレバ・カエレバのメリット・デメリット
同じ商品でもAmazonや楽天など多数のショッピングモールで売られていていることがあります。
Amazonアソシエイトリンクを貼ったページにせっかくユーザが訪れてくれても、もしその方が楽天ユーザーだったらそのリンクから購入することは出来ないばかりか、クッキーによるアフィリエイト報酬までも丸々頂戴できなくなります。
そんなときに便利なのがヨメレバ・カエレバですが、デフォルトのままだとクリックする場所が分かり辛く、様々なブロガーさんなどがCSSをいじって綺麗に見せたり、クリックしやすいようにリンクをボタン化してくれています。
実装することで、たとえばこんな感じになります。
綺麗に表示させることができていると思います。
（IE、cromeとiPhoneのみしか動作確認していません）
今回参考にしたサイト
今回ヨメレバ・カエレバのカスタマイズをするにあたって、ゆきひーさんが運営しているWeb制作・プログラミングなどのネタが満載のブログYukihy Lifeでご紹介してくださっているヨメレバ・カエレバのコードを使用させていただきました。
コードの転載はNGとのことなので、実際のコードは下記記事でご確認ください。
ゆきひーさん、ありがとうございます。
AFFINGER4での設定方法
AFFINGER4はレスポンシブデザインですのでPC用とスマホ用の設定をする必要があります。
ですので、ゆきひーさんが作成してくれているコードも2種類貼り付ける必要があります。
ヨメレバ・カエレバ（スマホ）
この2つのコードを用意してください。
ヨメレバ・カエレバ（PC）の貼り付け場所
AFFINGGER4には親テーマと子テーマがあります。
PC用の貼り付け場所は親テーマのスタイルシート (style.css)内です。
まずはCtrl+Fなどで以下のコードが記述されている場所を探してください。
/*media Queries PCサイズ（960px）以上で適応したいCSS - PCのみ
以下のようなコードが見つかると思いますので、その下にゆきひーさんのヨメレバ・カエレバ（PC）コードをそのまま貼り付けてください。
---------------------------------------------------------------------------------------------------*/
@media print, screen and (min-width: 960px) {
PC用の設定は以上です。
ヨメレバ・カエレバ（スマホ）の貼り付け場所
続いてスマホ用のコード貼り付け場所です。
AFFINGER4子テーマのスタイルシート (style.css)を表示させます。
ゆきひーさんのヨメレバ・カエレバ（スマホ）コードを一番下に貼り付けます。
以上で設定は終了です。
注意点について
ヨメレバ・カエレバのデザインは「amazlet風-2(csカスタマイズ用)」を選択するようにしてください。
他のデザインだとcssが崩れてしまうそうです（ボタンの配置場所などが若干ずれたりします）。
また、cssなどのコードをいじる際は事前にコードをコピーしておくなど、必ずバックアップを取るようにしてください。
ボク自身、cssやphpなどただの呪文のようにしか見えずかなりのド素人です。
もし間違いなどお気づきの点がございましたらコメントをいただけると幸いです。