カエレバ、ヨメレバをレスポンシブデザインにカスタマイズ



ブログでの商品リンク作成に、カエレバヨメレバを使っている方、多いのではないでしょうか。

便利ですよね。
一発でAmazonも楽天へのリンクが生成できるから。

私も最近カエレバやヨメレバに手を出しました。
ところが、デザインがいまいち気に入らず。
ネットで色々コピペできるCSSデザインを探したりもしたのですが、自分の感性にフィットするデザインは見つかりませんでした。

仕方がないので、自分でCSSを改変して自分好みのものを作ったのでシェアいたします。

参考サイト

元となるCSSは、レスポンシブデザインとなっているものをお借りしました。

Amazonや楽天、Yahooショッピングなどなど、数多くのECサイトへの商品リンクを作成できるWebサービス「ヨメレバ」と「カエレバ」。これによって作成される紹介リンクを...

PCではボタンが横並び、スマホではボタンが縦並びとなります。

カエレバ、ヨメレバでの設定

  • デザインを「amazlet風-2(CSSカスタマイズ用)」とする
  • 画像「中」を選択

ヨメレバ設定

他はお好みで設定してください。

改変CSSとその見た目

通常時はモノトーンのフラットボタンが並んでいます。
マウスオーバーすると、各サービスの象徴的な色に変化。
よりクリックを促せるような、動的なものにしてあります。

表示された様子です。

PCでの表示はこのように。
(仮にAmazonにカーソルを置いています。)

PC表示されたヨメレバCSS

スマホではこのように表示されます。
(仮にKindleにカーソルを置いています。)

スマホ表示されたヨメレバCSS

これで私好みのリンクボタンを作る事ができましたっ♪

CSSは以下のとおりです。
お使いのCSSファイルに貼り付けて使用してください。

/* ===============消しちゃダメ============== */
/* kaereba/yomereba Customize Settings 1.0.0 ver */
/* Created by Cazuki Hoshina */
/* Copyright (c) @cazuki All rights Reserved. */
/* Arrenged by Rippoutai.com */
/* ======================================== */

