商品紹介用ブログパーツ「カエレバ」デザインカスタマイズ

 
Web制作 - HTML・CSS
この記事は約 3 分で読めます ( 約 1421 文字 )

カエレバ商品紹介用ブログパーツ を提供している無料サービスです。カエレバでは楽天市場・Amazon・Yahoo!ショッピングなど複数の EC サイトのリンクをまとめて掲載できるパーツが作成できます。

 

ポイント貯蓄や配送スピードなどで購入サイトを限定している人もいますので、複数サイトのリンクを掲載しておくと成約チャンスが高まるメリットがあります。

 

カエレバ公式サイトとブログパーツ表示例

 

カエレバ公式サイト:http://kaereba.com/

 

 

カエレバには予め複数のデザインが用意されています。

 

amazlet風(改)-1 ( ショップアイコンあり ) の場合

※サンプルのためリンクは機能していません


 


その他のデザインは次を参照ください。

カエレバ:デザイン一覧

 

 

カエレバ提供の上記デザインでも体裁は整っていますが PC 以外では次のような不具合があります。

 

  • 【 スマホ 】EC サイト別リンクが文字リンクだけなのでタップしづらい
  • 【 スマホ 】ショップアイコンありにしたときは EC サイト別リンクがはみ出して全て表示されない場合がある
  • 【 AMP 化したページ 】デザインが反映しない ( CSS が style 属性記述のため )

 

スマホでのユーザビリティを考慮して、次で紹介するカスタマイズをお勧めします。

 

 

 

カエレバのデザインカスタマイズ方法

 

パーツ作成時の選択デザイン

デザインは amazlet風-2 ( cssカスタマイズ用 ) を選択してください。
それ以外は style 属性記述があるため表示が崩れる場合があります。

 

カスタマイズ用 CSS

次の CSS を追加してください。

 

カスタマイズ後の表示

※サンプルのためリンクは機能していません

 

 

 

2019/1/10 以降に作成したパーツの注意点

 

主データ ( 商品画像・商品名文字列 ) の取得先が Amazon から「 楽天 」に変更になった模様です。理由は Amazon の規約変更ですので仕方がない話ではあります。

 

提供者様の説明記事:http://www.wakatta-blog.com/kaereba-birth-change-and-so.html

 

そのため「 商品画像・商品名文字列 」のリンク先が次に変更になりました。

【 旧 】Amazon の自分のアフィリエイトリンク

【 新 】楽天のリンクで自分のアフィリエイトリンクではない模様

やはり画像と商品名はクリックする人が多いはずですので、リンク先を変更するなど「 ひと手間 」加える必要がありそうです。

 

 

 

まとめ

 

カエレバは仕様が変わりパーツソースにひと手間加える必要はありますが、複数 EC サイトのリンクをまとめて掲載できることはメリットです。

 

ですが、スマホでのユーザビリティを考慮すると CSS のカスタマイズはやはり必要でしょう。今回紹介した CSS 以外にも検索すれば情報は出てきますので、是非カスタマイズをお試しください。

 

関連記事