【Cocoon】初心者向け！カエレバ・ヨメレバのリンクを少しだけカスタマイズしてみる

こんばんは。

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

パターン別にまとめたので、以下のリンクボックスからお目当ての場所に飛んでください。

はじめに

Cocoonも同じ機能がある！

WordPressテーマ「Cocoon」では、リンクを作れる機能があります。なるべく手軽に作成したい場合は、こちらを活用すると良いと思います。

例えば、楽天市場でリンクを作りたい商品ページを開きます。

商品ページを開いた状態で、ブックマークレット利用すると「rakuten id」から始まる文字列が生成されます。これをコピーします。

▼▼▼

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

▼▼▼

北海道 「シロマルカフェ」 白玉スイーツセット 2種 各3個 計6個 SK1797 ぜんざい みたらし スイーツ 和菓子 お菓子 製菓 お取り寄せ 特産 手土産 お祝い 詰め合せ おすすめ 贈答品 内祝い お礼 お取り寄せグルメ ギフト 送料無料 バレンタイン プレゼント 2022 個包装

ギフト百花

Amazon

楽天

Yahoo!ショッピング

非常～～に便利な機能ですが、商品タイトルを自分で編集できないのが個人的に気になったんです。

私は漫画紹介が多くなりそうなので、紹介する商品によって使い分けられる「カエレバ」「ヨメレバ」というサービスを使ってみました。

紹介したい商品・ショッピングサイトを選択してリンクが作れる、すごいツールです。

手軽に商品リンクを使いたいならテーマに搭載されている機能、リンク先やデザインを自分好みにしたいならカエレバを使うと良さそうです。

貼り付け場所について

本記事では「CSS」と呼ばれる、デザインを指示するコードを紹介しています。このCSSはコピーして使うことができますが、貼り付け場所に少し注意が必要です。

今回は、以下の場所に貼り付けています。

WordPress管理画面を開き、左のメニューバーにある「外観」から「テーマエディター」を選択します。

「テーマを編集」というページが開かれたら、編集するテーマファイルが適切か確認します。

このタイトルが表示されていればオッケーです。

あとは、使いたいCSSを貼り付けます。

貼り付け後、こんな感じになればオッケー。「{」「}」など、表記漏れがないか確認しましょう。

管理人

更新時はバックアップをお忘れなく

編集画面の下にある「ファイルを更新」ボタンを押せば、カスタマイズは完了。サイトを確認して、目当てのデザインになれば正常に編集された、ということ。

CSSが反映されない場合

デザインが変わらない＝CSSが反映されない原因は色々考えられます。原因を特定しやすくするためにも、まず基本的な部分を潰していくことをオススメします。

ひとつひとつ説明するとキリがないです。Cocoon作成者であるわいひらさんが記事にされていますので、以下も参考にどうぞ。

WordPressテーマ設定（CSS等含む）を変更しても反映されない場合のトラブルシューティング方法

CSSをカスタマイズしたのにうまく表示されないなんて場合に、試して欲しいこと。WordpressのCSSトラブルの原因の9割はこれだと思います。

wp-cocoon.com

カエレバ・ヨメレバを準備しよう

さて、本編へ入ります。

カエレバ・ヨメレバは、自分が登録しているASPのアフィリエイトIDを入力してから使います。詳しくはカエレバを参照してください。

登録後、サービス上部の検索バーから紹介したい商品を検索し、検索結果から生成したい商品ページを選びます。

「ブログパーツを作る」をクリックすると、パーツが生成されるので、以下の情報を自分で調節します。

自分で項目を選んで作る

オレンジ枠で囲った「デザイン」設定部分（一番最初の枠）は、以下を選択します。

緑枠で囲った部分は生成リンクに影響します。お好みで。紫枠で囲った部分は、誘導したいショッピングサイトを。

ひよさん

アフィリエイトIDを入力していないショッピングサイトは、選べません

それでは、早速カスタマイズに突入します！

ボタンを調節する

ボタンの色を変える（ボタンが透明になった）

女性Ｃ

自分のサイトカラーとリンクカラーをあわせたい！

リンクボタンは、デフォルトで各企業のイメージカラーが設定されています。

でもサイトカラーと合わせたり統一したかったりと、変えたい方もいると思います。そんな時のカスタマイズ。

また、何らかの理由によりボタンが表示されないケース（リンクは生成されているが、ボタンが見えない）にも使えるかもしれません。

/*カエレバ・ヨメレバ共通*/
.cstmreba .kaerebalink-link1 .shoplinkamazon a,
.cstmreba .booklink-link2 .shoplinkamazon a {
	background: #背景色;
	border: 2px solid #外枠の色;
}

「#背景色」「#外枠の色」部分は、お好きな色のコードに変えてください。

簡単な補足

セレクタ「.shoplink○○○」って感じになので、リンクを作る予定のショッピングサイトの文字列を当てるイメージです。

楽天市場は「.shoplinkrakuten」、ヤフーは「.shoplinkyahoo」というような。

ひよさん

