Ver1.6 Released !

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

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

アフィリエイトを行う中でカエレバ(とヨメレバ)を使っている方も多いかと思います。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;
}

23 Comments

キキ

同じアフィリエイトくくりで質問です。

A8.netなどの広告リンクにも計測用のimgタグが含まれており、不自然なスペース(段落)ができてしまいます。

何かよい解消方法はないでしょうか?

返信する
キキ

ありがとうございます!
無事解決しました。

私の環境では !important; を付けたらうまくいきました。

返信する
マサキ

SANGO購入させていただきました。

amazlet(http://app.amazlet.com/amazlet/)もカエレバ/ヨメレバと統一感のあるデザインのCSSを提供していただければ幸いです。

よろしくお願いいたします。

返信する
マサキ

お世話になっております。
早速の対応ありがとうございます。

移行頑張りたいと思います!

返信する
りこ

いつもお世話になっております。
色々と試したのですが行き詰まってしまったため、質問をさせて下さい。

ヨメレバの広告を設置したところ不自然な余白が出てしまったため、サルワカさんに教えて頂いたCSSを子テーマに貼り付けました。しかし対処出来ず、画像下の余白が消えません。

ワードプレスの管理画面「外観⇒テーマの編集⇒スタイルシート」の手順でCSSを貼り付け、ファイルを更新しました。この方法で不備はありますか?

どうかご指南宜しくお願いします。

貼り付けて試したCSSは以下のものです。

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

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

返信する
サルワカくん

頂いたサイトURLを確認したところ、問題なく表示されているようです。
ブラウザのキャッシュは削除されましたか?

返信する
りこ

お返事ありがとうございます。
ただ今確認したところ、正しく反映出来ていました。

ワードプレスアプリから自分のサイトへアクセスしていましたのですが、
変更が反映される前のページを見てしまっていたようです。

お騒がせしました。わざわざ確認して返信して頂き、本当にありがとうございました。

返信する
すたりく

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

返信する
サルワカくん
.cstmreba .kaerebalink-image {
    width: 150px;
}
.cstmreba .kaerebalink-info {
   width : calc(100% - 150px);  
}
@media screen and (max-width: 500px)  {
 .entry-content .cstmreba .kaerebalink-image,.entry-content .cstmreba .kaerebalink-info {
    display: block;
    width: 100%;
 }
 .cstmreba .kaerebalink-image a img {
  max-width: 320px;
 }
 .entry-content .cstmreba {
  text-align: center;
 }
}

上のCSSを追加してみて頂くと良いかと思います。2つある150pxの値がPC表示での画像の大きさ、320pxがスマホ表示での画像の大きさなのでお好みで調整して頂ければ。

返信する
ひなこ

サルワカくん

初歩的なことで申し訳ないのですが、
すたりくさんと同じでスマホで見た時に商品画像を上にして、商品名などをその下部にもってきたいと思い、上記のCSSをentry-option.cssに入れてみたのですが、状況が改善されません。
entry-option.cssはFTPで子テーマに移植し編集してます。
子テーマは「PORIPU]を使用。

FTPや子テーマのカスタマイズに不慣れな初心者のため、挿入箇所がそもそも違うのかもしれませんが、ご教授いただけませんでしょうか。

返信する
ガオ

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

返信する
サルワカくん

解像度をコントロールするようなことはしていないので、
おそらく画像自体の解像度が低いのだと思います。
テーマ側では対応ができません。

返信する
しあ

こんにちは。

以前まではテーマ「simplisity」を使っていたのですが
「sango」を導入しました。

テーマを変更したところ、
「カエレバ」の表示が見本のデザインとは違う、
余白の長い崩れたものになってしまっています。

ボタンも公式のデザインとは何だか違うものになっています。

こちらのガイドを参照して追加でCSSを貼ったのですが変化はありません。

解決策のアドバイスをいただけますでしょうか。

返信する
サルワカくん

「Simple Custom CSS」というプラグインを使っていますか?
その中に書かれているカエレバ関係のCSSが影響しているようなので、消去すれば直るかと思います!

返信する
タナカ

カエレバの画像サイズが商品によって大きくなったり、小さくなったりしてしまいます。

これを全て同じにそろえることはできないのでしょうか?

ヨメレバの場合は、全て同じサイズに統一できています。

方法があれば、ご教授お願い致します。

返信する
サルワカくん

おそらくなのですが、画像サイズは同じでも、画像内の商品の大きさが違っているので(画像内の商品サイズ)、バラバラに見えてしまうのではないかと思います。
そのため、自動的に画像サイズを調整するのは難しいかもしれません…。

返信する
タナカ

ご返信、有難うございます。

自動設定は難しいのですね。
個別に変更するのは、画像部分をいじったりする方法ぐらいでしょうか?

返信する
サルワカくん

表示画像をトリミングすることが可能なのであれば、余白部分をトリミングすることで統一できるかと思います。
それ以外の方法だと…ある程度のCSSの知識がないと大変かもしれません。

返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です