【Cocoon】初心者向け！カエレバ・ヨメレバで作ったリンクを自分好みにカスタマイズ

こんばんは。

本記事はショッピングリンク生成サービス「カエレバ」「ヨメレバ」でリンクを作った後に行うカスタマイズをまとめています。

トライした内容は以下。リンクをつけたので必要な場所に飛んでみてください。

基本初心者向きです。それではどうぞ。

WordPressテーマ「Cocoon」では、ブックマークレット機能を使うことで簡単にリンクを作ることができます。

例）楽天市場でリンク化したい商品ページを開いて、ブックマークレット利用

　↓　↓　↓

コピー内容をエディタに貼りつけ

　↓　↓　↓

柳月 三方六の小割 北海道メロン 5個入バームクーヘン ギフト 帯広 北海道お土産 暑中見舞い

北海道くしろキッチン

Amazon

楽天

Yahoo!ショッピング

非常～～～に便利な機能である一方、商品タイトルを編集できないのが気になりまして。

そこで「カエレバ」を使いはじめました。

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

ありそうで無かった、商品紹介用のブログパーツあります!

kaereba.com

どんな機能かというと…

• 自分のアフィリエイトIDを入力！
• 作りたい商品のキーワードを検索！
• ブログパーツ生成！俺のターン！

キーワードとリンク先を選択するだけでショッピングサイトリンクを作ることができる、すごいツールです。

カスタマイズの前に…

カエレバ・ヨメレバでリンクを作る時に

amazlet風-2(CSSカスタマイズ用)

を選択すると、ごちゃごちゃになりにくいです。

書く場所はドコ？

スタイルシートに書きます。

ひよさん

子テーマに書きます

管理人

スタイルシート更新時はバックアップをお忘れなく

もしくはコチラから。

複数箇所で編集するとおかしなことになるので、編集箇所はどちらかに決めたほうがいいです。

リンクが表示されない・色を変えたい

ひよさん

表示されるはずのリンクが…NAI？！

そんな時は、CSSでリンクの色などを指定して出現させます。

表示されてるけど色を変えたい！っていう時にも使えます。

/* ヨメレバ */
.cstmreba .booklink-link2 .shoplinkebj a {/* eBookJapan */
　　background:#背景色;
　　border: 2px solid #文字色;
}

「/* eBookJapan */」はショッピングサイト名です。

記載しなくてもいいですが、修正したい場合に管理画面上で検索がかけられるので書いておくと便利です。

今回はeBookJapanリンクの修正なので「.shoplinkebj」ですが、表示したいサイト名にあわせてくださいね。

ファイルの更新が完了したら、こうなります。

ボタンがズレる

リンクボタンが並んで表示されず、ズレてます。

特にスマホで起きやすい現象。これを調整します。