.kaerebalink-box, .booklink-box {
  width: 100%;
  margin: 0 0 2rem;
  padding: 1rem;
  background: #ffffff;
  border: 1px solid;
  border-color: #eaeaea #dddddd #d0d0d0;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  box-sizing: border-box;
  /zoom:1;
}
.kaerebalink-box:after, .booklink-box:after {
  content:"";
  display:block;
  visibility:hidden;
  height:0;
  clear:both;
}
.kaerebalink-image, .booklink-image {
  float:left;
  width:128px;
  margin:0;
  text-align:center;
}
.kaerebalink-image img, .booklink-image img { width:128px; height:auto; }
.kaerebalink-info, .booklink-info { margin: 0 0 0 140px; line-height: 1.6rem; }
.kaerebalink-name, .booklink-name {
  font-size: 1.0625rem;
  font-weight: bold;
  margin: 0;
}
.kaerebalink-name a, .booklink-name a { color: #2b2b2b; }
.kaerebalink-name a:hover, .booklink-name a:hover { text-decoration: underline; }
.kaerebalink-powered-date, .booklink-powered-date { font-size: 0.75rem; font-weight: normal; }
.kaerebalink-detail, .booklink-detail { font-size: 0.9375rem; margin: 0 0 0.5em; }
.kaerebalink-link1, .booklink-link2 { width:100%; }
.kaerebalink-link1 div, .booklink-link2 div {
  float: left;
  width: 30%;
  margin-bottom: 1%;
  font-size: 0.875rem;
  font-weight: bold;
  text-align: center;
  box-sizing: border-box;
}
.kaerebalink-link1 div, .booklink-link2 div { margin-left: 1%; }
.kaerebalink-link1 div a, .booklink-link2 div a { display:block; padding:3px 0; text-decoration:none; }
.shoplinkamazon a, .shoplinkrakuten a, .shoplinkyahoo a, .shoplinkyahooAuc a,
.shoplinkseven a, .shoplinkbellemaison a, .shoplinkcecile a, .shoplinkkakakucom a,
.shoplinkkindle a, .shoplinkbk1 a, .shoplinkehon a, .shoplinkkino a,
.shoplinkjun a, .shoplinktoshokan a, .shoplinkrakukobo a{
  display: inline-block;
	text-align: center;
	text-decoration: none;
	outline: none;
	border: 2px solid #333;
	border-radius: 6px;
	text-decoration: none;
}
.shoplinkamazon a:hover { color:#333; background-color:#ff9900; }
.shoplinkkindle a:hover { color:#333; background-color:#1882c9; }
.shoplinkrakuten a:hover { color:#333; background-color:#bf0000; }
.shoplinkyahoo a:hover { color:#333; background-color:#fc1d2f; }
.shoplinkyahooAuc a:hover { color:#333; background-color:#ffdb00; }
.shoplinkseven a:hover { color:#333; background-color:#225093; }
.shoplinkbellemaison a:hover { color:#333; background-color:#83be00; }
.shoplinkcecile a:hover { color:#333; background-color:#6b053d; }
.shoplinkkakakucom a:hover { color:#333; background-color:#00138e; }
.shoplinkbk1 a:hover { color:#333; background-color:#0484d2; }
.shoplinkehon a:hover { color:#333; background-color:#00006a; }
.shoplinkkino a:hover { color:#333; background-color:#003e9d; }
.shoplinkjun a:hover { color:#333; background-color:#d8c9b7; }
.shoplinktoshokan a:hover { color:#333; background-color:#29b6e9; }
.shoplinkrakukobo a:hover { color:#333; background:#32cd32; }
.booklink-footer { clear:both !important; }

@media only screen and (min-width:460px) and (max-width:640px) {
	.kaerebalink-link1 div, .booklink-link2 div { float: none; width: 100%; }
	.kaerebalink-link1 div, .booklink-link2 div { margin-left: 0; }
}
@media only screen and (max-width:459px) {
	.kaerebalink-image, .booklink-image {
	  float:none;
	  width:100%;
	  margin:0;
	  text-align:center;
	}
	.kaerebalink-image img, .booklink-image img { width:180px; height:auto; }
	.kaerebalink-info, .booklink-info { margin: 0; }
	.kaerebalink-link1 div, .booklink-link2 div { float: none; width: 100%; }
	.kaerebalink-link1 div, .booklink-link2 div { margin-left: 0; }
}

補足:アプリ紹介ツール

iPhoneアプリの紹介などは、AppHtmlWeb様を使用させていただいております。
シンプルで使いやすいです。

使い方は、設定画面でアフィリエイトトークン(ID)を入力して保存しておくだけ。
(アフィリエイトトークンは、iTunesアフィリエイト→今すぐ申し込む→ログインで、右上に表示されます)

あとは紹介したいアプリを検索して、生成されたコードを貼り付けるだけです。

ituneアフィリエイトを楽々実行

こんな感じに表示されます。

Minecraft: Pocket Edition
カテゴリ: ゲーム, シミュレーション, アドベンチャー

シンプルでよいですね♪

シェアする

  • このエントリーをはてなブックマークに追加

関連記事

  1. アフィリエイトサイトの構成図
  2. 光るうさぎのキーホルダー、SoldOutの様子
  3. materialize用HTMLを表示した様子、Windowが大きい場合
  4. 可愛い3Dの炎
  5. BlueMail設定 アカウントが追加された様子
  6. fotorで年賀状、テキスト入力

Rippoutai管理人


モノづくり起業を応援するRippoutai管理人、電気女子の顔写真です


電気女子(はまこ)

ワーキングマザーをしながら、サイドビジネスで小型電子モジュールの製造・販売をしています。
クラウドファンディングで1000%支援達成の実績あり。

モノづくり副業応援!
山梨起業応援!

アーカイブ