サイトや管理人についてはコチラをタップ!

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

サイト運営(&定期報告ログ)
この記事は約9分で読めます。
スポンサーリンク
追記:20.01.12
Cocoonのバージョンアップによりリンクボタンの配置方法が縦一列並びへ変更になりましたが、画像やカスタマイズは変更前のままにしてあります。

こんばんは。

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

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

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

注意
本記事は私の環境下で反映できたものをまとめております。不備などあるかもしれませんがご了承ください。
色んな指定方法の中のひとつと捉えていただけると幸いです。


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

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

Cocoonで楽天リンクを作る

 ↓ ↓ ↓

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

 ↓ ↓ ↓


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

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

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

どんな機能かというと…

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

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

カスタマイズの前に…

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

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

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

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

 

書く場所はドコ?

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

外観→ テーマエディター
Cocoon Child: スタイルシート (style.css)

ひよこ(ねぎ)
ひよさん

子テーマに書きます

管理人
管理人

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

もしくはコチラから。

管理画面「外観
→ カスタマイズ
追加CSS

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

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

透明化しているリンクを表示する
ひよこ(驚き)
ひよさん

表示されるはずのリンクが…NAI?!

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

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

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

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

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

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

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

第4のリンク表示

 

ボタンがズレる

ボタンの間隔がおかしい

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

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

/* ヨメレバ */.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; /* メーカー・作者の文字の大きさ */
}

右寄せ・左寄せ

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

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; }

この記事を書いた人
ちゅる

北海道の30代女性。

周りの評価欲しさに仕事を頑張ったら、心身が壊れて20代が強制終了。

強制終了の原因は自分だと気づいたので、思考や心の話から趣味に関する情報まで発信中。

Twitterでは「今日の気付き」的な言葉を毎日つぶやいてます。

>>詳しくはコチラ

スポンサーリンク
スポンサーリンク
スキマ
スポンサーリンク
スキマ
とにかき。―とにかく何かに書きたいのです。

タイトルとURLをコピーしました