【Cocoon】初心者向け！カエレバ・ヨメレバで作ったリンクをカスタマイズしよう

こんばんは。

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

必要な情報に飛べるようにリンクをつけたので、以下のリンクボックスからお目当ての場所に飛んでみてください。

はじめに

Cocoonにもリンク生成機能はある！

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

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

　↓　↓　↓

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

　↓　↓　↓

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

北海道くしろキッチン

Amazon

楽天

Yahoo!ショッピング

非常～～に便利な機能ですが、商品タイトルを編集できないのが個人的に気になったんです。そこで「カエレバ」を使いはじめました。

「カエレバ」は、こんな機能です。

リンクを作りたい商品と表示させたいショッピングサイトを選択してリンクが作れる、すごいツールです。

手軽に商品リンクを貼りたいならテーマ搭載機能、自分好みにしたいならカエレバ・ヨメレバを使うと良いと思います。

カスタマイズ時の注意

コードを書く場所はドコ？

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

「テーマを編集」が開かれたら、以下の表示になっているか確認します。

こんな感じの画面です。

コードを貼りつける場所は、以下。

こんな感じの画面です。

管理人

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

画面がこうなっていない方は、以下を確認します。

• 画面右側の「編集するテーマを選択：Cocoon Child」になっているか？
• 「スタイルシート」が選択されているか？

こんな感じの画面です。

編集するテーマが「Cocoon」になっていると、親テーマを編集することになります。親テーマを編集すると、Cocoonをアップデートすると消えてしまいます。

ご注意ください～。

カエレバ・ヨメレバのポイント

カエレバ・ヨメレバでリンクを生成する際は、以下を選択するとごちゃごちゃになりにくいです。

本記事で紹介しているカスタマイズも、全てこの項目で作成したものです。

なお、カエレバ・ヨメレバの使用方法は該当サービスを参照してください。

それでは、早速カスタマイズを見ていきましょう！

リンクボタンの色を変えたい（ボタンが表示されない）

女性Ａ

ボタンの色を統一したい！

女性Ｃ

自分のサイトに合った色にしたい！

リンクボタンの色は、デフォルトでサイトカラーが設定されていますが、変えたい方もいると思います。そんな時のカスタマイズ。

また、何らかの理由によりリンクボタンが表示されない場合にも使えるかもしれません（※当サイトの環境では再現できなくなったため、参考程度でお願いします）。

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

「.shoplinkamazon」はそれぞれのショッピングサイト名です。

例えば、アマゾンと楽天市場のリンクだけ作るのであれば、この２つだけカスタマイズしたらＯＫ。私は４サイト掲載するので、使うサイト分カスタマイズを繰り返しています。

「border」の数字を調整すると、リンクボタンの外枠の幅が変わります。

上記カスタマイズを繰り返して、こんな感じに！

▼ ▼ ▼

ひよさん

デフォルトより温かみのある配色にできたネ！

管理人

余白など、細かい部分は後で調整するから気にしないでネ！

リンクボタンがズレてしまう

一部のボタンが並んで表示されず、ズレてしまう現象。先ほど紹介したカスタマイズで調整できる場合があります。

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

リンクボタンを丸くする

リンクボタンを丸くして、より「ボタン」らしくしてみましょう。

.shoplink●●（※ショップ名） a {
	border-radius: ●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;
}

▼ ▼ ▼

カスタマイズ記事のコードをコピペしても、反映されないことがあります。一気にカスタマイズしようと、不要なものまでコピペしてしまうことも。

ですが、カスタマイズに時間をかけ過ぎると、肝心の記事が書けません。私も、カスタマイズばかり調べていた時期があります。

が、サイト運営に慣れてからの方がスムーズにカスタマイズできます。なので、始めのうちはサッとできる部分をまず編集してみるのが効率的かと思います。

今回はそんな記事でした！じゃ、ラストは実際のリンクを置いておきます！

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

posted with ヨメレバ

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

楽天kobo

Amazon

紀伊國屋書店