【筆者体験ベース】おすすめ副業10選>>>

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

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

産経新聞社サンスポ記者として

  • Jリーグ
  • プロ野球
  • オリンピック
    などを担当してきた『とち』(@blue_chikippaa)です。

真面目に、かるくが執筆信条。
現在は独立して、いろいろ書きながら生きてます。

Cocoonでブログやってるけど、リンクボタンとかアフィリエイトボタンが押されない!
押したくなるボタンとか”魔法”みたいな話あれば、おしえてくれ〜。

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

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

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

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

WordPressボタン画面

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

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

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

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

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

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

あっこれは押さないで!記事トップに戻ります

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

Cocoonのボタンを「思わずポチる」感じに変える方法
ふわりボタンの作り方
  • ボタン下に影をつける
  • カーソルを乗せたときに沈むようにする

この2点です。

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

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

必ずCocoon子テーマのスタイルシートに貼り付けましょう!

/* −−ボタンを浮かして影をつける−−*/
.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のボタンのシャドーカラーを変える

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

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

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

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

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

カスタムCSS入力画面

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

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

カスタムcss画面

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

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

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

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

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

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

メインカラーだ!

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

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

うまくできましたか?
おそらく、これであなたのブログのボタンもバシバシに押されることでしょうww。


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

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

SWELLボタン機能画面

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

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

コード見るだけで白目むく人→有料テーマの検討も

Cocoonはユーザーによるカスタマイズを求めるテーマです。
なので、どうしても多少のプログラミング知識が必要になります。

落ち込む人画像
やっぱりコードとかよくわからんし、もう萎える…。

って方は有料テーマを検討してはどうでしょう?
プログラミング知識がなくても、綺麗なサイト作りが容易になります。

おすすめのWordPress有料テーマは下記に詳しく。
>>>WordPressおすすめテーマ6選
打ち消し線の理由
↓↓↓

前述しましたが、最近SWELLというテーマに出会い感動しました。
WordPressテーマのおすすめ度でいうとNo.1です。

17,600円と高額に感じるかもですが、価格に見合う(超える!)テーマです。

こちらはCocoonとSWELLの比較記事です、是非ご参考に。

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

まとめ2

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

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

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

今回はこの辺で!

コメント待ってます!

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