詳しくは商品リンクを貼った後、Chromeデベロッパーツール（右クリック→検証）で色々確認してみよう！

▼ ▼ ▼

ひよさん

温かみのある配色にできたネ！

管理人

細かい部分は後で調整できるからネ！

ボタンがズレている

ボタンが一列に並ぶはずが、ズレてしまう…！これも、先ほど紹介したカスタマイズで調整できる場合があります。

.cstmreba .kaerebalink-link1 .shoplinkamazon a,
.cstmreba .booklink-link2 .shoplinkamazon a {
	border: ●px solid #FFF;
}

「border」の数字を大きくしたり小さくして調整すると、リンクボタンの位置が修正できます。

私の環境だと、デフォルトでこうなりやすいのですが、原因がよくわかりませんでした。…まぁ、見た目が整えばオッケーってことで！

余白を調節する

ボタンとボタンの間の余白をなくす

ボタンの間に大きな余白ができてしまう。特にスマホ表示で多いです。これは「もしもアフィリエイト」でリンクを生成していると起こる現象らしい。

以下を貼り付ければオッケー。

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

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

クラス名が足りなかったり多かったりしたら、各自使うショッピングサイト分を足したり引いたりしてください。

▼ ▼ ▼

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

女性Ｃ

リンクを貼りつけると、なんだか下の空白が大きいような…？

これは、リンクのフッター（下部）部分の空白が影響しているので、非表示にすることで解消されます。

.booklink-footer {
display: none;
}

ボタンを丸くする

女性Ｃ

ボタンを丸くカスタマイズして、やわらかい印象にしたい☆

.shoplinkrakuten a,.shoplinkamazon a,.shoplinkyahoo a,.shoplinkseven a {
border-radius: ●px;
}

「●px」には、好みの数字を入力してください。

ボタンの丸みのイメージ

参考までに、左から「0px」「6px」「12px」「24px」でボタンの角をカスタマイズしてみました。

▼ ▼ ▼

個人的には丸いほうがボタンらしく感じますが～…好みですね。

商品名などをカスタマイズする

タイトルを目立たせ、商品タイトルを目を留めてもらう可能性を少しでも高めたい。あと太字のほうが単純に見やすいと思うので。

商品タイトルを太字に

.cstmreba .booklink-name>a,
.cstmreba .kaerebalink-name>a {/*商品名太く*/
font-weight: bold;
}

商品タイトルを大きく

.cstmreba .booklink-name>a,
.cstmreba .kaerebalink-name>a {
font-size: 16px;
}

行間を大きくする

行間（上の文字列と下の文字列の余白）を狭くしたい場合は、数字も小さくします。

.cstmreba .booklink-name>a,
.cstmreba .kaerebalink-name>a {
line-height: 2.1;
}

▼ ▼ ▼

個人的に、商品情報がギュッと詰まってるリンクが好きじゃないので、ゆとりを持たせてみました。

右寄せ・左寄せ

どちらかに寄せて表示したい場合、１行追加します。

text-align: right; /*右*/

text-align: left; /*左*/

カスタマイズ例

ピックアップしながらの紹介はわかりにくい場合もあるので、例えを置いときます。

▼ ▼ ▼

/*ボタンカスタマイズ*/
.cstmreba .kaerebalink-link1 .shoplinkrakuten a,
.cstmreba .booklink-link2 .shoplinkrakuten a {
background: #6882ba;
border: 4px solid #FFF;
}
.cstmreba .kaerebalink-link1 .shoplinkamazon a,
.cstmreba .booklink-link2 .shoplinkamazon a {
background: #6882ba;
border: 4px solid #FFF;
}
.cstmreba .kaerebalink-link1 .shoplinkyahoo a,
.cstmreba .booklink-link2 .shoplinkyahoo a {
background: #6882ba;
border: 4px solid #FFF;
}
/*形*/
.shoplinkrakuten a,.shoplinkamazon a,.shoplinkyahoo a {
border-radius: 10px;
}
/*商品名*/
.cstmreba .booklink-name>a,
.cstmreba .kaerebalink-name>a {
font-weight: bold;
}

▼ ▼ ▼

おわりに

今回は、初めてCSSに触れる方でもトラブルが少なく使えそうなカスタマイズを紹介しました。言うても、私もいつまでも初心者ですが。

細部までこだわろうと、サイトのデザインに時間をかけたくなることがあります。でも、一番重要なのは、記事の中身です。中身を見てもらわないと、商品リンクは役割を果たせません。

ですので、運営初期なら『ここ見づらいなぁ…』というような、明らかに気になる部分だけカスタマイズして、それ以外は後回しにして、まずは中身の充実を意識することをオススメします。

作った商品リンクを役立てて貰うためにも、ね！

ひよさん

一週間ムダに装飾にこだわって、後日その装飾をリセットした人が言うと違うね！

…今回はそんな記事でした！

じゃ、ラストは実際の商品リンクを置いておきます！

ねこ、はじめました（8）

posted with ヨメレバ

環方 このみ 小学館 2020年11月27日頃

楽天kobo

Amazon

紀伊國屋書店

ebookjapan