【近況報告】頭と心の整理でいっぱいだよ(7.19)

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

サイト運営趣味
スポンサーリンク

追記:21.03.14 一部情報を訂正しました

こんばんは。

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

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

注意

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

はじめに

Cocoonも同じ機能がある!

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


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

楽天市場の商品ページ例
楽天市場の商品ページ例

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

▼▼▼

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

▼▼▼

\ こうなるよ! /

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

追記:21.03.14
テーマ機能「楽天商品リンクショートコード」オプションを使うことで、タイトルも編集できるようです…!


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

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

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

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

貼り付け場所について

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

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


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

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

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

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

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

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


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

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

!ココから使う!


コード編集画面のイメージ

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

管理人
管理人

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


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

CSSが反映されない場合

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

  • 画面右側の編集するテーマが「Cocoon Child」になっているか?
  • テーマファイルは「スタイルシート」を選択されているか?
  • コピペした、書き込んだCSSにミスはないか?
  • カエレバ側の設定に問題はないか?

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

WordPressテーマ設定(CSS等含む)を変更しても反映されない場合のトラブルシューティング方法
CSSをカスタマイズしたのにうまく表示されないなんて場合に、試して欲しいこと。WordpressのCSSトラブルの原因の9割はこれだと思います。

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

さて、本編へ入ります。

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

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


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

自分で項目を選んで作る

  • デザイン
  • 商品キーワード
  • タイトル変更
  • 画像サイズ(大・中・小)
  • ボタンを作るショッピングサイト

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

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


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

ひよさん
ひよさん

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


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

ボタンを調節する

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

ボタンの背景色イメージ
女性C
女性C

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

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

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

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

Amazonボタンのカスタマイズ例
/*カエレバ・ヨメレバ共通*/
.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;
}

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

▼ ▼ ▼

ボタン間の空白がなくなったイメージ
キュッとなったよ

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

リンク下部の余白が大きいイメージ
女性C
女性C

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

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

.booklink-footer {
display: none;
}

ボタンを丸くする

ボタンを丸くしたいイメージ
女性C
女性C

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

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

\ これが… /
商品タイトル装飾前のイメージ

▼ ▼ ▼

\ こうなる /
商品タイトル装飾後のイメージ

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

右寄せ・左寄せ

どちらかに寄せて表示したい場合、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;
}

▼ ▼ ▼

パソコンのイメージ
カスタマイズ例のイメージ(パソコン)
スマホのイメージ
カスタマイズ例のイメージ(スマホ)

おわりに

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

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

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

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

ひよさん
ひよさん

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

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


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

\ 絶賛発売中だにゃん /

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

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

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

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

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

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

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

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

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

  3. はじめまして
    丁寧な説明ありがとうございます

    とりあえずやってみようと、ちゅるさんのをまるっとコピーしてスタイルシートを貼り付けるところまでやったのですが、反映されません。

    どんなことがかんがえられるでしょうか?
    お忙しいところすみませんが、教えていただけるとうれしいです。

  4. >しろ さん

    こんばんは。
    状況や環境がわからないので想像ですが、原因特定のためにも、基本的な部分から再確認すると良いかなと思います。

    例えば、

    【カエレバ側】
    ・デザイン設定で「cssカスタマイズ用」を選択しているか
    【管理画面側】
    ・CSSを編集するテーマやファイルは適切か
    ・コピペミス、誤入力はないか
    ・「ファイルを更新」を押すと成功メッセージは出るか

    など。

    また、コメントアウト(/*こういうやつ*/)以外で日本語が入っていると反映されません。本記事内の一部CSSに日本語で補足を入れていたため修正しました。もし日本語も含めてコピペしていたら、削除してみてください。

    それでもダメなら、テーマ作者・わいひらさんが今回のケースに使えるリストをまとめておられるので、こちらも参考にどうぞ。

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

    他にも色々ありますが、まずはこんな感じでどうでしょう。

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