こんばんは。
本記事はショッピングリンク生成サービス「カエレバ」「ヨメレバ」でリンクを作った後に行うカスタマイズをまとめています。
トライした内容は以下。リンクをつけたので必要な場所に飛んでみてください。
基本初心者向きです。それではどうぞ。
注意
本記事は私の環境下で反映できたものをまとめております。不備などあるかもしれませんがご了承ください。
色んな指定方法の中のひとつと捉えていただけると幸いです。
WordPressテーマ「Cocoon」では、ブックマークレット機能を使うことで簡単にリンクを作ることができます。
例）楽天市場でリンク化したい商品ページを開いて、ブックマークレット利用
↓ ↓ ↓
コピー内容をエディタに貼りつけ
↓ ↓ ↓
非常～～～に便利な機能である一方、商品タイトルを編集できないのが気になりまして。
そこで「カエレバ」を使いはじめました。
どんな機能かというと…
- 自分のアフィリエイトIDを入力！
- 作りたい商品のキーワードを検索！
- ブログパーツ生成！俺のターン！
キーワードとリンク先を選択するだけでショッピングサイトリンクを作ることができる、すごいツールです。
カスタマイズの前に…
カエレバ・ヨメレバでリンクを作る時に
amazlet風-2(CSSカスタマイズ用)
を選択すると、ごちゃごちゃになりにくいです。
書く場所はドコ？
スタイルシートに書きます。
外観→ テーマエディター
Cocoon Child: スタイルシート (style.css)
子テーマに書きます
スタイルシート更新時はバックアップをお忘れなく
もしくはコチラから。
管理画面「外観」
→ カスタマイズ
→ 追加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;
}完成～
これらを組み合わせてできたものがコチラ。
パソコン
スマートフォン
最新のカスタマイズはコチラ。
スキン変更したらパソコン表示のみカスタマイズが反映されなくなりました…。ので、ちょっと変でも無視してください。
サイトカラーに合わせたカスタマイズが見やすいですが、正直クリックしてもらえたら何でもいいと思う。
色々試してみてくださいね！
今回参考にしたサイトです。ありがとうございました！
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; }