カエレバ・ヨメレバをCSSでカスタマイズしました。レスポンシブ対応です。
カスタマイズ方法をご紹介しますので、よろしければ参考にしてください。
ただし、僕の環境とみなさんの環境は異なるので注意してください。
僕はカエレバ・ヨメレバにもしもアフィリエイトのIDを入力して使用し、WordpressのSimplicityというテーマで反映させています。
目次
カエレバ・ヨメレバ、もしもアフィリエイトについて
カエレバ・ヨメレバはAmazonや楽天など様々なショップの商品を紹介するのに大変便利なツールで、多くのブロガーが採用していることで有名です。
もしもアフィリエイトは最近注目され始めているASPで、Amazonや楽天などのアフィリエイトリンクをそのまま貼るよりも、もしもアフィリエイト経由にしたほうがお得な点がいくつもあるということで人気を集めています。
たとえば
- W報酬制度で報酬10%アップ
- 成果金額が1,000円以上で振り込まれる
- 振込手数料無料
などのメリットがあります。
アフィリエイトを考えている方はぜひ導入されてみてはいかがでしょう。
Amazonのアフィリエイトリンクを作成するツールはいくつも存在しますが、もしもアフィリエイトに対応しているのはカエレバ・ヨメレバ以外にはなさそうですので、ありがたく利用させていただきます。
CSSで超オシャレにカスタマイズ
カエレバ・ヨメレバはとても便利なツールなのですが、そのままで使うとこんなふうにシンプルで寂しいデザインになってしまいます。
というわけでCSSでオシャレにカスタマイズしましょう。
カスタマイズ後はこんなふうになります。
PCでの見え方
スマホでの見え方（左がカエレバ、右がヨメレバ。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カスタマイズ用）」にし、「画像中」を選択してください。
表示されたコードを記事に貼りつければ完成です。
サンプル
実勢に動いているサンプルです。どのように見えるか参考にしてください。
※もしもアフィリエイトの仕様変更か、新たな1pxの画像が挿入されたようで商品名に不自然なスペースができてしまっています。コードの改変も画像の非表示もできないのでどうしようもないです。
その他の参考サイト
