カエレバ/ヨメレバで広告を貼る

カエレバ/ヨメレバの広告を貼る

アフィリエイトを行う中でカエレバ(とヨメレバ)を使っている方も多いかと思います。SANGOでは、カエレバ用のデザインをCSSで指定済みです。

カエレバのデザイン

カエレバ挿入時にデザインをamazonlet風-2(CSSカスタマイズ用)にすると、以下のようなデザインで表示されます。

好みに応じてさらにカスタマイズしてご利用ください。

トラブル対処法

余白が大きくなってしまう場合

余白が大きくなってしまう場合には、おそらく「もしもアフィリエイト」などのアクセス確認用画像が悪さをしています。以下のCSSを子テーマのCSSなどに追加することで、対処できるかと思います。

CSS

.kaerebalink-name img , .kaerebalink-image > img{
    display: none;
}
.kaerebalink-name p {
    margin-bottom: 0;
}

商品名の下線を消したいとき

下記のCSSを追記することで、消えるかと思います。

CSS

.kaerebalink-name p a {
    text-decoration: none;
}

ちなみにカエレバ/ヨメレバのスタイル指定はentry-option.cssで行っています。お好みでカスタマイズしてくださいませ。


ヨメレバのデザイン

ヨメレバを挿入する場合にもamazonlet風-2(CSSカスタマイズ用)を選ぶと、以下のように表示されます。

画像の下に不自然な余白が出来てしまう場合

おそらく、もしもアフィリエイトの計測用の画像が悪さをしています。下記のCSSを貼ると、修正されるかと思います。

styke.css

.booklink-image > img {
    display: none!important;
}

55 COMMENTS

アバター
としま 2022/07/25

カエレバのリンクボタンがテキストリンクになってしまう?

SANGO3.0になってからだと思うのですがカエレバのリンクボタンがテキストリンクに変わってしまっているようです。これは不具合なのでしょうか?それとも3.0にともなう表示崩れなのでしょうか?

回答を見る
アバター
EO 2021/11/03

カエレバの画像サイズ

いつも大変お世話になっております。 本日始めてカエレバを利用してみようと思い、コードを記事に貼ってみました。 すると、記事には反映されたのですが、どの商品を表示させても画像サイズがとても小さく感じました。 この画像サイズはsango側で修正することは可能なのでしょうか? ご教示頂けますと幸いです。 ご確認のほどよろしくお願いいたします。

回答を見る
アバター
Shun 2021/09/05

カエレバのリンクがヤフートラベルになる

いつもお世話になっております。 表記の通りカエレバのリンクを貼り、ページ上の表示は表記通りのスタイルになっておりますが、楽天市場などのボタンを押すとすべてヤフートラベルに移行してしまいます。 どういった原因が考えられますでしょうか。 ネットで検索しても解決策がわかりませんでした。 よろしくお願いいたします。

回答を見る
アバター
ペコポン 2021/08/17

カエレバの画像が表示されません

カエレバで作成したコードを貼り付けたところ、画像が表示されず困っています。 画像リンクは入っているように思うのですが、原因を教えて頂きたいです。 サイトリンクのURLが該当のページでして、ご確認お願い致します。

回答を見る
アバター
Shun 2020/11/18

Sangoのカスタマイズが適用されていない

カエレバでamazonlet風-2(CSSカスタマイズ用)に指定してリンクを貼り付けてもカスタマイズが適用されていません。 画像のみ、画像と文章のどちらで、行っても適用されませんがどのように対処すればよいでしょうか。

回答を見る
アバター
ワタル 2020/05/27

ヨメレバのデザインの画像余白が消えない

お世話になっております。 本ページにてご紹介いただいております ヨメレバの余白修正CSSについて質問です。 上記で解説いただいております、CSSについて子テーマへの導入を実施いたしましたが 設定が反映されていない状態となっております。 設定についてはコピペで対応をしているため、入力漏れ等は無いと思っております。 原因が不明のためご連絡差し上げました。 以上、よろしくお願いいたします。

回答を見る
アバター
いっちー 2020/05/05

ヨメレバの画像が表示されない

ヨメレバのAmazonlet風-2(css用)でリンクを作成したところ、画像が表示されませんでした。 画像系プラグインを停止させ、ブラウザをキャッシュしてもうまくいきません。 ご教授のほどよろしくお願いいたします。

