現在、広告自動配置中です。後日配置修正します~

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

サイト運営の話
追記:20.12.04
カスタマイズの再現性が確認できないため、一部カスタマイズを削除しました。確認でき次第再度掲載します。

こんばんは。

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

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

注意

本記事のカスタマイズは、私の環境下で反映確認できたものをまとめております。不備などあるかもしれませんがご了承ください。「正常に表示されればOK」というスタンスで捉えてもらえると幸いです。

はじめに

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

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

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

作りたい商品のページを開くイメージ

 ↓ ↓ ↓

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

 ↓ ↓ ↓

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

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

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

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

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

カスタマイズ時の注意

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

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

Wordpress管理画面のイメージ
WordPress管理画面トップのキャプチャ


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

Cocoon Child: スタイルシート (style.css)

こんな感じの画面です。

「テーマを編集」画面イメージ


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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

!ココから書く!

こんな感じの画面です。

コード編集画面のイメージ
管理人
管理人

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

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

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

こんな感じの画面です。

画面右側のイメージ


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

ご注意ください~。

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

カスタマイズなし(パソコン表示)
デフォルトはこんな感じ

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

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

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

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


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

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

女性A
女性A

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

女性C
女性C

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

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

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

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

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

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

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


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

▼ ▼ ▼

ボタンの色を変更後のイメージ
ひよさん
ひよさん

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

管理人
管理人

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

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

ボタンの位置がズレているイメージ

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

.cstmreba .kaerebalink-link1 .shoplinkamazon a,
.cstmreba .booklink-link2 .shoplinkamazon a {
	border: ●px(※数字を調整する) solid #FFF;
}

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

ま、見た目が整えばOKってことで!

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

ボタンの間に空白があるイメージ

ボタンの間に大きな余白ができてしまった。特にスマホ表示で多いです。

これは「もしもアフィリエイト」でリンクを生成していると起こる現象らしいので、以下を貼りつければOK。

リンク先の代表的なサイト名だけ記載しています。足りなかったり多かったりしたら、各自調整してください。

/* もしもアフィリエイトの場合不要な画像を削除 */ 
.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」で作成したイメージです。

▼ ▼ ▼

左から「0」「6」「12」「24」のイメージ

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

商品タイトル周辺を装飾する

デフォルトだと商品タイトルなどに装飾がありません。タイトルを目立たせ、商品リンクに目を留めてほしいところです。

商品タイトルを太字に

.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;
}
商品タイトル装飾なしのイメージ

▼ ▼ ▼

商品タイトルに強調と空間ができたイメージ

商品タイトルをやや大文字にし、太字で強調。そして、その下にあるサービス名との行間に余裕をもたせました。

なんかリンクっぽくなった気がしませんか?

右寄せ・左寄せ

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

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

カスタマイズ例

ピックアップしつつ紹介するとわかりにくい場合もあるので、例えも一緒においときます。

  • Amazon、楽天、ヤフーのリンクを作りたい
  • ボタンの色は全部統一したい
  • ボタンは少しだけ丸くしたい
  • 商品名は太字だけ

▼ ▼ ▼

/* ボタン */
.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;
}

▼ ▼ ▼

完成イメージ
完成イメージスマホ版

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

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

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

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

  1. お世話になります。超初心者です。

    コードを記入するところがわかりません。

    スタイルシートの場所まではいけるのですが…

  2. >いちぎょいちみ さん

    こんばんは。
    確認遅くなり失礼しました。

    スタイルシートまで確認できたなら、あとは
    「子テーマ(Cocoon Child)」を選択しているか確認して、
    「必要ならばここにコードを書く」の下でコードを編集する流れだと思います。

    いただいた質問内容を記事に追加しました。
    以下の部分です。

    https://tonikaki.net/yomereba01/#toc4

    (12/4 追記)
    コードの内容を更新したので、
    何かあればお手数ですが返信いただければ助かります。

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