Cocoonのボタンを「思わずポチる」感じに変える方法

こんにちは、とち（ @tochi1203 ）です。

こういった悩みを解決する記事です。

WordPress最強の無料テーマCocoonには、標準で多くのボタンパターンが備わっています。

これに大きさや、カラー31色の組み合わせができるんで、かなりのバリエーションですね。

WordPress5.5からは、WordPressデフォルトのボタンも実装されてパターンが増えました。

本記事でご紹介するのは、Cocoonボタンのカスタマイズです。
WordPressボタンには適用されませんので、ご注意を。

Cocoonのカラーを追加する方法は、こちらの記事を。
参考【Cocoon】カラーパレットに好きな色を追加する【6種増！】

【Cocoon】カラーパレットに好きな色を追加する【6種増！】

「Cocoonのスキンに合ったカラーがブロックでも使えるようにならないかな。デフォルトのものじゃ、どうも自分のブログに合わないんだよな〜」←こういった疑問に答えます。Cocoonはアップデートによって、カラーパレットに自分の好きな色を6種類追加できる仕様になりました。ごにょごにょとコードをイジらなくても標準でできます。

to-chi.org

ただ最近、内部リンクやアフィリエイトボタンのクリック率が悪いな〜と…。

これ、ボタンのせいじゃね！？

とCocoonの責任にして（絶対ちがう…）、ひと工夫することにしました。

【参考】アフィリエイトするなら登録必須のASP

① A8.net→ASP最大手。通称「エーハチ」
② もしもアフィリエイト→Amazon・楽天やるならマスト
③ afb→美容・健康系に強い
④ バリューコマース→ここも大手。旅行系に強い
⑤ Link-A→VODに強い ※新規受け付け停止中
⑥ アクセストレード→通信ジャンル多し
⑦ infotop→情報商材系

【2022年】アフィリエイトASPおすすめ7社【登録必須】

「ブログ・アフィリエイトで稼ぐにはASPの登録が必要って聞くけど、どこに登録すればいいの？ASPに関する最新情報を教えてほしい」←こういった疑問に答えます。本記事では登録必須のASP7社を、各社の特長とともにご紹介。結論をいうと、ブログで稼ぎたければ全部に登録しましょう！

to-chi.org

下のような『ふわりと浮かぶ、思わず押したくなる影つきボタン』ができたんで、興味ある人は取り入れてください。
すべてコピペでできますよ。

＼プログラミングでCocoonは10倍楽しい／

▶テックアカデミー〈7日間無料体験〉

※今すぐできるオンライン体験学習です。

Cocoonのボタンを「思わずポチる」感じに変える方法

この2点です。

今回使用するのは、こちらのコード。

下記をWordPressダッシュボードの『外観』→『テーマエディター』→『スタイルシート (style.css)』に貼り付ければOKです。

/* −−ボタンを浮かして影をつける−−*/
 .btn{
 box-shadow: 0 7px 0px #808080;
 }
/*−−−ボタンが重なったときに沈む−−−*/
 .btn:hover{
 box-shadow: 0 1px 0 #808080 ;
 transform: translateY(6px);
 -webkit-transform: translateY(6px);
 }
/*−−−カーソルを外したときに元に戻す−−−*/
 .btn{
 transition:.5s ease-in-out;
 }

これで下記のような影付きボタンが、できたのではと思います。

＼プログラミングでCocoonは10倍楽しい／

▶テックアカデミー〈7日間無料体験〉

※今すぐできるオンライン体験学習です。

Cocoonのボタンのシャドーカラーを変える

個人的にですが、影の色はボタンカラーに少し黒を混ぜた配合が最もいい感じがしてます。

下記のような感じですね。
※下記3つのボタンは画像です（押せません）。

ボタンカラーに合わせて、影の色を変える方法もご紹介します。

Cocoonは個別の記事ごとに、CSS設定を変えることが可能。
編集画面を最下部の「カスタムCSS」を使用します。

このページにだけ反映させたいCSSコードを入力します。

先ほどのコードを、もう一度貼ります。

この赤枠で囲った#808080がカラーコードなんで、ここをボタンカラーに合わせて変えましょう。

カラーコードは、下記の原色大辞典さんに膨大なバリエーションがあります。

WEB色見本 原色大辞典 - HTMLカラーコード

色の名前とカラーコードが一目でわかるWEB色見本

www.colordic.org

クリック率がアップする色がある？

余談ですが「補色」って知ってますか？
色には下記の十二色相環というモデルがあり、「補色」とは色相環の反対にある色を指します。

マーケティング会社の研究で、活発な補色を用いて購入ボタンや問い合わせボタンを作ると、クリックされやすくなる結果が出ています。

（例）当ブログのメインカラーが下記の紺系

メインカラーだ！メインカラーだ！メインカラーだ！

このメインカラーに対する「補色」のボタンがこちら↓↓↓

「補色ボタン」でクリック率アップ！？

影つきボタンのカスタマイズは以上です。

うまくできましたか？
おそらく、これであなたのブログのボタンも、ばんばん押されることでしょうw。

ちなみにですが、僕が最近別サイトで使い始めたWordPressテーマ・SWELLのボタン機能がスゴイです。

デフォルトでクリック率までわかります。
しかも編集画面で。

普通はプラグインか、高額ヒートマップに付随する機能です。
ブロガー・アフィリエイターには超有益なデータですよね。

Cocoonも神ですがSWELLもまた神です。

＼プログラミングでCocoonは10倍楽しい／

▶テックアカデミー〈7日間無料体験〉

※今すぐできるオンライン体験学習です。

Cocoonのボタンを「思わずポチる」感じに変える方法：まとめ

あくまで体感ですが、ボタンをふわりとさせたらクリック率が上がった気がします。

きっちりデータで示せよ！って話ですが、「ボタンを変えたことだけ・・・・による効果」を実証するのは無理(-_-;)

ただバナーに比べて、広告感の薄いボタンリンクは重要なパーツなんで、しっかり施策しておきたいですね。

今回はこの辺で！

＼プログラミングでCocoonは10倍楽しい／

▶テックアカデミー〈7日間無料体験〉

※今すぐできるオンライン体験学習です。