本業が忙しく記事の更新が出来てませんが、GWに毎日更新しますので楽しみにしていてください(_ _)
スポンサーリンク
スポンサーリンク

物販アフィリボタンのクリック率を向上させるカスタマイズをしてみた!

Cocoon
スポンサーリンク

 

まいどおおきに!おおもと(@so88qa)です!

みなさん、儲けてまっか?

 

ぼくは、最近少しずつアマゾン・楽天の物販をはじめて成果が出てきています(*´∀`*)

 

こんなやつ⤵︎

 

物販リンクはCocoon(コクーン)の標準のまま使っていましたがあまり成果がでない・・・

しかし、ボタンに一工夫を加えて見るとクリック率が27.3%向上することに成功しました!

 

この記事は、ぼくが使っているアマゾン・楽天・ヤフーボタンのカスタマイズ記事です。

 

コクーンCSSカスタム|おしゃれな動きをするボタンを作ってみた!
ワードプレス無料テーマコクーンの物販ボタンをおしゃれな動きをさせるカスタマイズ記事です。 興味があれば流し読みをしてくださいね!

 

クリック率が27.3%向上したカスタマイズです!参考にしてください。

(Cocoon(コクーン)のカエレバ・ヨメレバのボタンも同時に変更できます。)

【CSSカスタマイズ】コクーンで使えるCSSを追加するオススメの方法
有料級のワードプレス無料テーマCoccon(コクーン)のCSSカスタマイズ記事のまとめと、CSSを追加する方法を記載した記事です。 古いカスタマイズから新しいものまで、まとめてますので流し読みをしてください。

 

スポンサーリンク

コピペでOK!クリック率向上ボタンのCSS

 

/*アフィリボタン変更*/
.shoplinkamazon a,.shoplinkkindle a ,.shoplinkrakuten a,.shoplinkrakukobo a, .shoplinkyahoo a {
box-shadow: 0 2px 4px rgba(0,0,0,0.3);/*ボタンに影をつける*/
border-radius:3px;/*ボタンの角をとる*/
}

.shoplinkamazon a{
background-color:#ffb36b;/*アマゾンボタン色の変更/
}

.shoplinkamazon a:hover{/*ホバー時に色の反転*/
background-color:#fff;
color:#ffb36b;
border:solid 2px #ffb36b;
}

.shoplinkrakuten a{
background-color:#ea7373;/*楽天ボタン色の変更/
}

.shoplinkrakuten a:hover{/*ホバー時に色の反転*/
background-color:#fff;
color:#ea7373;
border:solid 2px #ea7373;
}

.shoplinkyahoo a{
background-color:#ff5722;/*ヤフーボタン色の変更/
}

.shoplinkyahoo a:hover{/*ホバー時に色の反転*/
background-color:#fff;
color:#ff5722;
border:solid 2px #ff5722;
}

.shoplinkkindle a {
background: #6495ed;/*キンドルボタン色の変更/
}

.shoplinkkindle a:hover{/*ホバー時に色の反転*/
background-color:#fff;
color:#6495ed;
border:solid 2px #6495ed;
}

.shoplinkrakukobo a {
background: #f43e43;/*楽天koboボタン色の変更/
}

.shoplinkrakukobo a:hover{/*ホバー時に色の反転*/
background-color:#fff;
color:#f43e43;
border:solid 2px #f43e43;
}

 

おおもと
おおもと

コピペで使ってください。

 

コピペでOK!クリック率向上ボタンのポイント

おおもと
おおもと

ボタンの色をこだわって作っています!

 

今回のボタン変更のポイントは3点

  1. 誰が見ても、アマゾン・楽天とわかる色使い
  2. 淡い色を使って、優しさを表現
  3. ホバー時にボタンと分かるように、色を反転

を気をつけて、作りました!

 

実際にボタンにマウスカーソルを乗せてもらうと分かると思いますが、キツイ表現はさけて直感的にボタンと分かるようにしています。

 

(⬇︎のgifが動かない場合はクリックして拡大してください。)

 

ボタンの動きを変えました^^;⤵︎

Cocoon(コクーン)のアマゾン標準の物販リンク

 

Cocoon(コクーン)の楽天標準の物販リンク

 

コクーンCSSカスタム|おしゃれな動きをするボタンを作ってみた!
ワードプレス無料テーマコクーンの物販ボタンをおしゃれな動きをさせるカスタマイズ記事です。 興味があれば流し読みをしてくださいね!

 

おおもと
おおもと

どうですか?いい感じでしょ!

 

マジでおすすめなので、コピペで使ってくださいね!

 

コピペでOK!クリック率向上ボタンのまとめ

この記事は、クリック率を飛躍的に向上させる「物販ボタンのカスタマイズ」記事でした。

 

コピペで簡単に同じものが作れますのでぜひ、コピペしてください。

 

カスタマイズでわからない点はコメント欄にお気軽に書いてくださいね!

 

本日の記事は以上です!じゃあまた!

 

【CSSカスタマイズ】コクーンで使えるCSSを追加するオススメの方法
有料級のワードプレス無料テーマCoccon(コクーン)のCSSカスタマイズ記事のまとめと、CSSを追加する方法を記載した記事です。 古いカスタマイズから新しいものまで、まとめてますので流し読みをしてください。

 

おおもと
おおもと

質問などがあれば、コメント覧に書き込んでくださいね!

スポンサーリンク
スポンサーリンク
Cocoonブログ

Relation

- Follow -
おおもとブログ

Comment

  1. 初めまして、トシと申します。

    コクーンを使用して、
    Amazon商品リンクのカスタマイズに関して調べている時にここにたどり着きました。
    カスタマイズについて大変わかりやすく記載されていましたので、
    質問をさせていただければと思いコメントさせていただきます。

    amazon商品リンクに追加したアフェリエイトボタンの色の変更方法がわからず困っています。

    amazonと楽天、そしてアフェリエイトのボタンを表示させているのですが、
    アフェリエイトのボタンの色を変更したいのですが、どのようなCSSを追加すれば、
    変更できるのか教えていただけるとありがたいです。

    例えば、
    [amazon asin="B07B4CVMW3" kw="OSS ILCE-7M3K" btn2_tag='詳細を見る' yahoo=0]

    デフォルトでは、追加したアフェリエイトのボタンは緑色になっています。
    btn2_tagで追加したボタンを青に変更したいのですが、可能でしょうか?

    お返事いただけると幸いです。

    • トシさん初めまして!

      コクーンの商品リンクボタンの色の変更という事でよろしいですか?

      それなら・・・

      shoplinkamazon a{
      background-color:#ffb36b;/*アマゾンボタンの色の変更*/
      border:solid 2px #ffb36b;/*アマゾンボタンの線色の変更*/
      }

      .shoplinkrakuten a{
      background-color:#ea7373;/*楽天ボタンの色の変更*/
      border:solid 2px #ea7373;/*楽天ボタンの線色の変更*/
      }

      .shoplinkyahoo a{
      background-color:#ff5722;/*ヤフーボタンの色の変更*/
      border:solid 2px #ff5722;/*ヤフーボタンの線色の変更*/
      }

      #○○が色のコードですので、ご自身の好みの色に変更をしてください。

  2. PCではうまく表示されました。ありがとうございます!
    これからもカスタマイズ記事楽しみにしています。

    • うまく言ってよかったです!
      これからも、バンバンカスタマイズ記事を上げていきますね!

      あと、「こんなカスタマイズが知りたい」と要望も受け付けていますので、お気軽にコメント欄に書いてくださいね

  3. おおもとさん、アドバイスありがとうございます。
    文字テキストを小さくしてみましたが、とっても小さくなってしまい判別が厳しい感じでした。
    いろいろ模索しているうちにカラム幅によっては改行されずボタン3つ並んで表示されることに気づきました。
    Cocoonのデフォルト設定だとカラム幅が800で改行されるようなことはなく正常に表示されています。
    以前使っていたSimplicityのデフォルトは680だったこともあり、cocoonにそのカラム幅で適用してみると、やはり改行がおきてしまいます。
    680の幅の場合、cssで1行目はボタン2つ、2行目にボタン1つなど表示することは難しいでしょうか?

    • おそくなりました^^;

      ボタン1つだけ段落を変更すると、形がブサイクになってしまう上に複雑なコードになったので、ボタンを縦配置にして見ました。

      縦配置

      コードはこれです↓
      .product-item-buttons {
      display:flex;
      flex-flow: column;
      justify-content:space-around;
      width:300%;/*お使いのカラム幅に合わせて○○%の変更をしてください。*/
      }

      検証不足ではありますが、一度これを使用して問題があれば教えていただけますか?

  4. ご返信ありがとうございます。
    テーマは同じCocoonで、テーマデフォルトのAmazonのショートコードを使っています。
    レイアウトが崩れるというのは(画像リンクのはりかたがわからないのですみません))、ボタンの中でテキストが改行されてしまうということです。
    3つボタンが並ぶと3つめが改行されるようにできればテキスト改行されないようになるのですが、css知識がなく。。。。

    • 確かに、文字数を多くすると改行されてしまいますね。

      このような、物販ボタンは個々が独立しているので、1つのボタンのサイズが変わった場合他のボタンも連動して変わることはありません。

      解決作としては、2点あり
      1点目は、ボタンのサイズをあらかじめ大きくする
      2点目は、文字の大きさを小さくする
      の2点になると思います。

      ただ、ボタンを大きくするとデザイン的にブサイクになると思うので、文字のサイズを小さくするのがベストだと思います。

      font-size:○○px/*○○は文字の大きさ*/

      とCSSを追記すれば、簡単に文字の大きさを変更出来るのでまず、これで試してみてください。

  5. これは助かりました!まさに求めていた記事です。
    ちなみに、、、、、
    「Amazonでみる」などであれば幅は関係ないのですが、「Amazonでレビューをみる」
    などと長めにした場合、Yahoo,楽天を並べるとPC画面ではボタンのレイアウトがくずれてしまって困っています。
    こちらはなにか方法ないでしょうか?

    • さかたんさん

      コメントありがとうございます!

      ぼくのブログ内で検証してみましたが、文字数が多くなって表示が崩れることがありませんでした。

      もしよろしければ、「物販リンクは何を使っているのか?」「お使いのテーマ」を教えていただけませんか?
      さらに、表示が崩れた画像があればそれも一緒にいただきたいです。