【Simplicity】カエレバ・ヨメレバをCSSでカスタマイズ【もしもアフィリエイト】

カエレバ・ヨメレバをCSSでカスタマイズしました。レスポンシブ対応です。

カスタマイズ方法をご紹介しますので、よろしければ参考にしてください。

ただし、僕の環境とみなさんの環境は異なるので注意してください。

僕はカエレバ・ヨメレバにもしもアフィリエイトのIDを入力して使用し、WordpressのSimplicityというテーマで反映させています。

スポンサーリンク
レクタングル(大)

カエレバ・ヨメレバ、もしもアフィリエイトについて

カエレバヨメレバはAmazonや楽天など様々なショップの商品を紹介するのに大変便利なツールで、多くのブロガーが採用していることで有名です。

もしもアフィリエイトは最近注目され始めているASPで、Amazonや楽天などのアフィリエイトリンクをそのまま貼るよりも、もしもアフィリエイト経由にしたほうがお得な点がいくつもあるということで人気を集めています。

たとえば

  • W報酬制度で報酬10%アップ
  • 成果金額が1,000円以上で振り込まれる
  • 振込手数料無料

などのメリットがあります。

アフィリエイトを考えている方はぜひ導入されてみてはいかがでしょう。

Amazonのアフィリエイトリンクを作成するツールはいくつも存在しますが、もしもアフィリエイトに対応しているのはカエレバ・ヨメレバ以外にはなさそうですので、ありがたく利用させていただきます。

CSSで超オシャレにカスタマイズ

カエレバ・ヨメレバはとても便利なツールなのですが、そのままで使うとこんなふうにシンプルで寂しいデザインになってしまいます。

商品紹介ブログパーツ_カエレバ

というわけでCSSでオシャレにカスタマイズしましょう。

カスタマイズ後はこんなふうになります。

PCでの見え方

【Simplicity】カエレバ・ヨメレバをCSSでカスタマイズ【もしもアフィリエイト】

スマホでの見え方(左がカエレバ、右がヨメレバ。2画面を合成しています)

スマホ

いい感じにオシャレになっているのがわかると思います。

それでは実際の作業に入っていきましょう。

コードをコピー

今回はこちらのサイトを参考にしてカスタマイズしていきます。

著作権的にカスタマイズしたコードを載せるのはまずいと思うので(誰でも見ることのできるCSSに著作権が適用されるのかは微妙ですが)、サイトからコードを丸々コピーしてstyle.cssやCSSの貼りつけ欄などにペーストしてください。

WordPressでテーマを使用している方は子テーマのstyle.cssにペーストすることをおすすめします。

画像の大きさの変更

もしもアフィリエイトを使用すると商品画像のあとに1pxの画像が挿入されてしまうようで、これが原因で他のサイトで紹介されているCSSがうまく反映されなくなってしまいます。

1pxの画像が拡大されないようにするために29行目の

width:128px;

を削除してください。

誤字の修正

33行目の

.kaerebakink-image

.kaerebalink-image

に修正してください。

画像の最大サイズを指定

33行目の

width:128px;

max-width:128px;

に修正してください。

詳しくは後述しますが、カエレバ・ヨメレバで画像中を選択すると画像小よりもきれいな見た目になるので僕は画像中を使用しているのですが、そのままだと大きすぎて見た目が崩れるので最大サイズをしていしています。

楽天Koboの設定を追加

56〜59行目のどこかに

.shoplinkrakukobo a,

を追記してください。

63〜76行目のどこかに

.shoplinkrakukobo a { color:#ffffff; background:#32cd32; }

を追記してください。

画像の削除

もしもアフィリエイトを使用すると1pxの画像がショップへのリンクのあとに追加されてしまうので、それを削除します。

以下のコードを78行目付近にペーストしてください。

.shoplinkamazon img, .shoplinkrakuten img, .shoplinkrakukobo img, .shoplinkyahoo img, .shoplinkyahooAuc img,
.shoplinkseven img, .shoplinkbellemaison img, .shoplinkcecile img, .shoplinkkakakucom img,
.shoplinkkindle img, .shoplinkbk1 img, .shoplinkehon img, .shoplinkkino img,
.shoplinkjun img, .shoplinktoshokan img {
  display:none;
}

メディアクエリの削除

79行目以下はSimplicityの場合には不要なので削除してください。

mobile.cssに追記

Simplicityの場合にはmobile.cssに

.kaerebalink-image, .booklink-image {
  margin:0;
  float:none;
  text-align:center;
}
.kaerebalink-image img, .booklink-image img { max-width:180px; }
.kaerebalink-info, .booklink-info { margin: 0; line-height: 1.6rem; }

を追記してください。

PCのときには商品画像を左寄せしましたが、スマホでは寄せないのでfloatをnoneにします。

商品画像も180pxと大きくして見やすくしました。

商品情報のmarginが不要になるので0にします。

※ただし、mobile.cssに追記するのは完全レスポンシブ機能が無効の場合です。

完全レスポンシブ機能の設定はカスタマイザー内の「レイアウト(全体・リスト)」から行えます。

カスタマイズ__ヒキニートかく語りき___ヒキニートの僕が生活やメンタルなどについて語ります。

ここのチェックを外しておいてください。

ブログパーツ作成時の注意

カエレバ・ヨメレバでブログパーツを作成するときにはデザインを「amazlet風-2(cssカスタマイズ用)」にし、「画像中」を選択してください。

商品紹介ブログパーツ_カエレバ

表示されたコードを記事に貼りつければ完成です。

サンプル

実勢に動いているサンプルです。どのように見えるか参考にしてください。

その他の参考サイト

これでOK!カエレバ・ヨメレバで、もしもアフィリエイトを使う際のカスタマイズCSS
カエレバ・ヨメレバと、もしもアフィリエイトの組み合わせって非常に効率が良い!と俺は思っている。だってAmazo&
ヨメレバ&カエレバ ちゅんこさんのカスタマイズを、Gush2でやってみました。
目次1 ヨメレバ・カエレバは、WinWinなブログパーツ(^^)2 ちゅんこさんのカスタマイズはデザインが素敵(^.^)3 ちゅんこさんのコードからの変更点3.1 セブンネット用の記述を追加3.2 G
スポンサーリンク
レクタングル(大)
レクタングル(大)
ヒキニートかく語りき
【Simplicity】カエレバ・ヨメレバをCSSでカスタマイズ【もしもアフィリエイト】
この記事をお届けした
ヒキニートかく語りきの最新ニュース情報を、
いいねしてチェックしよう!