/* ヨメレバ */.cstmreba .booklink-link2 .shoplinkebj a { background:#背景色; border: 0px solid #文字色;} /* eBookJapan */

「border:」ってところの数字を調整すると、リンクボタンの位置が修正できます。

無事、間隔が同じくなりました。

ボタンとボタンの間に余白がある

上ボタンと下ボタンの間に大きな余白ができる。

これは特定のサイトでリンクを生成していると起こる現象らしいので、以下の条件を指定します。

必要なサービス名だけ使っています。足りなかったり多かったりしたら各自調整してくださいね。

/* もしもアフィリエイトの場合不要な画像を削除 */ 
.kaerebalink-image img[src^="//i.moshimo.com/af/i/impression"],
.booklink-image img[src^="//i.moshimo.com/af/i/impression"],

.shoplinkamazon img,
.shoplinkrakuten img,
.shoplinkseven img,
.shoplinkyahoo img,
.shoplinkkindle img,
.shoplinkrakukobo img,
.shoplinkebj img { display:none; }

余白がキュッとなって、見やすくなりました！

リンク下部の余白をなくす

リンクの下部にできる大きい余白を削除したい。

デベロッパーで調べてみると「booklink-footer」とあったので、ここを非表示にします。

.booklink-footer {
　　display:none;}

ボタンを丸くする

これは好みですが、リンクボタンを丸くしてみます。

数字を小さくすると、段々四角くなります。

.shoplinkamazon a,.shoplinkrakuten a,.shoplinkrakukobo a,.shoplinkyahoo a,.shoplinkseven a,.shoplinkkindle a,.shoplinkebj a {
	border-radius: 22px; }

商品名の周りをカスタマイズ

商品タイトル周辺をカスタマイズして、メリハリをつけてみるぜ。

「font-size」「color」などは実際に使ったものを残していますので、お好みで調節してください。

商品タイトルを太字

/* 商品名等をカスタマイズ */
.kaerebalink-name,
.booklink-name {
　　font-weight: bold; /* 商品名太く */
　　font-size: 16px;
　　margin: 0; /* 余白調整 */
}
.kaerebalink-name a,
.booklink-name a {
　　color: #333333; /* 商品名色指定 */
}

商品タイトル以外を小さく表示する

.kaerebalink-powered-date,
.booklink-powered-date {
　　font-size: 0.6rem; /* posted with 大きさ */
　　font-weight: normal; /* 文字の太さ標準 */
}
.kaerebalink-detail,
.booklink-detail {
　　font-size: 0.6rem; /* メーカー・作者の文字の大きさ */
}

右寄せ・左寄せ

表示したい場所に１行追加します。

text-align: right; /* 右寄せ */

text-align: left; /* 左寄せ */

枠線・背景色を変えたい

リンク全体を囲む背景色や枠線は、一番印象が変わる部分だと思います。

こういったリンク全体に関わるカスタマイズは「.kaerebalink-box（カエレバ）.booklink-box（ヨメレバ）」を使います。

あとはこの辺を調整していきます。

「background-color」
…背景色
「border」
…枠線の太さと色
（数字が大きいと線も太く）
「border-radius」
…枠線に丸み
（数字が大きいと線も丸く）

/* 枠線 */ 
.kaerebalink-box,.booklink-box {
　　background-color: #fff9f9;
　　border: 1px solid #ffcece;
　　border-radius: 6px;
}

完成～

これらを組み合わせてできたものがコチラ。

最新のカスタマイズはコチラ。

スキン変更したらパソコン表示のみカスタマイズが反映されなくなりました…。ので、ちょっと変でも無視してください。

悪魔のメムメムちゃん 2

posted with ヨメレバ

四谷 啓太郎 集英社 2017年03月03日

楽天ブックス

Amazon

7net

ebookjapan

 

サイトカラーに合わせたカスタマイズが見やすいですが、正直クリックしてもらえたら何でもいいと思う。

色々試してみてくださいね！

今回参考にしたサイトです。ありがとうございました！

コピペでOK！カエレバ／ヨメレバのデザインをCSSでカスタマイズしたよ！｜だちたまログ

このブログは、Amazonや楽天市場で取り扱いのある商品を「カエレバ」ブログパーツを使って紹介しています。 カエレバを使

dacho-tamago.com

CSSまとめ

/* カエレバ・ヨメレバ */
.cstmreba .booklink-link2
.shoplinkショッピングサイト名 a {/* ショッピングサイト名 */
　　background: #背景色;
　　border: 0px solid #文字色;
} 
/* ボタンの形 */ 
.shoplinkamazon a,.shoplinkrakuten a,.shoplinkrakukobo a,.shoplinkyahoo a,.shoplinkseven a,.shoplinkkindle a,.shoplinkebj a {
　　border-radius: 22px;
}
/* 商品名等をカスタマイズ */
.kaerebalink-name,.booklink-name {
　　font-weight: bold; /* 商品名太く*/
　　font-size: 15px;
　　margin: 0; /* 余白調整 */
}
/* 商品名色指定 */
.kaerebalink-name a,.booklink-name a {
　　color: #666362; 
}
/* posted with */
.kaerebalink-powered-date,.booklink-powered-date {
　　font-size: 0.6rem; /* 大きさ */
　　font-weight: normal; /* 文字の太さ標準 */
　　text-align: right; /* 右寄せ */
}
/* メーカー・作者 */
.kaerebalink-detail,.booklink-detail {
　　font-size: 0.6rem;
　　text-align: right; /* 右寄せ */
}
/* 枠線 */ 
.kaerebalink-box,.booklink-box {
　　background-color: #背景色;
　　border-radius: 6px;
　　border: 1px solid #枠線色;
}
/* もしもアフィリエイトの場合不要な画像を削除 */ 
.kaerebalink-image img[src^="//i.moshimo.com/af/i/impression"],
.booklink-image img[src^="//i.moshimo.com/af/i/impression"],

.shoplinkamazon img,
.shoplinkrakuten img,
.shoplinkseven img,
.shoplinkyahoo img,
.shoplinkkindle img,
.shoplinkrakukobo img,
.shoplinkebj img { display:none; }

.booklink-footer { display:none; }