回答を見る
アバター
N 2020/03/13

カエレバ・ヨメレバのボタンカスタマイズ

いつもお世話になっています。 ボタンの幅の変更について カエレバなどを表示させると「楽天市場」などの文字数に合わせてボタンの幅となりますが、この幅を全部同じ幅にしたいのですが可能でしょうか? それとボタンの色について 楽天なら赤系、Amazonはオレンジ系の色のボタンが表示されますが自分の好きな色に変更する方法を教えてください。 7netやWowmaなどを表示させると水色系になりますが、これらも個…

回答を見る
アバター
syouji 2020/02/24

カエレバ リンクの件になります

SANGO使用させていただいております。 カエレバ リンクをSANGO使用にする場合のamazonlet風-2(CSSカスタマイズ用)はどこに表示されますでしょうか?>< 表示がされなくて探してましたが見つかりませんでしたので教えていただけますとありがたいです。

回答を見る
アバター
クボ 2019/02/05

カエレバ枠内に別のボタンを付け加えたい

いつもお世話になっております。 カエレバ枠内のリンクボタン群に、公式に移動するための別のボタンを付け加えたいのですが、自分の知識ではうまく配置することが出来ず… お忙しい中恐縮ですが、可能であればどのような記述をすればよいかお教え頂けますと幸いです。

回答を見る
アバター
なお 2019/01/26

カエレバのコードを手動で作成する

SANGOを使わせていただいております。大変使いやすく重宝しております。 カエレバのデザイン・リンクについて質問させてください。 カエレバの方で、Amazon検索とAmazonサイトからブックマークレットによるリンク生成はできなくなってしまったようなのですが、以前のような「デザイン・リンク」にしたい時はどのようにすればよろしいでしょうか? 1、画像リンクをAmazonにする 2、ボタンをAmazo…

回答を見る
アバター
藤田 2019/01/13

カエレバのデザインがおかしい

SANGOを使わせてもらっています。本当に単純なことなんですが、カエレバのコードを貼り付けても、このページにあるようなデザインになりません。そのままカエレバのままです。コードをはりつければ変わるでよろしいでしょうか。

回答を見る
アバター
タナカ 2018/10/01

カエレバの画像サイズがバラバラ

カエレバの画像サイズが商品によって大きくなったり、小さくなったりしてしまいます。 これを全て同じにそろえることはできないのでしょうか? ヨメレバの場合は、全て同じサイズに統一できています。 方法があれば、ご教授お願い致します。

回答を見る
アバター
しあ 2018/08/17

カエレバがSANGO公式とは違うデザインになってしまう

こんにちは。 以前まではテーマ「simplisity」を使っていたのですが 「sango」を導入しました。 テーマを変更したところ、 「カエレバ」の表示が見本のデザインとは違う、 余白の長い崩れたものになってしまっています。 ボタンも公式のデザインとは何だか違うものになっています。 こちらのガイドを参照して追加でCSSを貼ったのですが変化はありません。 解決策のアドバイスをいただけますでしょうか。

回答を見る
アバター
ガオ 2018/04/13

カエレバのリンクの商品画像がぼやける

カエレバのリンクの商品画像だけがボヤけてしまうんですが、、、。 原因がわかりません。

回答を見る
アバター
すたりく 2018/03/26

カエレバで「画像中」(320px)でコードを作成しておりますが、小さい画像サイズで表示されてしまいます。横幅320pxを上限に画像を配置し、スマホなどの画面サイズが小さいデバイスでは、商品タイトルなどは回り込んで画像下に配置するには、どのようにカスタマイズをすれば良いでしょうか? (他サイトで紹介しているCSSコードをまるまる貼り付けても、SANGOのCSSと混ざってしまいうまくいきません。そのた…

回答を見る
アバター
キキ 2018/02/25

A8.netなどの広告リンクの計測用のimgタグにより不自然な余白ができてしまう

同じアフィリエイトくくりで質問です。 A8.netなどの広告リンクにも計測用のimgタグが含まれており、不自然なスペース(段落)ができてしまいます。 何かよい解消方法はないでしょうか?

回答を見る

コメントを残す

* は入力必須項目です。
コメント投稿ガイドラインを読んでから投稿してください。
メールアドレスは公開されませんが、名前は公開されます。

HTMLやPHPのコードを掲載するときはHTMLエスケープツールで特殊文字を変換してから貼り付けてください。